Aller au contenu

Extensions VS Code

Objectif : configurer VS Code pour travailler avec Vue et Tailwind, en 5 minutes chrono.

Tu viens d'ouvrir ton projet avec code .. Avant d'écrire la moindre ligne, on installe quatre extensions. Sans elles, VS Code ne comprend pas les fichiers .vue et ne t'aide pas du tout sur Tailwind. Avec elles, l'éditeur devient un vrai copilote : il complète, il corrige, il prévient.

Installer une extension

Toujours le même geste :

  1. Ouvre l'onglet Extensions : Ctrl+Shift+X (Windows) ou Cmd+Shift+X (Mac).
  2. Tape l'identifiant de l'extension dans la barre de recherche (c'est plus fiable que le nom : il n'y a qu'un seul résultat).
  3. Clique sur Install.

Astuce

Un identifiant s'écrit éditeur.nom-du-paquet, par exemple Vue.volar. Copie-le tel quel dans la recherche.

1. Vue - Official — obligatoire

Identifiant : Vue.volar · Voir sur le Marketplace

C'est l'extension officielle de l'équipe Vue. Elle apprend à VS Code à lire les fichiers .vue : coloration du <template>, du <script> et du <style> dans un même fichier, autocomplétion de tes composants et de leurs props, erreurs soulignées pendant que tu tapes.

Sans elle, un fichier .vue s'affiche en texte gris, sans aide ni détection d'erreur. Elle est donc obligatoire pour ce cours.

Attention

Si tu as déjà installé Vetur (l'ancienne extension Vue, aujourd'hui abandonnée), désinstalle-la : les deux se marchent dessus et tu récoltes des erreurs fantômes. Cherche octref.vetur dans l'onglet Extensions, puis Uninstall.

2. Tailwind CSS IntelliSense — obligatoire

Identifiant : bradlc.vscode-tailwindcss · Voir sur le Marketplace

C'est l'extension qui rend Tailwind apprenable. Tailwind, ce sont des centaines de petites classes ; personne ne les retient par cœur, et personne n'est censé les retenir. L'extension te les propose au fur et à mesure.

Concrètement, dans un class="..." :

  • Autocomplétion : tu tapes bg- et la liste complète des couleurs s'affiche, avec un carré de couleur à côté de chaque nom. Tu apprends Tailwind en le lisant.
  • Aperçu des couleurs : text-slate-700 affiche sa pastille directement dans le code.
  • Survol : passe la souris sur p-4 et tu vois le CSS généré (padding: 1rem;). C'est le moyen le plus rapide de comprendre ce que fait une classe.
  • Classes inconnues : si tu écris bg-blue-1000 (qui n'existe pas), l'extension ne te propose rien — un signal immédiat que tu t'es trompé.

Note

L'extension ne s'active que dans un projet où Tailwind est installé. Tant que tu n'as pas fait l'installation (voir le chapitre consacré à Tailwind), l'autocomplétion reste muette : c'est normal, ce n'est pas un bug.

3. ESLint — recommandé

Identifiant : dbaeumer.vscode-eslint · Voir sur le Marketplace

ESLint relit ton code et souligne les erreurs de logique et les maladresses : variable déclarée jamais utilisée, composant importé mais absent du template, = écrit à la place de ==. Le projet généré par npm create vue@latest contient déjà sa configuration ; l'extension ne fait que l'afficher dans l'éditeur.

4. Prettier — recommandé

Identifiant : esbenp.prettier-vscode · Voir sur le Marketplace

Prettier remet ton code en forme : indentation, guillemets, retours à la ligne. Tu ne discutes plus jamais de mise en forme, tu enregistres et c'est propre.

Le déclencher à chaque sauvegarde

Tout se fait dans l'interface des réglages, sans toucher à un fichier de configuration.

  1. Ouvre les réglages : Ctrl+, (Windows) ou Cmd+, (Mac). Par les menus : Fichier → Préférences → Paramètres (Windows), Code → Réglages → Paramètres (Mac).
  2. Dans la barre de recherche en haut, tape format on save.
  3. Coche la case Editor: Format On Save.

Puis, pour désigner Prettier comme metteur en forme :

  1. Toujours dans les réglages, cherche default formatter.
  2. Dans la liste déroulante Editor: Default Formatter, choisis Prettier - Code formatter.

C'est tout : ce réglage est global, il vaut pour tous tes projets et pour la plupart des fichiers.

Si un fichier refuse de se mettre en forme, c'est que VS Code hésite entre plusieurs metteurs en forme pour ce langage. On tranche fichier par langage :

  1. Ouvre un fichier .vue.
  2. Palette de commandes : Ctrl+Shift+P (Windows) ou Cmd+Shift+P (Mac).
  3. Tape Format Document With… et valide.
  4. En bas de la liste, choisis Configure Default Formatter…, puis Prettier - Code formatter.

Recommence la même manipulation depuis un fichier .js. Chaque langage garde ensuite son réglage.

Vérification : ouvre App.vue, désindente une ligne au hasard, sauvegarde avec Ctrl+S / Cmd+S. La ligne se remet en place toute seule. Si rien ne bouge, reprends les étapes ci-dessus.

Les mêmes réglages, en texte. Palette de commandes → Preferences: Open User Settings (JSON), puis :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

C'est strictement équivalent aux clics décrits plus haut : l'interface écrit ce fichier pour toi.

Astuce

Un projet Vue tout neuf embarque un fichier .vscode/extensions.json : à l'ouverture du dossier, VS Code te propose lui-même ces extensions dans une petite notification. Tu peux tout accepter d'un clic.

Word Wrap (retour à la ligne automatique)

Avec Tailwind, une balise finit vite avec quinze classes dans son class="...". Sans retour à la ligne automatique, la ligne file vers la droite et sort de l'écran : tu passes ton temps à faire défiler horizontalement pour lire ton propre code.

Le Word Wrap coupe visuellement les longues lignes à la largeur de la fenêtre. Il ne modifie pas le fichier, c'est un confort d'affichage.

  • Ponctuellement : menu Affichage → Retour automatique à la ligne (View → Word Wrap), ou le raccourci Alt+Z (Windows) / Option+Z (Mac). Le même raccourci le désactive.
  • Définitivement : dans les réglages (Ctrl+, / Cmd+,), cherche word wrap et mets Editor: Word Wrap sur on.

Note

Rien à installer côté navigateur pour inspecter tes composants : le projet généré par npm create vue@latest embarque déjà vite-plugin-vue-devtools. Quand tu lances npm run dev, un petit bouton Vue flotte en bas de la page : il ouvre le panneau qui montre l'arbre de tes composants et la valeur de chaque donnée réactive, en direct.

Récapitulatif

Extension Identifiant Statut
Vue - Official Vue.volar Obligatoire
Tailwind CSS IntelliSense bradlc.vscode-tailwindcss Obligatoire
ESLint dbaeumer.vscode-eslint Recommandé
Prettier esbenp.prettier-vscode Recommandé

Et deux réglages de l'éditeur :

Réglage Où Effet
Editor: Format On Save Réglages, recherche format on save Met le fichier en forme à chaque sauvegarde
Editor: Word Wrap Réglages, recherche word wrap (ou Alt+Z / Option+Z) Coupe les longues lignes de classes Tailwind

Installation en 5 minutes

  1. Ctrl+Shift+X / Cmd+Shift+X, puis installe Vue.volar, bradlc.vscode-tailwindcss, dbaeumer.vscode-eslint, esbenp.prettier-vscode.
  2. Désinstalle Vetur si tu l'avais (octref.vetur).
  3. Réglages (Ctrl+, / Cmd+,) → format on save → coche Editor: Format On Save.
  4. Toujours dans les réglages → default formatter → choisis Prettier - Code formatter.
  5. Réglages → word wrap → mets Editor: Word Wrap sur on.
  6. Relance VS Code pour être tranquille.

En résumé

Quatre extensions et trois réglages. Volar pour comprendre les fichiers .vue, Tailwind IntelliSense pour ne plus jamais chercher un nom de classe, ESLint et Prettier pour un code propre sans y penser, Format On Save pour que ça se fasse tout seul et Word Wrap pour garder tes longues lignes de classes à l'écran. Côté navigateur, rien à installer : les devtools Vue sont déjà dans le projet. Ton éditeur est prêt : on peut ouvrir le projet et regarder ce qu'il y a dedans.