16 meilleures extensions de code VS pour les développeurs Web

Microsoft Visual Studio Code (VS Code) est l'un des meilleurs éditeurs de code pour les développeurs de logiciels. Depuis sa sortie, sa popularité a augmenté non seulement en raison de la plate-forme stable qu'elle fournit, mais également en raison de la nature extensible que Microsoft y a intégrée. Le marché des extensions est une corne d'abondance de modules complémentaires et de fonctionnalités qui permet aux développeurs de personnaliser VS Code dans l'environnement de développement de leurs rêves. Nous voulons décomposer certaines des meilleures extensions VS Code disponibles aujourd'hui afin que vous n'en manquiez aucune.

1. Sublime Text Keymap et importateur de paramètres

En tête de notre liste se trouve le bien intitulé Sublime Text Keymap and Settings Importer. Au cas où le titre ne serait pas assez descriptif, cette extension vous permet d'extraire vos keymaps et paramètres Sublime Text existants afin que vous puissiez passer en toute transparence à l'utilisation de VS Code par défaut. Étant donné que tant de gens aiment Sublime et y ont passé des années, faire en sorte que VS Code conserve la mémoire musculaire gagnée de cet éditeur a beaucoup de sens.

2. Extraits de code JavaScript (ES6)

Taper du JavaScript (ou n'importe quel code) peut devenir fastidieux lorsque vous répétez les mêmes extraits encore et encore. Cette extension aide à soulager cela en vous permettant d'écrire des raccourcis pour les extraits de code souvent utilisés. Lorsqu'il est déclenché, l'extrait remplace simplement le texte et s'insère directement dans le document.

3. Coloriseur de paires de supports 2

Quelle que soit la langue que vous codez, les crochets en seront probablement une partie importante. Et les garder droits peut être un casse-tête. Mais avec cette extension VS Code, vous pouvez coder en couleur les paires correspondantes pour aider à atténuer ce problème et travailler sur le fonctionnement du code lui-même - pas l'éditeur.

4. ESLint

À bien des égards, ESLint est le linter pour JavaScript. Il est essentiel de détecter les erreurs et de vous donner des commentaires et des avertissements immédiats pour garder le code de votre équipe propre, et il n'y a vraiment pas de meilleur moyen de le faire en JS qu'ESLint. Nous vous recommandons fortement d'installer celui-ci dès que possible.

5. Chef de projet

Un problème avec VS Code qui se pose assez souvent est de savoir comment basculer entre différents projets. Par défaut, le flux n'est pas exactement le plus intuitif. Ainsi, Project Manager s'efforce de résoudre ce problème en vous proposant un menu dans la barre latérale que vous pouvez utiliser pour enregistrer différents dossiers et projets Git pour passer facilement de l'un à l'autre. Il ne s'agit pas tant d'une amélioration de l'éditeur que d'une amélioration de la qualité de vie.

6. Aperçu du navigateur

L'un des éléments les plus désagréables du développement Web est le chargement et l'actualisation de votre contenu dans différents navigateurs à des fins de test. L'aperçu du navigateur aide à limiter le montant dont vous avez besoin pour le faire en vous donnant un aperçu solide de votre travail dans VS Code lui-même dans un nouveau processus Chrome.

7. Plus joli

Nous voulons tous un code plus joli. Nous devrions donc probablement tous installer Prettier pour gérer cela pour nous. La description décrit Prettier comme un "formateur de code avisé, il applique un style cohérent en analysant votre code et en le réimprimant avec ses propres règles qui prennent en compte la longueur de ligne maximale, en enveloppant le code si nécessaire". Vous ne voudrez peut-être pas l'utiliser pour chaque langue ou projet, il existe donc de nombreux paramètres de configuration pour que vous puissiez le personnaliser à votre guise.

8. gitlink

Nous aimons gitlink pour sa simplicité. Bien qu'il existe de nombreuses extensions Git, l'une des choses à propos de gitlink est qu'il est simple et ne fait qu'une seule chose. Et ça le fait bien. Mettez simplement en surbrillance un extrait de code et gitlink vous dirigera ensuite vers le référentiel en ligne pour cet extrait particulier. Il est incroyablement utile d' accéder rapidement à votre référentiel, peu importe où il est hébergé à distance.

9. De meilleurs commentaires

Commenter votre code est l'une des habitudes les plus importantes qu'un développeur puisse avoir. Même plus que cela, en commentant votre code est bien une compétence qui doit être enseigné dans toutes les classes de sciences informatiques et le codage bootcamp là - bas. Cela dit, Better Comments est l'une de ces extensions de code VS dont tout le monde a besoin car elle vous permettra, si vous en croyez le nom, de laisser de meilleurs commentaires dans votre code. Avec des raccourcis qui vous permettent de différencier les questions, les exclamations, le code commenté, les requêtes, les alertes, les faits saillants et les TODO, cette extension ne vous facilitera pas seulement la vie, elle facilitera la vie de votre équipe. Et tout développeur qui vient après vous sur le projet. Nous ne pouvons pas le recommander assez.

10. Icônes de code VS

Une partie importante de la personnalisation de VS Code avec des extensions est la personnalisation réelle. Pas seulement les changements de fonctionnalité. Avec VS Code Icons, l'éditeur devient un peu plus coloré et plus facile à naviguer. Le système de fichiers est recouvert d'icônes représentant différents types de fichiers, et celles-ci apparaissent dans l'explorateur ainsi que dans les onglets de document eux-mêmes. Cela vous permet de vous frayer un chemin à travers des systèmes de fichiers complexes beaucoup plus facilement et moins de maux de tête. Littéralement parfois. Les icônes étant si faciles à lire évitent la fatigue oculaire et donc les maux de tête. Alors pour votre santé, installez VS Code Icons.

11. Balise de fermeture automatique

C'est peut-être nous, mais taper les balises de fermeture pour n'importe quelle langue devient une corvée. Il y a juste quelque chose à ajouter à la fin qui fait que les frappes se sentent un peu décalées. Jamais peur. La balise de fermeture automatique nous a facilité la vie. Nous voulons donc vous faciliter la tâche. C'est simple et facile et vous pouvez continuer à taper entre eux et simplement taper votre chemin vers la ligne suivante ou jusqu'à la fin de celle-ci. Installez ceci et donnez à vos doigts une pause dans la gymnastique de la fermeture manuelle des balises.

12. coloriser

CSS est génial. Le choix des couleurs en CSS ne l'est pas. Lorsque vous avez affaire à des codes hexadécimaux et à des valeurs RGBA, il est parfois difficile de se faire une idée mentale de la palette que vous avez définie pour un site. Cette extension permet d'atténuer cela en fournissant une note visuelle pour tous les codes de couleur que vous utilisez dans vos fichiers. Vous pouvez voir les couleurs que vous utilisez à l'intérieur du texte lui-même comme surbrillance afin que vous n'ayez pas à passer constamment d'un échantillon à l'autre et des sélecteurs de couleurs, etc.

13. Polacode

Polacode est comme un appareil photo Polaroid pour votre éditeur de code. Conçu pour rendre la capture de votre code plus propre et plus facile, c'est un must pour tous les rédacteurs de tutoriels qui veulent que leur code soit juste.

14. GitLens

Il est difficile d'expliquer pleinement ce qui rend GitLens si génial. Cela fonctionne comme si Git et VS Code avaient été conçus en pensant l'un à l'autre, et au lieu de travailler à travers des hiérarchies de ligne de commande, vous obtenez des visualisations et des informations qui éliminent une grande partie de la confusion du travail d'équipe Git. Vous pouvez afficher les éléments en survolant, voir les modifications et annotations récentes, les vues de comparaison dans VS Code lui-même, les cartes thermiques, l'historique des lignes et bien plus encore. C'est fondamentalement l'extension Git parfaite, et nous pensons que vous devriez l'installer immédiatement.

15. Serveur en direct

Avez-vous déjà voulu lancer un serveur de développement local depuis votre IDE et travailler dessus en temps réel ? Peu importe comment vous avez répondu à cette question, vous voudrez essayer Live Server. Parce que c'est précisément ce que vous pouvez faire avec. Bien que cela ne supprime peut-être pas complètement le besoin de produits comme Local by Flywheel et MAMP, cela réduit certainement leur nécessité dans de nombreuses situations.

16. Embellissez

Beautify utilise le populaire js-beautify pour garder votre JavaScript beau et bien rangé. Ne vous inquiétez pas des lignes brisées et des espacements et retraits étranges. Cliquez simplement sur un bouton et tout votre code sera prêt pour son gros plan (peut-être avec Polacode d'en haut).

Conclusion

Cette liste peut contenir des milliers d'articles. En fait, certains d'entre vous ont probablement installé des centaines d'extensions différentes que vous activez et désactivez à différents moments. Mais nous pensons que ce sont les extensions VS Code que vous pouvez installer, puis apprendre ce que vous voulez d'autre en approfondissant le marché.

Quelles sont vos extensions de code VS ? Faites le nous savoir dans les commentaires!

Article présenté en image par SVIATLANA SHEINA / shutterstock.com