Skip to Content
ConfigVSCode

VSCode — Settings, extensions et configuration

Référence rapide pour VSCode : extensions essentielles, settings, raccourcis, snippets et structure de dossier .vscode/.

Extensions incontournables

InstallĂ©es dans cet ordre d’utilitĂ© (copier-coller depuis le terminal) :

# Langage et structure
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension ms-python.python
code --install-extension ms-vscode.cpptools
 
# Git et collaboration
code --install-extension ms-vscode.gitlens
code --install-extension github.copilot
 
# Connecteurs
code --install-extension ms-azuretools.vscode-docker
code --install-extension ms-vscode-remote.remote-containers

Les extensions marquĂ©es @recommended dans un fichier .vscode/extensions.json s’installent automatiquement Ă  la rĂ©ouverture du workspace. Éviter de forcer l’installation de Copilot en extension globale si le projet n’en a pas besoin — la limite de requĂȘtes est partagĂ©e entre toutes les sessions de la machine.

Structure .vscode/ dans le projet

Ranger cette arborescence à la racine du dépÎt pour versionner les settings projet :

mon-projet/
├── .vscode/
│   ├── extensions.json        # Extensions recommandĂ©es par le projet
│   ├── settings.json          # Settings spĂ©cifiques au projet
│   ├── launch.json            # Configurations de dĂ©bogage
│   ├── tasks.json             # Tñches (build, test, lint)
│   └── snippets/              # Snippets partagĂ©s par l'Ă©quipe

extensions.json :

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "ms-python.python"
  ],
  "unwantedRecommendations": [
    "some.extension.Ă  Ă©viter"
  ]
}

Settings (.vscode/settings.json)

Settings valorisés au niveau workspace :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.rulers": [100],
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
  },
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "search.exclude": {
    "**/node_modules": true,
    "**/.git": true,
    "**/dist": true
  }
}

Les settings workspace (workspaceFolder/.vscode/settings.json) Ă©crasent les settings utilisateur (%APPDATA%/Code/User/settings.json). Pour des settings machine-wide qui ne doivent pas ĂȘtre commitĂ©s : Ă©diter directement le fichier utilisateur via Ctrl+Shift+P → « Open User Settings (JSON) ».

Launch.json — Configurations de dĂ©bogage

Exemples pour Node.js et Python :

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Server",
      "program": "${workspaceFolder}/src/index.js",
      "cwd": "${workspaceFolder}",
      "runtimeArgs": ["--enable-source-maps"],
      "env": { "NODE_ENV": "development" }
    },
    {
      "type": "python",
      "request": "launch",
      "name": "Debug Python",
      "program": "${workspaceFolder}/main.py",
      "cwd": "${workspaceFolder}",
      "env": { "PYTHONPATH": "${workspaceFolder}" },
      "justMyCode": true
    }
  ]
}

Snippets VSCode

Exemple de snippet TypeScript dans .vscode/snippets/typescript.json :

{
  "env node script": {
    "prefix": "envnode",
    "body": [
      "const env = process.env;",
      "const port = env.PORT || 3000;",
      "console.log(`Listening on $${port}`);",
      ""
    ],
    "description": "Script Node avec PORT et fallback"
  },
  "async try/catch": {
    "prefix": "tryas",
    "body": [
      "try {",
      "\t$1",
      "} catch (err) {",
      "\tconsole.error(err);",
      "\tthrow err;",
      "}"
    ],
    "description": "Bloc async try/catch"
  }
}

Keybindings (.vscode/keybindings.json)

Bindings personnalisés à scope workspace (ajoutés dans .vscode/keybindings.json) pour les opérations répétitives.

{
  "keybindings": [
    {
      "key": "ctrl+shift+n",
      "command": "editor.action.addSelectionToNextFindMatch",
      "when": "editorFocus"
    },
    {
      "key": "ctrl+alt+j",
      "command": "editor.action.inlineSuggest.commit",
      "when": "inlineSuggestionVisible && editorTextFocus"
    },
    {
      "key": "ctrl+alt+k",
      "command": "editor.action.inlineSuggest.hide",
      "when": "inlineSuggestionVisible && editorTextFocus"
    },
    {
      "key": "ctrl+shift+alt+p",
      "command": "workbench.action.terminal.runProfile",
      "args": { "profileName": "default" }
    }
  ]
}

Convention : préfixer les bindings personnels avec Ctrl+Alt+ pour éviter les conflits avec les bindings intégrés de VSCode. Ctrl+Shift+ est souvent réservé par les extensions (ex. Ctrl+Shift+P = palette).

Pour appliquer ces bindings uniquement Ă  un projet, placer le fichier dans .vscode/keybindings.json du workspace. Ils Ă©craseront les bindings utilisateur (keybindings.json global) pour ce projet uniquement. VĂ©rifier avec Ctrl+K Ctrl+X pour lister les bindings actifs et leur origine.

Raccourcis VSCode (Linux/macOS)

Raccourcis à retenir en priorité :

ActionRaccourci
Palette de commandesCtrl+Shift+P (Linux/Win) / Cmd+Shift+P (macOS)
Switcher un fichierCtrl+P / Cmd+P
Multi-curseur Ă  la sourisAlt+Clic (Linux) / Option+Clic (macOS)
Multi-curseur Ă  la colonneCtrl+Shift+Alt+Clic (Linux) / Cmd+Option+Clic (macOS)
DĂ©placer une ligneAlt+↑ / Alt+↓
Dupliquer une ligneShift+Alt+↓
ReformaterShift+Alt+F
Revenir en arriùreCtrl+Alt+← / Cmd+Option+←

Pour lister tous les raccourcis : Ctrl+K Ctrl+S (Linux/Win) / Cmd+K Cmd+S (macOS).

Ctrl+Shift+P → « Preferences: Open Keyboard Shortcuts (JSON) » permet d’éditer directement keybindings.json pour override de raccourcis spĂ©cifiques Ă  un projet.

TĂąches (.vscode/tasks.json)

DĂ©finir des commandes utilisables via Ctrl+Shift+P → « Run Task » :

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Build",
      "type": "shell",
      "command": "npm run build",
      "group": { "kind": "build", "isDefault": true },
      "problemMatcher": ["$eslint-compact"]
    },
    {
      "label": "Lint",
      "type": "shell",
      "command": "npm run lint",
      "group": "test",
      "problemMatcher": ["$tsc"]
    },
    {
      "label": "Start Dev Server",
      "type": "shell",
      "command": "npm start",
      "isBackground": true,
      "presentation": { "reveal": "always" }
    }
  ]
}

PiÚges fréquents

  • settings.json workspace vs utilisateur : les deux fichiers utilisent exactement la mĂȘme syntaxe, mais ne pas confondre leur origine. Un Ctrl+Shift+P → « Open Workspace Settings (JSON) » ouvre le bon fichier. Oublier cette distinction est la cause n°1 de settings qui « ne prennent pas effet ».

  • .vscode/ ignorĂ© par gitignore : le dossier .vscode/ est par dĂ©faut dans le .gitignore global VSCode. Pour le versionner, vĂ©rifier explicitement dans le .gitignore du projet.

  • IcĂŽnes dans le coin gauche qui ne s’affichent plus : souvent causĂ© par un cache VSCode corrompu. RĂ©solution : Ctrl+Shift+P → « Developer: Reload Window ».

  • Indentation mixte tabulations/espaces : le message Detected an indentation issue dans la barre de statut indique un conflit. Forcer avec Ctrl+Shift+P → « Change Indentation for Files Indented With Tabs to Spaces of Size
 ».

  • tasks.json avec problemMatcher incorrect : un matcher mal configurĂ© fait que les erreurs du build n’apparaissent pas dans le panneau Problems, mĂȘme si le build Ă©choue. VĂ©rifier chaque fois avec Ctrl+Shift+P → « Run Build Task » et observer le panneau Problems.

  • Extensions installĂ©es mais pas dans extensions.json : code --list-extensions montre les extensions installĂ©es. Pour les partager Ă  l’équipe, exporter avec code --list-extensions > .vscode/extensions.txt et transformer en format JSON recommandĂ©.

Configuration systĂšme LinuxVue d'ensemble