10 extensions de code VS indispensables pour les développeurs JavaScript –

Dans cet article, je vais me concentrer sur une liste d'extensions de code VS indispensables pour les développeurs JavaScript.

Visual Studio Code (VS Code) est sans aucun doute l'éditeur de code le plus populaire et le plus léger aujourd'hui. Il emprunte beaucoup aux autres éditeurs de code populaires, principalement Sublime Text et Atom. Cependant, son succès vient principalement de sa capacité à fournir de meilleures performances et stabilité. En outre, il fournit également des fonctionnalités indispensables comme IntelliSense, qui n'étaient disponibles que dans des IDE de grande taille comme Eclipse ou Visual Studio 2017.

La puissance de VS Code provient sans aucun doute du marché . Grâce à la merveilleuse communauté open source, l'éditeur est désormais capable de prendre en charge presque tous les langages de programmation, framework et technologies de développement. La prise en charge d'une bibliothèque ou d'un framework se présente de différentes manières, qui comprennent principalement des extraits, la mise en évidence de la syntaxe, Emmet et les fonctionnalités IntelliSense pour cette technologie spécifique.

Extensions de code VS par catégorie

Pour cet article, je Je me concentrerai sur les extensions VS Code ciblant spécifiquement les développeurs JavaScript. Actuellement, il existe de nombreuses extensions VS Code qui répondent à ce critère, ce qui signifie bien sûr que je ne pourrai pas toutes les mentionner. Au lieu de cela, je vais mettre en évidence les extensions VS Code qui ont gagné en popularité et celles qui sont indispensables pour les développeurs JavaScript. Pour plus de simplicité, je vais les regrouper en dix catégories spécifiques.

Extensions d'extraits

Lorsque vous installez VS Code pour la première fois, il est fourni avec plusieurs extraits intégrés pour JavaScript et Typescript. Les extraits de code vous aident à écrire rapidement du code répétitif. Cependant, il se peut que ces informations ne soient pas suffisantes. Vous pouvez facilement créer le vôtre, ou vous pouvez simplement installer une extension qui inclut un tas de nouveaux extraits utiles. Une astuce rapide si vous souhaitez afficher des extraits de code en plus des suggestions est d'utiliser cette configuration:

 {
  "editor.snippetSuggestions": "top"
}

Voici quelques-unes des extensions d'extraits les plus populaires pour les développeurs JavaScript. Cependant, je vous recommande d'en installer un seul pour des raisons de simplicité.

• Extraits de code JavaScript (ES6) par Charalampos Karypidis. Il s'agit actuellement de l'extrait de code javaScript le plus populaire avec plus de 3 millions d'installations à ce jour. Cette extension fournit la syntaxe ES6 pour JavaScript, TypeScript, HTML, React et Vue. Tous les extraits de code incluent un point-virgule final.

• Extraits de code JavaScript (ES6) de style StandardJS par James Vickery. Il s'agit essentiellement d'une fourchette de l'extension ci-dessus pour ceux qui préfèrent Convention de style StandardJS – c'est-à-dire que les extraits de code n'ont pas de point-virgule.

• Extraits de style JavaScript standardjs par capaj. Un autre extrait de style StandardJS, mais celui-ci est plus populaire avec plus de 72 000 installations. Initialement issu de extraits de code Atom StandardJS . Contient une énorme collection d'extraits pratiques et prend en charge JavaScript, TypeScript et React.

• Extraits JavaScript par Nathan Chapman. Une collection d'extraits JavaScript avec environ 33k + installations à ce jour. Cette extension d'extrait prend en charge Node.js, les frameworks de test BDD tels que Mocha et Jasmine.

• Atom JavaScript Snippet par Saran Tanpituckpong. Avec environ 26k + installations à ce jour, les extraits de cette extension ont été portés depuis atom / language-javascript . Extraits JavaScript portés à partir de l'extension atom / language-javascript.

Extensions de mise en évidence de la syntaxe

La dernière version de VS Code prend en charge une meilleure colorisation de la syntaxe et est désormais plus conforme aux normes définies dans la grammaire Atom. Par conséquent, des extensions telles que JavaScript Atom Grammar ne sont plus nécessaires.

Cependant, nous avons encore quelques extensions de coloration syntaxique qui sont très utiles quand il s'agit de certains types de projets et d'extensions de fichiers. En voici quelques-uns:

• Babel JavaScript par Michael McDermott. Avec plus de 550k + installations à ce jour, cette extension fournit la mise en évidence de la syntaxe pour le code ES201x JavaScript, React, FlowType et GraphQL.

• DotENV par 833 737. Avec plus de 833 000 installations à ce jour, cette extension prend en charge la coloration syntaxique des paramètres d'environnement, c'est-à-dire les fichiers .env .

• Bracket Pair Colorizer 2 par CoenraadS. Avec les installations 730k +, cette extension met en évidence les supports correspondants de différentes couleurs, vous aidant à identifier quel support appartient à quel bloc.

Extensions Linter

Avez-vous déjà eu un débat avec vos coéquipiers sur onglets vs espaces ou point-virgule vs pas de point-virgule? Vous vous rendrez compte que les gens ont des opinions bien arrêtées sur le style de codage à utiliser. Néanmoins, tous les membres de la même équipe doivent utiliser le même style de codage quelle que soit leur opinion.

Cependant, il est assez courant pour les programmeurs d'oublier le style de codage avec lequel ils ont accepté de travailler. Pour appliquer les règles, nous devons utiliser des linters qui comparent votre code avec les règles que vous avez établies. Vous définissez vos règles en choisissant un style de codage populaire tel que Standard Google et Airbnb . Vous pouvez les utiliser tels quels ou utiliser un fichier de configuration pour personnaliser les règles. VS Code n'a pas de lintereur JavaScript intégré, vous devrez donc installer une extension.

Voici les extensions disponibles:

• ESLint par Dirk Baeumer. Avec plus de 8 millions d'installations, il s'agit de l'extension la plus populaire prenant en charge la bibliothèque ESLint . Pour que l'extension fonctionne, votre projet aura besoin que les packages et plugins ESLint soient installés. Vous devrez également spécifier un .eslintrc qui précisera les règles que l’extension utilisera pour pelucher votre code.

• JSHint par Dirk Baeumer. Avec les installations 1.2M +, cette extension prend en charge le peluchage avec la bibliothèque JSHint . Un fichier de configuration .jshintrc est requis pour que l'extension puisse peloter votre code.

• StandardJS – JavaScript Standard Style par Sam Chen. Cette extension (259k + installations) intègre simplement le style standard JavaScript dans VS Code. Vous devrez installer la norme standard ou semiStandard en tant que dépendance de développement dans votre projet. Aucun fichier de configuration n'est requis. Vous devrez désactiver le validateur intégré de VS Code pour que cette extension fonctionne.

• JSLint par Andrew Hyndman. Cette extension fournit des peluches avec la bibliothèque JSLint . Vous devez installer jslint localement ou globalement pour que l'extension fonctionne. Il a 109k + installations à ce jour.

Si vous souhaitez un aperçu des linters disponibles et de leurs avantages et inconvénients, consultez notre comparaison des outils de linting JavaScript .

Extensions de gestion des packages de nœuds [19659005] Chaque projet JavaScript doit contenir au moins un package npm, sauf si vous êtes quelqu'un qui aime faire les choses à la dure. Voici quelques extensions VS Code qui vous aideront à travailler avec la gestion et l'utilisation des packages npm plus facilement.

• npm par egamma. Avec plus de 2,3 millions d'installations et plus, cette extension utilise package.json pour valider les packages installés. Si quelque chose manque ou que les versions ne correspondent pas, l'extension vous fournira des options cliquables pour résoudre le problème. De plus, vous pouvez également exécuter des scripts npm définis dans package.json directement dans l'éditeur.

– npm IntelliSense par Christian Kohler. Avec les installations 1.9M +, cette extension fournit des modules npm à saisie automatique dans les instructions d'importation.

• Path IntelliSense par Christian Kohler. Avec 2,7 M + d'installations, cette extension complète automatiquement les noms de fichiers. Il fonctionne également à l'intérieur des fichiers HTML et CSS.

• Node exec par Miramac. Avec 168k + installations, cette extension vous permet d'exécuter le fichier actuel ou votre code sélectionné avec Node.js en appuyant sur F8 sur votre clavier. Vous pouvez également annuler un processus en cours en appuyant sur F9 .

• Voir Node Package par Dominik Kundel. Avec les installations 55k +, cette extension vous permet d'afficher rapidement la source et la documentation d'un package Node pendant que vous travaillez avec votre code.

• Lisez-moi Node par bengreenier. Avec les installations 52k +, cette extension vous permet d'ouvrir rapidement une documentation de package npm directement dans l'éditeur VS Code sous un onglet séparé.

• Rechercher node_modules par Jason Nutter. Par défaut, le dossier node_modules est exclu de la recherche intégrée de VS Code. Avec plus de 470 000 installations, cette extension vous permet de parcourir et d'ouvrir rapidement des fichiers dans node_modules en parcourant l'arborescence de dossiers.

• Import Cost par Wix. Cela affiche l'espace disque utilisé par un package lorsque vous l'importez. L'extension a 562K + installations.

Extensions de formatage

Plus souvent qu'autrement, nous écrivons parfois du code qui n'est pas aligné avec le reste du code . Pour résoudre ce problème, nous devons revenir en arrière et corriger l'indentation dans chaque ligne. De plus, nous devons nous assurer que les accolades et les balises sont correctement formatées dans un format lisible. Ce processus peut rapidement devenir fastidieux.

Heureusement, nous avons des extensions qui peuvent faire le travail pour nous. Veuillez noter que les extensions telles que Prettier et Beautify ne peuvent pas être actives simultanément.

• Prettier Code Formatter par Esben Petersen. Il s'agit de l'extension la plus populaire qui prend en charge le formatage de JavaScript, TypeScript et CSS à l'aide de Prettier . Il compte à ce jour plus de 5,7 millions d'installations. Il est recommandé d'installer plus joli localement en tant que dépendance de développement.

• Embellissez par HookyQR. Une extension jsBeautifier qui prend en charge JavaScript, JSON, CSS et HTML. Il peut être personnalisé via un fichier .jsbeautifyrc . C'est maintenant le deuxième formateur le plus populaire, avec 4,4 millions d'installations à ce jour.

• JS Refactor par Chris Stead. Cela fournit un certain nombre d'utilitaires et d'actions pour refactoriser le code JavaScript, tels que l'extraction de variables / méthodes, la conversion de code existant pour utiliser des fonctions fléchées ou des littéraux de modèle, et l'exportation de fonctions. Il a 140k + installations à ce jour.

• JavaScript Booster par Stephan Burguchev. Il s'agit d'un incroyable outil de refactorisation de code. Il comporte plusieurs actions de codage telles que la conversion de var en const ou let la suppression des instructions redondantes else et la fusion de la déclaration et de l'initialisation. Largement inspiré de WebStorm il a 74k + installations à ce jour.

Extensions de navigateur

Sauf si vous écrivez un programme de console en JavaScript, vous exécuterez très probablement votre code JavaScript dans un navigateur. Cela signifie que vous devrez actualiser fréquemment la page pour voir l'effet de chaque mise à jour de code que vous effectuez. Au lieu de le faire manuellement tout le temps, voici quelques outils qui peuvent réduire considérablement le temps de développement de votre processus d'itération:

• Débogueur pour Chrome par Microsoft. Avec plus de 5,2 millions d'installations, cette extension vous permet de déboguer votre code JavaScript dans Chrome ou toute autre cible prenant en charge le protocole de débogage Chrome. Si vous êtes nouveau dans cette extension et le débogage dans VS Code, consultez notre didacticiel de débogage du code VS et de Chrome .

• Live Server par Ritwick Dey. Cette extension vous permet de lancer un serveur de développement local avec une fonction de rechargement en direct pour les pages statiques et dynamiques. Il a 4,6M + installation à ce jour.

• Aperçu sur le serveur Web par YuichiNukiyama. Cela fournit un serveur Web et un aperçu en direct de HTML. Les fonctionnalités peuvent être appelées à partir d'un menu contextuel ou d'un menu de l'éditeur. Il a 120k + installations à ce jour.

• PHP Server par brapifra. Conçu pour les projets PHP, il est toujours utile pour tester le code JavaScript qui doit être exécuté côté client uniquement. Il a 234k + installations à ce jour.

• Rest Client par Huachao Mao. Au lieu d'utiliser un navigateur ou un programme CURL pour tester vos points de terminaison d'API REST, vous pouvez installer cet outil pour exécuter de manière interactive des requêtes HTTP directement dans l'éditeur. Il a 834 000+ installations à ce jour.

Extensions du cadre

Pour la plupart des projets, vous aurez besoin d'un cadre approprié pour structurer votre code et réduire votre temps de développement. VS Code prend en charge la plupart des principaux frameworks via des extensions. Cependant, il existe encore un certain nombre de cadres établis qui n'ont pas encore d'extension entièrement développée. Voici quelques-unes des extensions VS Code qui offrent des fonctionnalités importantes:

• Angular Snippets (Version 9) par John Papa. Avec plus de 1,7 million d'installations, il s'agit de l'extension d'extrait de code la plus populaire pour les développeurs Angular. Il fournit des extraits angulaires pour les fichiers TypeScript, RxJS, HTML et Docker. Au moment de la rédaction, l'extension a été mise à jour pour prendre en charge Angular 9.

• Angular 8 Snippets – TypeScript, Html, Angular Material, ngRx, RxJS et Flex Layout par Mikael Morlund. Cela a des extraits pour Angular 2, 4, 5, 6,7 et 8 Beta. Il prend en charge Typescript, HTML, Angular Material ngRx, RxJS, PWA et Flex Layout. Il contient 242 extraits angulaires à ce jour et compte actuellement plus de 1,35 million d'installations.

• Extraits ES7 React / Redux / GraphQL / React-Native par dsznajder. Avec plus de 1,2 million d'installations à ce jour, cette extension fournit des extraits de code JavaScript et TypeScript pour React, Redux et Graphql avec la syntaxe ES7.

• React Native Tools par Microsoft. Cela fournit IntelliSense, des commandes et des fonctionnalités de débogage pour les projets React Native. Il compte plus de 1,2 million d'installations à ce jour.

• Extraits React-Native / React / Redux pour es6 / es7 par EQuimper. Cela fournit des extraits de code dans la syntaxe ES6 / ES7 pour React, React Native, Redux et storybook dans la syntaxe ES6 / ES7. Il a 371k + installer à ce jour.

• Vetur par Pine Wu. Cela fournit la mise en évidence de la syntaxe, des extraits, Emmet, le linting, le formatage, IntelliSense et la prise en charge du débogage pour le cadre Vue. Il est livré avec une documentation appropriée publiée sur GitBook . Il compte plus de 4,2 millions d'installations à ce jour.

• Ember par Felix Rieseberg. Cela fournit un support de commande et IntelliSense pour Ember. Après l'installation, toutes les commandes ember cli sont disponibles via la propre liste de commandes de VS Code. Il a 18k + installations à ce jour.

• Cordova Tools par Microsoft. Cela offre un support pour les plugins Cordova et le framework Ionic, et fournit également IntelliSense, le débogage et d'autres fonctionnalités de support pour les projets basés sur Cordova. Il a 272k + installations à ce jour.

• JQuery Code Snippets par Don Jayamanne. Cela fournit plus de 130 extraits de code jQuery. Il est activé par le préfixe jq et a 700k + installations à ce jour.

Extensions de test

Le test est une partie critique du développement logiciel, en particulier pour les projets en phase de production. Vous pouvez obtenir un large aperçu des tests en JavaScript et en savoir plus sur les différents types de tests que vous pouvez exécuter dans notre guide, « Tests JavaScript: tests unitaires vs fonctionnels vs tests d'intégration ». Voici quelques extensions de code VS populaires pour les tests:

• Mocha sidebar par maty. Cela fournit un support pour les tests à l'aide de la bibliothèque Mocha. Cette extension vous aide à exécuter des tests directement sur le code et affiche les erreurs en tant que décorateurs. Il a 68k + installations à ce jour. Notez que cette extension a un certain nombre de problèmes non résolus au moment de la rédaction.

• ES6 Mocha Snippets par Cory Noonan. Cela fournit des extraits Mocha dans la syntaxe ES6. L'objectif de cette extension est de garder le code au sec, en tirant parti des fonctions fléchées et en omettant les boucles si possible. Il peut être configuré pour autoriser les points-virgules et a 36k + installations à ce jour.

• Jasmine Code Snippets par Charalampos Karypidis. Cela offre des extraits de code pour le framework de test Jasmine. Il a 30k + installations à ce jour. Malheureusement, cette extension n'a pas été mise à jour au cours des trois dernières années au moment de la rédaction.

• Extraits de rapporteur par Budi Irawan. Cela fournit des extraits de test de bout en bout pour l'infrastructure Protractor. Il prend en charge à la fois JavaScript et Typescript, et dispose à ce jour de plus de 18 000 installations.

• Node TDD par Prashant Tiwari. Cela prend en charge le développement piloté par les tests pour les projets Node et JavaScript. Il peut déclencher un build de test automatique chaque fois que les sources sont mises à jour. Il a 23k + installations à ce jour.

Extensions Awesome

Je mets juste ce prochain paquet d'extensions VS Code dans la catégorie "awesome" , car c'est ce qui les décrit le mieux!

• Quokka.js par Wallaby.js. Un outil de débogage génial qui fournit un terrain de jeu de prototypage rapide pour le code JavaScript. Il est livré avec une excellente documentation et possède plus de 641 000 installations.

• Coller en tant que JSON par quicktype. Cela vous permet de convertir rapidement des données JSON en code JavaScript et a plus de 430 000 installations à ce jour.

• Code Metrics par Kiss Tamás. Ceci est une autre extension géniale qui calcule la complexité du code JavaScript et TypeScript. Il compte plus de 233 000 installations à ce jour.

Packs d'extension

Maintenant que nous sommes arrivés à notre dernière catégorie, je voudrais juste vous faire savoir que le marché VS Code a une catégorie pour les packs d'extension . Il s'agit essentiellement de collections d'extensions de code VS associées regroupées dans un seul package pour une installation facile. Voici quelques-uns des meilleurs:

• Nodejs Extension Pack par Wade Anderson. Ce pack contient ESLint, npm, extraits de code JavaScript (ES6), Search node_modules, NPM IntelliSense et Path IntelliSense. Il a plus de 293 Ko d'installations.

• VS Code for Node.js – Development Pack par NodeSource. Celui-ci a NPM IntelliSense, ESLint, Debugger for Chrome, Code Metrics, Docker et Import Cost. Il compte plus de 103 000 installations à ce jour.

• Vue.js Extension Pack par Muhammad Ubaid Raza. Il s'agit d'une collection d'extensions Vue et JavaScript. Il contient actuellement environ 12 extensions de code VS, dont certaines n'ont pas été mentionnées ici, comme auto-rename-tag et auto-close-tag . Il compte plus de 156 000 installations à ce jour.

• Ionic Extension Pack par Loiane Groner. Ce pack contient un certain nombre d'extensions VS Code pour le développement ionique, angulaire, RxJS, Cordova et HTML. Il compte environ 75 000 installations à ce jour.

Résumé

Le grand nombre d'extensions de qualité de VS Code en fait un choix populaire pour les développeurs JavaScript. Il n'a jamais été aussi facile d'écrire du code JavaScript aussi efficacement. Des extensions telles que ESLint vous aident à éviter les erreurs courantes, tandis que d'autres telles que Debugger pour Chrome vous aident à déboguer votre code plus facilement. Les extensions Node.js, avec leurs fonctionnalités IntelliSense, vous aident à importer correctement les modules, et la disponibilité d'outils tels que Live Server et REST client réduit votre dépendance à l'égard des outils externes pour terminer votre travail. Tous ces outils rendent votre processus d'itération beaucoup plus facile.

J'espère que cette liste vous a présenté de nouvelles extensions VS Code qui peuvent vous aider dans votre flux de travail.