Comment configurer VSCode comme un pro en 2024
13/12/2024 • Melvynx
Loading...
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.
Voici la liste des extensions que j'utilise quotidiennement :
N'installe que les extensions dont tu as vraiment besoin. Trop d'extensions peuvent ralentir VSCode.
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"
}
}editor.defaultFormatter: Définit Prettier comme formateur par défauteditor.formatOnSave: Formate automatiquement le code à la sauvegardeeditor.codeActionsOnSave: Corrige les erreurs ESLint à la sauvegardeeditor.tabSize: Définit l'indentation à 2 espaceseditor.fontFamily: Utilise la police Commit Monoeditor.fontSize: Taille de la policefiles.autoSave: Sauvegarde automatiquement quand tu changes de fichierfiles.exclude: Cache certains fichiers de l'explorateurworkbench.editor.limit.value: Limite le nombre d'onglets ouvertsworkbench.editor.limit.enabled: Active la limitation des ongletsCes paramètres sont optimisés pour le développement TypeScript/JavaScript, mais peuvent être adaptés pour d'autres langages.
{
// 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)"
]
}Ces paramètres vont rendre ton workflow plus fluide en : - Évitant les dialogues de confirmation inutiles - Mettant à jour automatiquement les imports - Rendant l'indentation plus visible mais subtile
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>",
" );",
"};"
]
}
}Le snippet "comp" va créer un composant React avec TypeScript en utilisant le nom du fichier pour le type et le nom du composant.
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 :
⇧⌘R)⇧⌘I)⇧⌘O)Avec cette configuration, ton VSCode sera :
N'oublie pas de redémarrer VSCode après avoir modifié la configuration pour que tous les changements soient pris en compte.
Si tu veux approfondir tes connaissances en développement, je te conseille :