Les 9 plugins VS Code qui vous feront gagner du temps

Une liste d'extensions utiles, triées par catégories : productivité, accessibilité, frameworks,...

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)

GitHub Copilot - Visual Studio Marketplace
Extension for Visual Studio Code - Your AI pair programmer
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é !

Error Lens - Visual Studio Marketplace
Extension for Visual Studio Code - Improve highlighting of errors, warnings and other language diagnostics.
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 !

Code Spell Checker - Visual Studio Marketplace
Extension for Visual Studio Code - Spelling checker for source code
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 !

Peacock - Visual Studio Marketplace
Extension for Visual Studio Code - Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.
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 !

SVG - Visual Studio Marketplace
Extension for Visual Studio Code - SVG Coding, Minify, Pretty, Preview All-In-One
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.

Markdown Preview Github Styling - Visual Studio Marketplace
Extension for Visual Studio Code - Changes VS Code’s built-in markdown preview to match Github’s style
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).

webhint - Visual Studio Marketplace
Extension for Visual Studio Code - Run webhint in Visual Studio Code.
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 !

TiffColors - Visual Studio Marketplace
Extension for Visual Studio Code - A color theme for people with Deuteranopia (red-green colorblind), inspired by SynthWave ’84.
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 !

Tailwind CSS IntelliSense - Visual Studio Marketplace
Extension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Code
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).

Vue Language Features (Volar) - Visual Studio Marketplace
Extension for Visual Studio Code - Language support for Vue 3
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.

Quokka.js - Visual Studio Marketplace
Extension for Visual Studio Code - JavaScript and TypeScript playground in your editor.
Lien : https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
J'espère que cet article vous aura été utile, et à bientôt sur le blog !

Les articles les plus populaires du blog

Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !

Voir la sélection 🚀

Recevez les articles de la semaine par e-mail pour ne rien manquer !

S'abonner à la newsletter 📧
Mes formations disponibles 🎓  -5% inclus pour les lecteurs du blog

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi formateur/coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo de Techivation sur Unsplash