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

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

Visual Studio Code est sans aucun doute l'éditeur de code léger le plus populaire aujourd'hui. Il emprunte beaucoup d'autres éditeurs de code populaires, principalement Sublime Text et Atom. Cependant, son succès vient principalement de sa capacité à fournir de meilleures performances et une meilleure stabilité. En outre, il fournit également des fonctionnalités très demandées comme IntelliSense, qui n'étaient disponibles que dans les IDE de taille normale 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, les frameworks et les technologies de développement. La prise en charge d'une bibliothèque ou d'un framework se présente de différentes manières, notamment des extraits, la mise en évidence de la syntaxe, Emmet et des fonctionnalités IntelliSense pour cette technologie spécifique

Extensions de code VS par catégorie

mettra l'accent sur les extensions VS Code ciblant spécifiquement les développeurs JavaScript. Actuellement, il existe de nombreuses extensions VS Code qui correspondent à ce critère, ce qui signifie bien sûr que je ne pourrai pas tous 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

Snippet Extensions

Lorsque vous installez VS Code pour la première fois, il contient plusieurs extraits pour JavaScript et Typescript. Avant de commencer à écrire du code JavaScript moderne, vous avez besoin de quelques extraits supplémentaires pour vous aider à écrire rapidement le code ES6 / ES7 répétitif:

• extraits code JavaScript (ES6) : actuellement le plus populaire, avec plus de 1,2 million d'installations rendez-vous amoureux. Cette extension fournit la syntaxe ES6 pour les extensions JavaScript, TypeScript, HTML, React et Vue

• JavaScript Snippet Pack : une collection d'extraits utiles pour JavaScript

• Atom JavaScript Snippet : extraits JavaScript extraits de extension atom / language-javascript.

• JavaScript Snippets : une collection de fragments de code ES6. Cette extension contient des snippets pour Mocha, Jasmine et d'autres frameworks de test BDD

Extensions de syntaxe

VS Code est livré avec une syntaxe assez bonne pour le code JavaScript. Vous pouvez changer les couleurs en installant des thèmes. Cependant, vous avez besoin d'une extension de syntaxe de surligneur si vous voulez un certain niveau de lisibilité. En voici quelques uns:

• JavaScript Atom Grammar : cette extension remplace la grammaire JavaScript dans Visual Studio Code par la grammaire JavaScript de l'éditeur Atom.

• Babel JavaScript : mise en surbrillance de syntaxe pour JavaScript ES201x , React, FlowType et le code GraphQL.

• DotENV : coloration syntaxique pour les fichiers .env . Pratique si vous travaillez avec Node.

Linter Extensions

Ecrire du code JavaScript efficacement avec un minimum d'agitation nécessite un linter qui applique un style standard spécifique pour tous les membres de l'équipe. ESLint est le plus populaire, car il prend en charge de nombreux styles, y compris Standard, Google et Airbnb. Voici les plugins linter les plus populaires pour Visual Studio Code:

• ESLint : cette extension intègre ESLint dans VS Code. C'est l'extension linter la plus populaire, avec plus de 6,7 millions d'installations à ce jour. Les règles sont configurées dans .eslintrc.json .

• JSHint : une extension de vérificateur de code pour JSHint . Utilise le fichier .jshintrc à la racine de votre projet pour la configuration.

• JavaScript Standard Style : un linter avec une configuration nulle et des règles rigides. Applique les Règles StandardJS .

• JSLint : extension linter pour JSLint .

Si vous souhaitez avoir un aperçu des linters disponibles et de leurs avantages et inconvénients, vérifiez notre comparaison des outils de lissage JavaScript .

Extensions de noeud

Chaque projet JavaScript nécessite au moins un paquet Node, à moins que vous ne soyez quelqu'un qui aime faire les choses à la dure. Voici quelques extensions VS Code qui vous aideront à travailler plus facilement avec les modules Node.

• npm : utilise package.json pour valider les paquets installés. Vérifie que les packages installés ont les numéros de version corrects, met en évidence les packages installés manquants dans package.json et les packages qui n'ont pas été installés.

• Modules Node.js IntelliSense : saisie semi-automatique pour JavaScript
  
  Source: vscode-noeud-module-intellisense

• Chemin IntelliSense : ce n'est pas vraiment lié au noeud, mais vous avez vraiment besoin d'IntelliSense pour le local

• Node exec : permet d'exécuter le fichier en cours ou le code sélectionné avec Node.js.

• Voir le paquet de nœuds : afficher rapidement une source de paquet de nœuds avec cette extension, qui vous permet d'ouvrir un référentiel / documentation de paquet Node directement à partir de VS Code

• Readme de noeud : ouvrir rapidement la documentation du paquet npm

• Search node_modules : cette extension vous permet pour rechercher le dossier node_modules qui est généralement exclu de la recherche standard
  
  Source: vscode-search-node-modules

• Coût d'importation : affiche la taille d'un paquet importé
  
  Source: import-cost

Extensions de formatage

De temps en temps, vous trouvez un code de formatage qui n'a pas été écrit style. Pour gagner du temps, vous pouvez installer l'une de ces extensions VS Code pour formater et refactoriser rapidement le code existant:

• Beautify : une extension jsBeautifier qui supporte JavaScript, JSON, CSS et HTML. Peut être personnalisé via le fichier .jsbeautifyrc . Formateur le plus populaire avec 2,3 millions d'installations à ce jour.

• Prettier Code Formatter : extension qui supporte le formatage de JavaScript, TypeScript et CSS en utilisant Prettier (un formateur de code opiniâtre). JS Refactor : fournit un certain nombre d'utilitaires et d'actions pour refactoriser le code JavaScript, comme l'extraction de variables / méthodes, la conversion de code existant pour utiliser des fonctions fléchées ou des littéraux de gabarit, et des fonctions d'exportation

• JavaScript Booster : un outil de refactorisation de code incroyable. Comprend plusieurs actions de codage telles que la conversion var en const ou let la suppression des instructions redondantes else et la fusion de la déclaration et de l'initialisation. Largement inspiré par WebStorm .
  
  Source: vscode-javascript-booster

Extensions du navigateur

Sauf si vous écrivez un programme console en JavaScript, vous Il est fort probable que vous exécutiez votre code JavaScript dans un navigateur. Cela signifie que vous aurez besoin d'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:

Framework Extensions

Pour la plupart des projets, vous aurez besoin d'un framework approprié pour structurer votre code. 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 une extension complète. Voici quelques-unes des extensions VS Code qui offrent des fonctionnalités significatives:

• Angular 6 : extraits pour Angular 6. Prend en charge le typage, HTML, matériel angulaire ngRx, RxJS et mise en page Flex. A 2,2+ millions d'installations et 172 extraits angulaires à ce jour

• Snippets Angular v5 : fournit des extraits angulaires pour les fichiers TypeScript, RxJS, HTML et Docker.

• Réagir les extraits Native / React / Redux pour es6 / es7 : fournit des extraits de syntaxe ES6 / ES7 pour tous ces frameworks.

• React Native Tools : fournit IntelliSense, les commandes et les fonctionnalités de débogage pour le framework React Native

• Vetur : fournit la coloration syntaxique, les snippets, Emmet, linting, le formatage, IntelliSense et le support du débogage pour le framework Vue. Il est livré avec la documentation appropriée publiée le GitBook

• Ember : fournit un support de commande et IntelliSense pour Ember. Après l'installation, toutes les commandes ember cli sont disponibles via la liste de commandes du code

• Cordova Tools : support des plugins Cordova et du framework ionique. Fournit IntelliSense, le débogage et d'autres fonctions de prise en charge pour les projets basés sur Cordova

• Extraits de code jQuery : fournit plus de 130 fragments de code jQuery. Activé par le préfixe jq .

Extensions de test

Le test est un élément essentiel 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 – Test JavaScript: Tests unitaires vs tests fonctionnels vs tests d'intégration . Voici quelques extensions de code VS populaires pour les tests:

• Mocha sidebar : fournit un support pour tester en utilisant la bibliothèque Mocha. Cette extension vous aide à exécuter des tests directement sur le code et affiche des erreurs en tant que décorateurs.

• ES6 Mocha Snippets : extraits de moka dans la syntaxe ES6. L'objectif de cette extension est de garder le code au sec, en tirant parti des fonctions de flèches et en omettant les curlies dans la mesure du possible. Peut être configuré pour autoriser les points-virgules.

• Extraits de code de jasmin : extraits de code pour l'infrastructure de test de Jasmine.

• Extraits de protractor : extraits de tests de bout en bout pour le framework Protractor. Prend en charge JavaScript et Typescript.

• Node TDD : fournit un support pour le développement piloté par les tests pour les projets Node et JavaScript. Peut déclencher une construction de test automatique chaque fois que les sources sont mises à jour
  
  Source: node-tdd

Extensions géniales

Je mets juste le prochain groupe d'extensions VS Code dans le "Awesome" catégorie, parce que cela les décrit le mieux!

Extension Packs

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 extensions packs . Essentiellement, ce sont des collections d'extensions VS Code associées regroupées en un seul paquet pour une installation facile. Voici quelques-uns des meilleurs:

• Nodejs Extension Pack : ce pack contient des extraits ESLint, npm, JavaScript (ES6), des modules node_modules, NPM IntelliSense et Path IntelliSense.

• VS Code for Node.js – Development Pack : celui-ci a NPM IntelliSense, ESLint, Débogueur pour Chrome, Code Metrics, Docker et Import Coût

• Vue.js Extension Pack : 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 auto-renommer-tag et auto-close-tag . : ce pack contient un certain nombre d'extensions VS Code pour le développement Ionic, Angular, RxJS, Cordova et HTML

Résumé

Le très 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 de manière efficace. Les extensions telles que ESLint vous aident à éviter les erreurs courantes, tandis que d'autres telles que Debugger for Chrome vous aident à déboguer votre code plus facilement. Les extensions Node.js avec leurs fonctionnalités IntelliSense vous aident à importer les modules correctement, et la disponibilité d'outils tels que Live Server et le client REST réduit votre dépendance aux outils externes pour compléter votre travail. Tous ces outils rendent votre processus d'itération beaucoup plus facile.

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

J'écris du code propre, lisible et modulaire. J'aime apprendre de nouvelles technologies qui améliorent l'efficacité et la productivité de mon flux de travail.