Dans ce tutoriel je vous propose de découvrir ma configuration sur Visual Studio Code.
00:00 Introduction
01:00 Améliorer l'ergonomie
11:00 Mon thème
16:21 Les extensions que j'utilise
Mes préférences
Plutôt que de long discours voici les préférences que j'utilise actuellement lorsque je travail sur VSCode.
{
"window.zoomLevel": 0, // Permet de zoomer, pratique si vous faites une présentation
// Apparence
// -- Editeur
"workbench.startupEditor": "none", // On ne veut pas une page d'accueil chargée
"editor.minimap.enabled": false,
"breadcrumbs.enabled": false,
// -- Sidebar
"workbench.tree.indent": 15, // Indente plus pour plus de clarté dans la sidebar
"workbench.tree.renderIndentGuides": "always",
// -- Code
"editor.occurrencesHighlight": false,
"editor.renderWhitespace": "trailing", // On ne veut pas laisser d'espace en fin de ligne
// Thème
"editor.fontFamily": "'JetBrains Mono', 'Fira Code', 'Operator Mono Lig', monospace",
"editor.fontLigatures": true,
"editor.fontSize": 16,
"editor.lineHeight": 28,
"workbench.colorTheme": "Tokyo Night",
"workbench.iconTheme": "material-icon-theme",
"workbench.colorCustomizations": {
"[Tokyo Night]": {
"editor.selectionBackground": "#3D59A1",
"editor.selectionHighlightBackground": "#3D59A1"
},
},
// Ergonomie
"editor.wordWrap": "on",
"editor.suggest.insertMode": "replace", // L'autocomplétion remplace le mot en cours
"editor.acceptSuggestionOnCommitCharacter": false, // Evite que l'autocomplétion soit accepté lors d'un . par exemple
"editor.formatOnSave": false,
"editor.formatOnPaste": false,
"editor.linkedEditing": true, // Quand on change un élément HTML, change la balise fermante
"explorer.autoReveal": false,
"explorer.confirmDragAndDrop": false,
"workbench.editor.enablePreview": false, // Un clic sur un fichier l'ouvre
"emmet.triggerExpansionOnTab": true,
// Fichiers
"files.autoSave": "onFocusChange",
"files.defaultLanguage": "markdown",
"files.exclude": {
"**/.idea": true
},
// Languages
"javascript.preferences.importModuleSpecifierEnding": "js",
"typescript.preferences.importModuleSpecifierEnding": "js",
// Formatters
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// Extensions
"liveServer.settings.donotVerifyTags": true,
"gitlens.codeLens.enabled": false,
"gitlens.currentLine.enabled": false,
"editor.unicodeHighlight.nonBasicASCII": false,
}Les extensions que j'utilise
De base je trouve l'éditeur plutôt complet et j'ai tendance à installer le moins d'extensions possible (pour ne pas alourdir l'éditeur) mais voici quelques extensions que j'utilise.
Rainbow brackets
Rainbow brackets permet de mettre en avant les parenthèses et accolades dans votre code en utilisant des couleurs différentes en fonction du niveau de profondeur.
Gitlens
Gitlens permet de mieux mettre en avant l'intégration de git mais ajoute par défaut beaucoup trop d'informations. Aussi je vous conseille les options suivantes.
{
"gitlens.codeLens.enabled": false,
"gitlens.currentLine.enabled": false,
}GitGraph
Git Graph permet d'accéder à l'historique git avec une interface graphique qui permet de comprendre plus facilement l'historique du projet.
Live server
Si vous travaillez sur de l'HTML / CSS / JavaScript l'extension Live Server permet de mettre en place un serveur web rapidement qui rafraichira automatiquement la page lors de l'édition de vos fichiers.
PHP
Personnellement je n'utilise pas VSCode pour travailler sur des projets PHP (je préfère utiliser PHPStorm que je trouve bien plus complet) mais l'extension Intelephense permet d'avoir une bonne autocomplétion pour des projets PHP. Vous pouvez aussi utiliser PHPDebug qui permet d'utiliser XDebug directement dans VSCode.
Prettier pour formatter
Pour formatter automatiquement mon code TypeScript et JavaScript j'utiliser en général prettier dans mes projets. Il est possible d'intégrer le formateur à l'éditeur via le plugin Prettier que l'on peut ensuite définir comme formateur par défaut.
{
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}Mes racourcis clavier
Les racourcis claviers sont en générals assez personnels mais dans mon cas j'ai surtout essayé de reproduire les racourcis que j'avais l'habitude d'utiliser dans mes autres éditeurs (si vous êtes sur MacOS vous pouvez remplacer ctrl par cmd).
[
// Etend la sélection
{
"key": "ctrl+d",
"command": "editor.action.smartSelect.expand",
"when": "editorTextFocus"
},
// Trouve toutes les occurences du mot sélectionné
{
"key": "shift+ctrl+d",
"command": "editor.action.selectHighlights",
"when": "editorFocus"
},
// Ouvre un fichier
{
"key": "ctrl+o",
"command": "workbench.action.quickOpen"
},
// Crée un nouveau fichier
{
"key": "ctrl+n",
"command": "explorer.newFile"
},
// Commandes
{
"key": "ctrl+p",
"command": "workbench.action.showCommands"
},
// Masque / Affiche l'explorateur de fichier
{
"key": "alt+1",
"command": "workbench.view.explorer",
},
{
"key": "alt+1",
"command": "workbench.action.toggleSidebarVisibility",
"when": "explorerViewletVisible"
},
// Masque / Affiche la vue git
{
"key": "ctrl+k",
"command": "workbench.view.scm"
},
{
"key": "ctrl+k",
"command": "workbench.action.toggleSidebarVisibility",
"when": "view.workbench.scm.visible"
},
{
"key": "ctrl+k",
"command": "-workbench.action.terminal.clear",
"when": "terminalFocus"
},
// Masque / Affiche le terminal
{
"key": "ctrl+t",
"command": "workbench.action.terminal.toggleTerminal"
},
// Nettoie le terminal
{
"key": "ctrl+l",
"command": "workbench.action.terminal.clear",
"when": "terminalFocus"
},
// Ouvre le fichier courant dans l'explorer de l'OS
{
"key": "shift+ctrl+o",
"command": "revealFileInOS",
},
// Navigation par symbole
{
"key": "ctrl+r",
"command": "workbench.action.gotoSymbol"
},
// Reformatte le document
{
"key": "alt+ctrl+l",
"command": "editor.action.formatDocument"
}
]
