Catégories
Astuces et Design

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

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 léger le plus populaire 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 taille normale comme Eclipse ou Visual Studio 2017.

La puissance de VS Code vient 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 incluent principalement des extraits, la mise en évidence de la syntaxe, les fonctionnalités Emmet et IntelliSense pour cette technologie spécifique.

Extensions de code VS par catégorie

Pour cet article, je vais me concentrer 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. Par souci 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 de code 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 cela ne suffise pas. 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 incluent un point-virgule final.

  • Extraits de code JavaScript (ES6) dans le style StandardJS, par James Vickery. Il s'agit essentiellement d'une fourchette de l'extension ci-dessus pour ceux qui préfèrent la 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 des 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 cadres 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 assez utiles pour certains types de projets et d'extensions de fichiers. En voici quelques-unes:

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

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

  • 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 les tabulations vs espaces ou les points-virgules vs pas de points-virgules? 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 d'une même équipe doivent utiliser le même style de codage, quelle que soit leur opinion.

Cependant, il est assez fréquent que les programmeurs oublient avec quel style de codage ils ont accepté de travailler. Pour appliquer les règles, nous devons utiliser 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 linter JavaScript intégré, vous devrez donc installer une extension.

Voici les extensions dont nous disposons:

  • ESLint, par Dirk Baeumer. Avec plus de 8 millions d'installations, il s'agit de l'extension la plus populaire qui prend 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 spécifiera 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 linting avec la bibliothèque JSHint. UNE .jshintrc le fichier de configuration est requis pour que l’extension peluche votre code.

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

  • JSLint, par Andrew Hyndman. Cette extension fournit le linting avec la bibliothèque JSLint. Vous devrez 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

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 juste à l'intérieur de l'éditeur.

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

npm IntelliSense demo

  • Path IntelliSense, par Christian Kohler. Avec 2,7 M + d'installations, cette extension complète automatiquement les noms de fichiers. Il fonctionne également dans les 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.

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

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

Modules de recherche de nœuds
Source: vscode-search-node-modules
  • Coût d'importation par Wix. Cela affiche l'espace disque utilisé par un package lorsque vous l'importez. L'extension a 562K + installations.
Démo des coûts d'importation
Source: import-cost

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 les extensions telles que Prettier et Beautify ne peuvent pas être actifs 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 prettier localement en tant que dépendance de dev.

  • Embellissez, par HookyQR. Une extension jsBeautifier qui prend en charge JavaScript, JSON, CSS et HTML. Il peut être personnalisé via un .jsbeautifyrc fichier. C'est désormais 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 var à const ou let, suppression de redondance else et fusionner la déclaration et l'initialisation. Largement inspiré de WebStorm, il a à ce jour 74k + installations.

Démonstration de JavaScript Booster
Source: vscode-javascript-booster

Extensions de navigateur

À moins que vous n'écriviez 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 VS Code et Chrome.
Débogueur pour Chrome Demo
Source: vscode-chrome-debug
  • 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 dispose de 4,6 M + d'installation à ce jour.
Démo de serveur en direct
Source: vscode-chrome-debugvscode-live-server
  • 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.

  • Serveur PHP, 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 834k + installations à ce jour.

Extensions du framework

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.

  • ES7 React / Redux / GraphQL / React-Native snippets, 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 à ce jour plus de 1,2 million d'installations.

  • 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 + installations à 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 à ce jour plus de 4,2 millions d'installations.

  • Ember, par Felix Rieseberg. Cela fournit un support de commande et IntelliSense pour Ember. Après l'installation, tous ember cli Les commandes 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.

  • Extraits de code jQuery, par Don Jayamanne. Cela fournit plus de 130 extraits de code jQuery. Il est activé par le préfixe jqet a 700k + installations à ce jour.

Tester les extensions

Les tests sont une partie critique du développement logiciel, en particulier pour les projets en phase de production. Vous pouvez obtenir une vue d'ensemble 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 VS Code populaires pour les tests.

  • Barre latérale moka, 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 dispose de 36k + installations à ce jour.

  • Extraits de code de jasmin, 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 de 18k + installations à ce jour.

  • 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.

Démo Node TDD
Source: node-tdd

Extensions impressionnantes

Je mets juste ce prochain groupe d'extensions VS Code dans la catégorie "génial", 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 a plus de 641 000 installations.

  • Coller au format JSON, par type rapide. Cela vous permet de convertir rapidement les données JSON en code JavaScript et a plus de 430 000 installations à ce jour.

Coller la démo JSON
Source: type rapide
  • 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.

Démo des métriques de code 1

Démo de métriques de code 2

Démo des métriques de code 3
Source: codemetrics

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:

  • Pack d'extension Nodejs, par Wade Anderson. Ce pack contient ESLint, npm, extraits de code JavaScript (ES6), Search node_modules, NPM IntelliSense et Path IntelliSense. Il compte plus de 293 000 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 a 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, telles que la balise de renommage automatique et la balise de fermeture automatique. Il compte plus de 156 000 installations à ce jour.

  • Pack d'extension ionique, 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.

Sommaire

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.

Ensuite, découvrez comment tirer parti de Visual Studio Code pour dynamiser votre flux de travail de développement avec notre guide de l'utilisateur avancé Visual Studio Code.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *