8 puissantes extensions de code Visual Studio pour les développeurs front-end

Bien que Microsoft ait publié la première version stable de Visual Studio Code, son puissant éditeur de code, il y a seulement quelques mois, en mars 2016, il dispose déjà de nombreuses extensions disponibles qui peuvent porter l'expérience de codage à un niveau supérieur. le extensions officielles de Visual Studio Code sont hébergés dans Visual Studio Code Marketplace, dont beaucoup peuvent être d'une grande aide pour les développeurs Web.

Pour cet article, j'ai testé plusieurs extensions de VS Code liées au développement front-end et dressé la liste de celles que j'ai trouvées les plus utiles. intuitif, facile à utiliser et pratique. Ce n'est pas une liste ultime de tous. Prenez le temps de parcourir le marché pour vous-même et voyez ce qu'il peut vous offrir d'autre, d'autant plus que de nombreuses extensions géniales restent à venir..

Comment installer les extensions de code VS

L’installation d’une extension est assez simple dans Visual Studio Code, car vous pouvez faites-le dans l'éditeur de code. Dans le code VS Marketplace, chaque extension a sa propre page, et vous pouvez trouver la commande avec laquelle vous pouvez installer l'extension donnée en haut de cette page.

La commande commence toujours par le poste installé terme. Pour installer une extension, il suffit de presse CTRL + P à l'intérieur de VS Code pour démarrer le panneau Quick Open, copier-coller cette commande et finalement redémarrer l'éditeur de code faire fonctionner la nouvelle extension.

8 puissantes extensions de code Visual Studio

Extraits HTML

Si vous souhaitez écrire fréquemment du code HTML dans Visual Studio Code, l’extension HTML Snippets peut être un outil pratique. ajoute un support élaboré pour HTML. Bien que VS Code prenne en charge HTML de base, tel que coloration syntaxique, l'extension HTML Snippets en sait beaucoup plus.

Probablement la caractéristique la plus utile de cette extension est que quand vous commencez à taper le nom d'une balise HTML (sans l’angle de départ), les extraits HTML rapidement affiche une liste des options disponibles avec une brève information sur chaque.

Lorsque vous cliquez sur l'élément dont vous avez besoin, HTML Snippets ajoute la balise HTML5 complète avec ses propriétés les plus courantes. Par exemple, si vous souhaitez ajouter un lien (balise d'ancrage) à votre document, tapez simplement un une dans VS Code, choisissez la bonne option dans la boîte de dialogue contextuelle, et les extraits de code HTML inséreront les informations nécessaires. snippet dans votre éditeur sans tracas.

L'auteur de cette extension veille également à supprimer les éléments obsolètes. Par conséquent, si vous souhaitez utiliser une balise HTML que vous ne pouvez pas trouver dans la liste contextuelle, il est utile de vérifier si elle est toujours valide ou non..
HTML CSS Classe Completion

HTML CSS Class Completion peut être une extension utile si vous devez utiliser plusieurs Classes CSS dans votre projet. Il nous arrive souvent, développeurs, que nous soyons pas tout à fait sûr du nom exact d'une classe, mais il reste au fond de notre esprit en tant que connaissance passive.

Cette extension intelligente donne une solution à ce problème, car elle récupère les noms de toutes les classes CSS dans l'espace de travail actuel et affiche une liste à leur sujet.

Supposons que vous souhaitiez créer un site à l'aide de Zurb Foundation et utiliser la petite grille. Vous ne vous souvenez pas comment les classes sont nommées exactement, mais vous savez qu'elles ont des noms sémantiques.

Avec HTML CSS Class Completion, il suffit de commencer à taper le mot petit, et les options disponibles apparaissent sur votre écran en même temps, de sorte que vous pouvez facilement sélectionner celle dont vous avez besoin.
Voir dans le navigateur

View in Browser est une extension simple mais puissante pour Visual Studio Code. Il peut faciliter le développement frontal en vous permettant de regardez rapidement le résultat de votre travail dans le navigateur lors du codage. Vous pouvez ouvrir votre fichier HTML dans votre navigateur par défaut directement depuis VS Code en appuyant sur le bouton CTRL + F1 raccourci clavier.

Notez que Voir dans le navigateur ne supporte que le HTML, donc, si vous voulez voir votre site, vous devez ouvrir le fichier HTML. Vous ne peut pas accéder directement au navigateur à partir d'un fichier CSS ou JavaScript.
Débogueur pour Chrome

Le débogueur pour Chrome a été créé par Microsoft et constitue actuellement la 4ème extension de code Visual Studio la plus téléchargée..

Le débogueur pour Chrome permet de déboguer JavaScript dans Google Chrome sans quitter l'éditeur de code. Cela signifie que vous n'avez pas besoin de travailler avec le JavaScript transpilé que le navigateur voit, mais vous pouvez effectuer le débogage directement à partir des fichiers source d'origine. Voir cette démo pour voir comment ça marche.

L’extension a toutes les fonctionnalités nécessaires à un débogueur décent, telles que réglage du point d'arrêt, surveillance variable, pas à pas, une console de débogage pratique, et beaucoup d'autres (voir la liste des fonctionnalités de la première version).

Pour utiliser cette extension, vous devez démarrer Chrome avec débogage à distance activé, et mettre en place un bon launch.json fichier. Ce dernier peut prendre un moment, mais vous pouvez trouver des instructions détaillées sur GitHub pour savoir comment le faire correctement..
JSHint

L’extension JSHint de Visual Studio Code intègre le populaire linter JSHint JavaScript directement dans l’éditeur de code. Vous pouvez donc être informé de vos erreurs dès que vous les commettez. Par défaut, l’extension JSHint utilise les options par défaut du linter que vous pouvez personnaliser à l’aide d’un fichier de configuration..

L'utilisation de cette extension est assez simple, car JSHint marque les erreurs en rouge et les notifications en soulignement vert. Si vous souhaitez plus d'informations sur les problèmes, survolez les parties soulignées, et JSHint affichera immédiatement une étiquette avec la description du problème..
Extraits de code jQuery

Les extraits de code jQuery peuvent considérablement accélérer le développement front-end dans Visual Studio Code, car ils vous permettent d'écrire rapidement jQuery sans erreurs de syntaxe élémentaires.. Extraits de code jQuery a actuellement autour 130 extraits disponibles vous pouvez invoquer en tapant le bon déclencheur.

Tous les extraits jQuery sauf un commencent par le jq préfixe. La seule exception est le func déclencher que insère une fonction anonyme dans l'éditeur.

Cette extension pratique est une aide pratique lorsque vous n’êtes pas complètement sûr de la syntaxe à utiliser et que vous souhaitez gagner du temps pour consulter la documentation. Cela facilite également le défilement rapide des options disponibles..
Tonnelle

L'extension Bower VS Code peut rendre votre flux de travail de développement Web plus intuitif en intégrant le gestionnaire de packages Bower à Visual Studio Code..

Si vous utilisez cette extension, vous ne pas avoir à basculer entre le terminal et l'éditeur, mais vous pouvez facilement effectuer vos tâches de gestion de paquets directement dans Visual Studio Code.

L’extension Bower vous guide dans la création de votre projet bower.json fichier, et vous pouvez également installer, désinstaller, rechercher, mettre à jour des packages, gérer le cache et effectuer de nombreuses autres tâches (voir la liste complète des fonctionnalités).

Vous pouvez accédez aux commandes liées à Bower en démarrant la palette de commandes en appuyant F1, dactylographie “Tonnelle” dans la barre de saisie, en cliquant sur le bouton “Tonnelle” Option dans la liste déroulante qui apparaît et sélection de la commande Bower appropriée.
Histoire Git

Git History permet de suivez les modifications d'un projet Git dans Visual Studio Code. Cette extension est particulièrement utile lorsque vous souhaitez contribuer à un plus grand projet Github, et besoin d'un moyen de vérifier rapidement les modifications apportées par d'autres développeurs.

Avec l'extension Git History installée, vous pouvez voir l'historique d'un fichier entier, ou un ligne particulière à l'intérieur de celui-ci. Vous pouvez également comparer les versions précédentes du même fichier.

Vous pouvez accéder aux commandes liées à l'historique Git si vous tapez le mot “Git” dans la palette de commande (F1), choisissez “Git” dans la liste déroulante, puis sélectionnez la commande dont vous avez besoin. Notez que vous devez ouvrir le fichier dont vous voulez voir l'historique avant de pouvoir effectuer des actions dessus.