Retour • 13/12/2024

Comment configurer VSCode comme un pro en 2024

Écris par Melvyn Malherbe le 13/12/2024

VSCode est l'éditeur de code le plus populaire au monde. Mais sa configuration par défaut n'est pas optimale. Dans ce guide, je vais te montrer comment le configurer comme un pro.

Les extensions essentielles

Voici la liste des extensions que j'utilise quotidiennement :

Pour la qualité du code

• ESLint - Affiche les erreurs de code
• Prettier - Formate ton code automatiquement
• Error Lens - Affiche les erreurs inline
• GitHub Copilot - IA qui t'aide à coder

Pour l'UI

• Material Icon Theme - De belles icônes pour tes fichiers
• GitHub Theme - Un thème épuré et efficace
• Indent Rainbow - Visualise les niveaux d'indentation

Pour la productivité

• Auto Rename Tag - Renomme automatiquement les tags HTML/JSX
• Template String Converter - Convertit automatiquement en template strings
• ES7+ React/Redux Snippets - Snippets pour React

La configuration en détail

Si tu veux voir toutes les extensions que j'utilise, je te conseille de lire mon article sur les meilleures extensions VSCode.

Voici les paramètres essentiels à ajouter dans ton settings.json avec leurs explications :

{
  // Formatage du code
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // Configuration de l'éditeur
  "editor.tabSize": 2,
  "editor.fontFamily": "Commit Mono",
  "editor.fontSize": 14,
  
  // Gestion des fichiers
  "files.autoSave": "onFocusChange",
  "files.exclude": {
    "pnpm-lock.yaml": true
  },

  // Limitation des onglets
  "workbench.editor.limit.value": 6,
  "workbench.editor.limit.enabled": true,

  // Organisation des imports
  "editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  }
}

Explication de chaque paramètre

1. Formatage du code

• editor.defaultFormatter: Définit Prettier comme formateur par défaut
• editor.formatOnSave: Formate automatiquement le code à la sauvegarde
• editor.codeActionsOnSave: Corrige les erreurs ESLint à la sauvegarde

2. Configuration de l'éditeur

• editor.tabSize: Définit l'indentation à 2 espaces
• editor.fontFamily: Utilise la police Commit Mono
• editor.fontSize: Taille de la police

3. Gestion des fichiers

• files.autoSave: Sauvegarde automatiquement quand tu changes de fichier
• files.exclude: Cache certains fichiers de l'explorateur

4. Limitation des onglets

• workbench.editor.limit.value: Limite le nombre d'onglets ouverts
• workbench.editor.limit.enabled: Active la limitation des onglets

Paramètres optionnels mais recommandés

{
  // Désactive les confirmations ennuyeuses
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,

  // Mise à jour automatique des imports lors du déplacement de fichiers
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",

  // Personnalisation d'Indent Rainbow
  "indentRainbow.colors": [
    "rgba(255,255,255,0.05)",
    "rgba(255,255,255,0.06)",
    "rgba(255,255,255,0.07)",
    "rgba(255,255,255,0.08)"
  ]
}

Les snippets personnalisés

Pour créer des composants React rapidement, ajoute ces snippets :

{
  "Component with Props": {
    "prefix": "comp",
    "body": [
      "type ${TM_FILENAME_BASE/[^a-zA-Z0-9]([a-zA-Z0-9])?/${1:/capitalize}/g}Props = {",
      "  $1",
      "};",
      "",
      "export const ${TM_FILENAME_BASE/[^a-zA-Z0-9]([a-zA-Z0-9])?/${1:/capitalize}/g} = (props: ${TM_FILENAME_BASE/[^a-zA-Z0-9]([a-zA-Z0-9])?/${1:/capitalize}/g}Props) => {",
      "  return (",
      "    <div>$2</div>",
      "  );",
      "};"
    ]
  }
}

Les raccourcis clavier

Voici les raccourcis que je recommande d'ajouter :

{
  "key": "shift+cmd+r",
  "command": "editor.action.rename",
  "when": "editorHasRenameProvider && editorTextFocus && !editorReadonly"
},
{
  "key": "shift+cmd+i",
  "command": "editor.action.sourceAction.importAll",
  "when": "editorTextFocus"
},
{
  "key": "shift+cmd+o",
  "command": "editor.action.organizeImports",
  "when": "editorTextFocus"
}

Ces raccourcis permettent de :

• Renommer un symbole partout dans le projet (⇧⌘R)
• Importer tous les imports manquants (⇧⌘I)
• Organiser les imports (⇧⌘O)

Conclusion

Avec cette configuration, ton VSCode sera :

• Plus rapide
• Plus agréable à utiliser
• Plus efficace pour coder

Si tu veux approfondir tes connaissances en développement, je te conseille :

• Comment utiliser useState en React
• Le guide pour bien faire du fetch en React
• React vs Svelte - Lequel choisir ?