Astuces VS Code

Les différentes versions de VS Code

Dans la suite de cet article je parlerai de VS Code de façon générique, mais il est bon de rappeller qu'il existe trois variantes de cet éditeur : Code - OSS, Visual Studio Code et VSCodium.

Dans l'ensemble, ces trois versions diffèrent seulement au niveau de la license, de la télémétrie et de certains éléments de configuration par défaut. Il est important de savoir que vous devez utiliser la version Visual Studio Code distribuée par Microsoft pour pouvoir utiliser certaines extensions comme le mniSharp C# Debugger (des problèmes sont aussi à signaler avec Remote - SSH et les Dev Containers).

Note : pour plus d'informations concernant les différences entre Visual Studio Code et Code - OSS, vous pouvez consulter Code - OSS GitHub wiki.

Faire de VS Code l'éditeur de commit par défaut.

Utiliser VS Code comme éditeur de commit par défaut possède deux avantages par rapport à l'utilisation du terminal :

Vous pouvez voir vos fautes de frappe (avec l'extension Code Spell Checker).
Si vous utilisez commitlint, vous pouvez également utiliser une extension (commitlint) pour voir en direct si votre message de commit suit la forme requise par votre configuration.

Pour faire de VS Code votre éditeur de commit par défaut, rentrez cette commande dans votre terminal :

git config --global core.editor "code --wait"

Note : L'option --wait vous permet d'éviter les erreurs de type : "Aborting commit due to empty commit message."

Indexer des lignes spécifiques avec Git

Si vous souhaitez indexer seulement des lignes spécifiques au lieu du fichier dans son intégralité, deux options s'offrent à vous :

Cliquez sur la « gouttière » sur le côté de votre éditeur, puis cliquez sur le bouton + pour indexer le bloc de code sélectionné.
Vous pouvez également sélectionner les lignes que vous souhaitez et les ajouter via un raccourcis clavier (Ctrl+K Ctrl+Alt+S est le raccourcis par défaut, mais vous pouvez le changer pour quelque chose de plus accessible si besoin) ou la palette de commandes.

Et avec la ligne de commande ?

Vous pouvez également indexer des blocs spécifiques via la ligne de commande. Encore une fois, deux approches sont possibles :

Utilisez cette commande pour lancer l'indexation interactive. Le terminal saura vous guider.
Terminal window
```
git add --interactive
```
Utilisez cette commande pour directement sélectionner les blocs de codes que vous souhaitez indexer pour un fichier spécifique.
Terminal window
```
git add -p <file-name>
```

Comparer deux fichiers

Il est parfois utile de comparer deux fichiers pour trouver les différences entre ces derniers. Pour cela, faites un clic droit sur le fichier de référence et sélectionnez Select for compare. Faites ensuite un clic droit sur le fichier que vous souhaitez comparer et sélectionnez Compare with selected.

Anecdote

Avant de découvrir cette fonctionnalité, j'utilisais une technique assez… particulière pour comparer la différence entre deux fichiers.

En grand amateur de stéréogrammes, je me suis rendu compte qu'en mettant en vis-à-vis les fichiers que je voulais comparer, je pouvais les regarder en vision croisée et voir en surbrillance les différences ! Essayez avec cette image pour voir ;-)

Deux extraits de codes compilés en vis-à-vis. Les deux semblent identiques mais une petite différence se cache entre ces deux pavés de code.

Raccourcis clavier

VS Code possède une liste conséquente de raccourcis (vous trouverez la liste complète sur le site de la documentation officielle). Si vous vous sentez perdu face à l'étendue des commandes à retenir, voici une petite sélection des combinaisons de touches que j’utilise le plus souvent.

Raccourcis par défaut

Ctrl + espace : déclenche IntelliSense. Très pratique.
Ctrl + Entrée et Ctrl + Shift + Entrée : insèrent respectivement une ligne en-dessous et au-dessus de l'emplacement actuel du curseur. Plus besoin d'aller à la fin de la ligne et d'appuyer sur entrée !
lorem<n> : pour générer du faux-texte (il s’agit d’un raccourcis Emmet). Vous pouvez ajuster le nombre de mots générés. Par exemple, lorem50 générera un faux-texte de 50 mots.
Alt + F5 et Shift + Alt + F5 : naviguer à la modification suivante ou précédente (avec Git). Je trouve cependant ces raccourcis peu accessibles et les ai remplacés par Ctrl + flèche haut et Ctrl + flèche bas.
F8 et Shift + F8 : sauter rapidement aux erreurs et aux avertissements dans le projet.
Ctrl + Retour arrière et Ctrl + Touche de suppression : supprimer un mot entier (à partir de la droite ou de la gauche du curseur). Ce raccourci n'est pas spécifique à VS Code et peut être utilisé partout. :-)

Suggestions de raccourcis personnalisés

En plus de raccourcis de base proposés par VS Code, vous pouvez créer vos propres raccourcis. Vous pouvez le faire soit depuis l'interface graphique de VS Code, soit depuis le fichier keybindings.json. Vous trouverez, en guise de suggestion, une liste de raccourcis pour ce fichier en bas de la liste ci-dessous.

Ctrl Ctrl : permet de choisir un fichier en appuyant deux fois sur la touche Ctrl.
Shift Shift : permet d’ouvrir la palette de commandes en appuyant deux fois sur la touche Shift.
Ctrl + Shift + W : permet de fermer tous les onglets, sauf celui sur lequel vous êtes en ce moment. Vous pouvez également faire un clic droit sur n'importe quel onglet et sélectionner : Close others.
Ctrl + Shift + S : sauvegarde tous vos fichiers modifiés. Plus besoin de reparcourir vos onglets et sauvegarder vos fichiers un à un.
Ctrl + Shift + < : permet de plier et déplier le code au niveau du curseur.

[
    {
        "key": "ctrl ctrl",
        "command": "workbench.action.quickOpen"
    },
    {
        "key": "shift shift",
        "command": "workbench.action.showCommands"
    },
    {
        "key": "ctrl+shift+w",
        "command": "workbench.action.closeOtherEditors"
    },
    {
        "key": "ctrl+shift+s",
        "command": "workbench.action.files.saveFiles"
    },
    {
        "key": "ctrl+[IntlBackslash]",
        "command": "editor.toggleFoldRecursively",
        "when": "editorTextFocus && foldingEnabled"
    }
]

Snippets personnalisés

En plus des snippets par défaut d'IntelliSense, vous pouvez créer vos propres Snippets personnalisés. Comme pour la section des raccourcis clavier, je décrirai la liste de ceux que je pense, les plus utiles et fournirai le fichier de configuration correspondant.

l : pour tout simplement faire un console.log();. Cette opération est si fréquente qu'elle mérite amplement un snippet.

{
    "Print to console": {
        "prefix": "l",
        "body": ["console.log('$1');", "$2"],
        "description": "Log output to console"
    }
}

Extensions

Voici les extensions que je considère comme étant les plus utiles et que j'utilise régulièrement.

Code Spell Checker

Code Spell Checker est pour moi un indispensable. Cette extension permet de souligner les fautes d'orthographe dans votre code. Outre l'utilité évidente lors de l'écriture de commentaires ou de la documentation en Markdown, vous pouvez également détecter les problèmes de nommage pour vos variables. Par exemple, nommer votre variable maximumVallue la soulignera et vous aurez la possibilité, en passant votre curseur sur la variable, d'appliquer une orthographe correcte.

Extrait de code avec deux déclarations de variable. La première, maximumVallue est soulignée grâce à l'extension mais la seconde, maximumValue ne l'est pas.

Note : si vous utilisez une autre langue en plus que l'anglais, vous aurez besoin d'ajouter une extension supplémentaire pour votre langue. Par exemple pour ajouter le français dans le dictionnaire général, vous devrez télécharger French - Code Spell Checker.

Et sans extension ?

Vous pouvez vous tourner du côté de CSpell et notamment de @cspell/eslint-plugin pour ajouter une vérification supplémentaire à votre configuration ESLint.

Material Icon Theme

C'est à mes yeux le seul élément d'apparence qui mérite d'être modifié. Grâce à Material Icon Theme, vous verrez plus facilement avec quel type de fichier vous êtes en train de travailler. Voici un petit exemple comparatif avec la vue de l'explorateur de fichiers sur un projet Angular sans cette extension :

Voici maintenant la même vue avec l'extension :

Sans l'extension, tous les fichiers TypeScript avaient une apparence similaire, ce qui peut rendre la navigation plus pénible. Avec l'extension, chaque type de fichier a une apparence distinctive.

Better Comments

Better Comments permet de mieux vous repérer dans vos commentaires en ajoutant des couleurs.

CSS Modules

Si vous utilisez les CSS Modules avec React, cette extension vous sera très utile ! Elle ajoute de l'autocomplétion lors de la saisie du nom de la classe dans votre JSX et vous pourrez également aller à la définition de cette dernière.

CSS Variable Autocomplete

Attention, plusieurs extensions portent un nom similaire. CSS Variable Autocomplete est celle que je trouve la plus efficace pour ajouter de l'autocomplétion de façon plus homogène lors de l'utilisation de variables CSS. Je pense que dans le futur nous n'aurons plus besoin de cette extension mais pour le moment je la considère comme nécessaire.

SVG

J’ai principalement installé l’extension SVG afin de pouvoir prévisualiser ces fichiers dans mon IDE, mais j'ai récemment découvert que d'autres fonctionnalités intéressantes étaient fournis avec (autocomplétion, documentation intégrée et autres).

Live Server

On a toujours besoin d’un Live Server pour tester des choses !

commitlint

Une extension qu’il est pratique d’avoir si vous avez mis en place une convention de commit avec commitlint. Vous pourrez voir en temps réel si votre message de commit est conforme à votre configuration.

LaTeX Workshop

Une dernière extension assez spécifique mais que je mentionne car je l'utilise et l'apprécie. LaTeX Workshop vous offre tout simplement un cadre pour utiliser LaTeX au sein de VS Code. C'est selon l’humeur. Vous pouvez également ajouter LTeX – LanguageTool grammar/spell checking pour lancer une instance hors-ligne de LanguageTool, permettant une vérification avancée du texte.

Ressources supplémentaires

awesome-vscode