Les extensions incontournables

Quelques extensions valent vraiment le coup : Prettier, ESLint, GitLens, Git Graph, Error Lens, Path Intellisense. Le reste, c'est du bruit. Cette leçon te donne la liste courte et l'argumentaire pour chacune.

Installer une extension

Ouvre le panneau Extensions (icône carrée dans la barre latérale, ou Ctrl+Shift+X). Tape le nom ou l'ID dans la barre de recherche, clique sur Install.

Tu peux aussi installer depuis le terminal :

$code --install-extension esbenp.prettier-vscode

Les 6 extensions essentielles

Prettier - esbenp.prettier-vscode

Formate ton code automatiquement à chaque sauvegarde : indentation, guillemets, virgules, longueur de ligne. Tu n'as plus jamais à te battre avec le style d'un fichier. Configure-le une fois dans .prettierrc et oublie-le.

$code --install-extension esbenp.prettier-vscode

ESLint - dbaeumer.vscode-eslint

Trouve les bugs potentiels avant d'exécuter le code : variables non utilisées, imports manquants, erreurs de types courantes. Les soulignements rouges apparaissent en temps réel dans l'éditeur. Indispensable sur tout projet JavaScript ou TypeScript.

$code --install-extension dbaeumer.vscode-eslint

GitLens - eamodio.gitlens

Affiche directement dans l'éditeur, en gris clair, qui a modifié chaque ligne et quand (le "git blame" inline). Survole une ligne : tu vois le message du commit. Clique : tu arrives dans l'historique complet. Indispensable sur tout projet en équipe.

$code --install-extension eamodio.gitlens

Error Lens - usernamehw.errorlens

Par défaut, VS Code montre les erreurs ESLint et TypeScript seulement si tu survoles la ligne. Error Lens les affiche en gras directement à droite du code fautif, sans avoir à bouger la souris. Tu vois les erreurs pendant que tu tapes.

$code --install-extension usernamehw.errorlens

Path Intellisense - christian-kohler.path-intellisense

Autocomplétion des chemins de fichiers dans tes imports (../components/Button, ./utils/format). Tu tapes ./ et une liste de fichiers apparaît. Évite les fautes de frappe sur les chemins relatifs.

$code --install-extension christian-kohler.path-intellisense

IntelliCode - visualstudioextsai.vscodeintellicode

Améliore l'autocomplétion de VS Code avec des suggestions basées sur le contexte de ton code et les patterns populaires open-source. Les suggestions les plus probables remontent en haut de la liste, préfixées d'une étoile.

$code --install-extension visualstudioextsai.vscodeintellicode

Vérifier que tout est installé