Les 9 plugins VS Code qui vous feront gagner du temps

Voici une liste de plusieurs extensions pour Visual Studio Code pour améliorer votre expérience de développement, votre productivité et la qualité de votre code !

À noter : toutes ces extensions sont installées sur mon VS Code et je m'en sers régulièrement !

Productivité

GitHub Copilot (Autocomplétion / Payant)

Sans doute l'extension la plus connue de cette liste, Copilot est une extension de complétion (et plus précisemment de génération) de code, basé sur de l'intelligence artificielle entrainée sur les dépôts de code open-source présents sur GitHub.

En plus de l'extension, il vous faudra un abonnement d'environs 10$ par mois pour l'utiliser (avec un essai gratuit de 30 jours)

Lien : https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

ErrorLens (Affichage des erreurs)

Voir un mot souligné en rouge, passer sa souris dessus, attendre que l'erreur s'affiche, etc... Ça ne parait pas horrible, mais multiplié par des dizaines d'erreurs tous les jours, c'est une perte de productivité énorme.

ErrorLens vous permet d'afficher automatiquement une erreur à la suite du code qui pose problème, pour améliorer votre productivité !

Lien : https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

Code Spell Checker (Correction orthographique)

Les correcteurs orthographiques sont présent dans tous les éditeurs classiques (Word, Google Doc, etc...) mais pas dans l'éditeur dans lequel nous passons le plus de temps...

Et bien maintenant c'est le cas !

Lien : https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

À noter que vous aurez besoin d'une extension supplémentaire pour le Français

Peacock (Multi-fenêtres)

Si vous avez l'habitude d'avoir plusieurs fenêtres VS Code ouvertes en même temps (notamment si vous faites du front et du back), il est parfois facile de se tromper de fenêtre.

Peacock vous permet d'assigner une couleur spécifique à chaque éditeur pour mieux se repérer !

Lien : https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

SVG (Prévisualisation)

Un outil pour prévisualiser les fichiers SVG directement dans VS Code, avec plusieurs options pour la couleur de fond. Très pratique !

Lien : https://marketplace.visualstudio.com/items?itemName=jock.svg

Markdown Preview GitHub Styling (Prévisualisation)

Prévisualiser des fichiers .md c'est bien, mais si en plus on peut avoir le rendu exact d'un fichier README comme il apparaitra sur GitHub, c'est mieux, et c'est ce que fait cette extension.

Lien : https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles

Accessibilité

WebHint (Linter pour le web)

Un linter notamment basé sur les recommandations de Mozilla en ce qui concerne l'accessibilité web. Vous ne raterez plus jamais un attribut alt manquant sur une image !

À noter que ce plugin ne fonctionne pour l'instant pas avec les fichiers VueJS (.vue).

Lien : https://marketplace.visualstudio.com/items?itemName=webhint.vscode-webhint

TiffColors (Thème pour daltoniens)

Si comme moi, vous êtes daltonien (spécifiquement Deuteranope), et que la coloration syntaxique n'est pas toujours optimale, ce thème VS Code devrait régler le problème !

Lien : https://marketplace.visualstudio.com/items?itemName=tiffnix.tiffcolors

Langages et frameworks

Tailwind CSS IntelliSense (Autocomplétion)

Les plugins Intellisense sont vraiment un must-have pour n'importe quel langage, mais également pour TailwindCSS !

Lien : https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Volar (Autocomplétion/Parsing/VueJS)

Volar est LE plugin recommandé pour travailler avec VueJS (et Nuxt) !

Attention néanmoins, si vous êtes encore sur Vue2, vous aurez besoin d'une configuration spéciale (dispo dans la doc du plugin).

Lien : https://marketplace.visualstudio.com/items?itemName=Vue.volar

À essayer

Quokka.js

Quokka permet d'écrire du JavaScript, et de visualiser le résultat de l'exécution du code directement depuis l'éditeur, sans avoir rien à faire d'autre.

Si vous débutez en JavaScript, cela peut vous aider, mais vous pourrez faire sans si vous avez déjà les bases.

Lien : https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode