Aller au contenu

Extensions Essentielles : Arme-toi Correctement ⚔️

Bon, avant de te lancer tête baissée dans Vue, installe ces extensions. Sinon tu vas galérer comme un noob sans autocomplétion ni debugging. 🫠

VSCode : Les Must-Have 💻

1. Vue - Official (Volar) 🎯

C'est QUOI ? L'extension officielle pour Vue 3. Sans ça, VSCode comprend rien à tes fichiers .vue et tu codes à l'aveugle comme un sauvage.

Ce qu'elle fait :

  • Syntax highlighting pour .vue
  • Autocomplétion intelligente
  • Détection d'erreurs en temps réel
  • Support TypeScript intégré
  • Refactoring automatique

Installation :
👉 Vue - Official sur VSCode Marketplace

Ou tape dans VSCode : Ctrl+Shift+X puis cherche "Vue Official" et installe.

⚠️ ATTENTION : Si t'as l'ancienne extension "Vetur", DÉSINSTALLE-LA. Volar et Vetur sont incompatibles, et tu vas avoir des conflits de dingue. 💀

2. ESLint (Optionnel mais Recommandé) 🚨

C'est QUOI ? Le flic du code. Il te gueule dessus quand tu fais n'importe quoi.

Installation :
👉 ESLint sur VSCode Marketplace

3. Prettier (Optionnel mais Pratique) 💅

C'est QUOI ? Formatte ton code automatiquement. Plus besoin de te prendre la tête avec l'indentation.

Installation :
👉 Prettier sur VSCode Marketplace

Config rapide : Ajoute ça dans tes settings VSCode (Ctrl+, puis cherche "Format On Save") :

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

Maintenant ton code se formate tout seul à chaque sauvegarde. Magie. ✨

Vue.js devtools (Extension Navigateur)

C'est QUOI ? L'outil de debugging officiel pour Vue. Tu peux inspecter tes composants, voir l'état des données réactives, tracer les events, bref c'est INDISPENSABLE.

Ce qu'elle fait :

  • Inspecter l'arbre de composants
  • Voir les props/data/computed en temps réel
  • Timeline des events
  • Performance monitoring
  • Router inspector (si tu utilises Vue Router)

Installation selon ton navigateur :

🦊 Firefox :
👉 Vue.js devtools sur Firefox Add-ons

🔵 Chrome / Edge / Brave :
👉 Vue.js devtools sur Chrome Web Store

Comment l'utiliser :

  1. Installe l'extension
  2. Lance ton projet Vue (npm run dev)
  3. Ouvre les DevTools du navigateur (F12)
  4. Tu verras un nouvel onglet "Vue" 🎉

Astuce : Si l'onglet Vue n'apparaît pas, vérifie que tu es bien en mode développement (pas en build de prod) et que ton app Vue tourne.

Récap Ultra Rapide 🍿

Extension Où ? Lien
Vue - Official (Volar) VSCode Installer
ESLint VSCode Installer
Prettier VSCode Installer
Vue.js devtools Chrome/Edge Installer
Vue.js devtools Firefox Installer

Installation en 2 min chrono :

  1. Volar dans VSCode (obligatoire)
  2. Vue DevTools dans ton navigateur (obligatoire)
  3. ESLint + Prettier si t'as 30 secondes de plus

Voilà, t'es armé. Maintenant CODE. 🔥