Les 10 meilleures extensions VS Code de 2018 pour les développeurs front-end

Visual Studio Code peut probablement être appelé le meilleur éditeur de code moderne. Si vous ne travaillez pas encore avec lui, vous devriez au moins le regarder. De nombreuses extensions ont été écrites pour VS Code, qui sont placées dans le répertoire Marketplace , dont l'accès pratique est organisé à partir de l'éditeur lui-même.

Il existe des extensions pour le débogage et la mise en forme du code, des extensions qui facilitent le travail avec diverses plates-formes (telles que Heroku, GitHub, Docker, Azure) et des technologies. Dans le Marketplace, vous pouvez trouver des thèmes pour l'éditeur, linter, des outils pour faciliter la saisie de fragments de code répétitifs, et bien plus encore.



L'auteur du matériel, dont nous publions aujourd'hui la traduction, a sélectionné les 10 meilleures extensions VS Code, destinées principalement à ceux qui sont engagés dans le développement frontal, c'est-à-dire qui fonctionnent avec HTML, CSS, JavaScript et divers cadres Web.

Informations préliminaires

Si vous n'avez jamais travaillé avec VS Code auparavant, mais que vous souhaitez essayer cet éditeur, vous pouvez le télécharger ici . Mais, s'il est intéressé, un matériau dans lequel ses capacités sont démontrées.

Après avoir téléchargé et installé VS Code, ouvrez le panneau des extensions.


Panneau d'extension

Ensuite, en utilisant le champ de recherche, trouvez l'extension qui vous intéresse, étudiez les informations à ce sujet et si vous décidez que vous en avez besoin, installez-la. Les outils de recherche d'extensions ressemblent à l'image ci-dessous.


Rechercher des extensions pour VS Code sur la place de marché

Parlons maintenant des extensions.

Serveur en direct

Extension de serveur en direct

Cette merveilleuse extension est conçue pour créer un serveur local, utilisé pendant le développement pour y héberger des pages statiques et dynamiques. Après avoir installé cette extension, le bouton Go Live apparaîtra dans la barre des tâches, ce qui vous permet de démarrer le serveur. Si vous appuyez sur ce bouton lors de la modification d'une page HTML, cette page s'ouvrira dans un navigateur. Le serveur prend en charge le rechargement de page interactif, qui est effectué après avoir apporté des modifications au code et enregistré les fichiers correspondants.

Compilateur Live Sass

Extension du compilateur Live Sass

Cette extension, de manière interactive, compile les fichiers SCSS en fichiers CSS. Cela se fait très rapidement. Vous pouvez lancer un aperçu des résultats de l'application des styles compilés dans un navigateur à l'aide du bouton Watch my sass dans la barre des tâches. Cette extension, comme nous venons de le voir, prend en charge le rechargement interactif des matériaux.

Extraits de code Javascript (ES6)

Extensions de code d'extension Javascript (ES6)

Cette extension est remarquable en ce qu'elle compte plus de 2 millions de téléchargements et, apparemment, sa popularité ne fait qu'augmenter avec le temps. Il fournit au développeur des constructions logicielles (extraits) pouvant être utilisées dans les types de fichiers suivants:

• TypeScript (.ts)
• Réaction JavaScript (.jsx)
• TypeScript React (.tsx)
• Html (.html)
• Vue (.vue)

NPM

Extension NPM

Il s'agit de l'extension officielle Node Package Manager (npm) pour VS Code. Cela facilite le travail avec le fichier package.json. En particulier, il affiche des avertissements sur les dépendances reflétées dans le fichier, mais non installées, ainsi que celles qui sont installées mais ne sont pas enregistrées dans package.json. Il aide à identifier les packages dont les versions ne respectent pas les règles spécifiées dans package.json et fournit au développeur des outils pratiques pour exécuter les commandes npm.

ESLint

Extension ESLint

Cette extension offre des capacités de linting pour les fichiers .js et .jsx. Il est configurable et permet un formatage de code uniforme. ESLint, avec ses près de 12 millions de téléchargements, peut être considérée comme l'une des extensions les plus populaires pour VS Code.

Plus joli

Extension plus jolie

Cette extension très populaire compte près de quatre millions de téléchargements. Il aide à formater le code JavaScript, ce qui permet de maintenir une base de code uniforme et améliore la lisibilité des programmes. Il existe une extension similaire sur le marché, Beautify, également très populaire.

CSS Peek

Extension CSS Peek

Cette extension utile est utile lorsque vous travaillez avec la mise en page, identifiez et dérivez, en fonction des noms de classe et des identificateurs d'élément, les styles qui leur sont appliqués. Il permet de gagner du temps en éliminant la nécessité pour le développeur de basculer constamment entre les fichiers HTML et CSS. Bien sûr, ces tâches peuvent être résolues en affichant les fichiers appropriés en mode écran partagé, mais tout le monde n'aime pas travailler dans ce style.

Angular 6 snippets

Extension angulaire de 6 extraits

Il s'agit de l'extension officielle qui offre aux développeurs des extraits de code pour Angular 6. Le code correspondant suit le guide de style Angular; l'utilisation de cette extension accélère le processus de développement des projets Angular, en particulier, en raison de l'achèvement du code. Il prend en charge TypeScript, la syntaxe du service worker, RxJS, ngRx et même le matériau angulaire. Si vous développez des applications angulaires dans VS Code et que vous n'utilisez pas encore cette extension, vous devriez certainement y jeter un œil.

Vetur

Extension Vetur

Il s'agit de l'extension officielle Vue.js pour VS Code avec un nombre impressionnant de téléchargements, dont elle compte plus de 5 millions. Il est destiné à faciliter le développement des applications Vue.js. Vetur peut vérifier le code pour les erreurs, prend en charge l'auto-complétion et les extraits.

Débogueur pour Chrome

Débogueur pour l'extension Chrome

Il s'agit de l'extension officielle de VS Code, conçue pour déboguer le code JS à l'aide de Google Chrome. C'est actuellement l'une des extensions VS Code les plus utilisées.

Résumé

Nous n'avons examiné qu'une douzaine d'extensions pour VS Code, mais en fait il y en a beaucoup. Il est fort possible qu'en explorant le catalogue Marketplace, vous y trouviez quelque chose qui vous semble beaucoup plus utile que les extensions qui ont été discutées. Cependant, la plupart d'entre eux peuvent être d'une grande aide pour tout développeur frontal. Nous espérons qu'ils vous seront utiles également.

Si vous êtes intéressé par le sujet des extensions pour VS Code - voici un autre de nos documents à leur sujet, axé sur les développeurs JS. En publiant ce matériel, nous avons posé aux lecteurs une question sur les extensions qu'ils utilisent. Ensuite, il s'est avéré qu'il s'agit de Code Outline, Todo Tree et GitHub. Aujourd'hui, chers lecteurs, nous voulons vous poser la même question. Quelles extensions pour VS Code aimez-vous?