Astuces pour VSCodium#
Pour celles & ceux qui ne le savent pas encore, VSCodium est la version communautaire et libre de l'éditeur VSCode de Microsoft. VSCodium est dépourvu des outils de surveillance (non, en novlangue on dit "télémétrie") inclus dans les binaires fournis par Microsoft (👹 fear 👹)
Changer la couleur des titres Markdown#
Quand on commence à créer des fichiers Markdown à la pelle, on a un peu tendance à voir ses yeux couler sur son clavier, notamment à cause des titres de niveau 1, de niveau 2, de niveau 3, etc., qui, par défaut, ont tous la même couleur ! Faut-il installer une extension pour changer ça ? Non !
- Ouvrir les préférences (raccourci
Ctrl
+,
) - 2 onglets User ou Workspace. Si tu veux que tes changements soient appliqués sur tous tes projets, c'est l'onglet User qu'il faut choisir. Mais si tu veux que tes changements soient appliqués que sur le projet qui est ouvert, c'est l'onglet Workspace qui est pour toi. Et dans ce cas, VSCode va sauvegarder tes préférences dans un dossier
.vscode
qui contiendra un fichiersettings.json
. - Dans la barre de recherche, cherche
editor.tokenColorCustomizations
- Click sur "Edit in settings.json"
Là, VSCode t'as prérempli le paramètre :
"editor.tokenColorCustomizations": {
}
Tu peux alors remplacer ces 5 lignes par cette nouvelle configuration, qui va appliquer des couleurs sur tes titres Markdown de niveaux 2, 3 et 4 :
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "heading.2.markdown entity.name.section.markdown, heading.2.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#FF6B6B",
}
},
{
"scope": "heading.3.markdown entity.name.section.markdown, heading.3.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#FABE28",
}
},
{
"scope": "heading.4.markdown entity.name.section.markdown, heading.4.markdown punctuation.definition.heading.markdown",
"settings": {
"foreground": "#4ECDC4",
}
}
]
}
Voici un screen du résultat :
Bien entendu, si ces couleurs ne te conviennent pas, libre à toi de les changer !
Voilà comment changer la couleur des titres Markdown !
Créer un snippet personnalisé#
À force d'ouvrir, manuellement, et de fermer, manuellement, des balises de bloc de code Python dans mes documents Markdown, je me suis dit : y'a forcément moyen de simplifier ça dans VSCode, vindiou.
La réponse est oui, grâce aux snippets. Le moment était donc venu de se créer un snippet.
Le premier snippet que j'ai créé est le « Bloc de code Python pour document Markdown », cet exemple est bien détaillé, et montre également comment associer un snippet à un raccourci clavier.
Le deuxième snippet est le « Bloc de code (tout court) pour document Markdown ». Plus succinct, mais bien pratique quand même !
Snippet "Bloc de code Python" pour Markdown#
- ouvrir un document Markdown
- ouvrir la "Commande Palette" avec
Ctrl + Shift + P
- taper
Configure User Snippets
- dans la liste choisir
markdown
, ce qui ouvre le fichiermarkdown.json
Voici le code de mon snippet "Insert python code block" :
{
"Insert python code block": {
"prefix": "py",
"body": [
"```py",
"# ${1:comment}",
">>> ${2:code}",
"${3:result}",
"```",
"",
"$0"
],
"description": "Add a python code block"
}
}
Puis on sauvegarde ce fichier markdown.json
.
Dans ce snippet, les variables $
servent à positionner le curseur aux bons endroits. Il suffit de taper ce qu'on veut, puis d'utiliser la touche Tab
pour passer à la variable suivante. La dernière "variable" $0
ne sert qu'à donner la position finale du curseur. Pour plus d'infos sur cette syntaxe, voir la doc officielle.
Voilà, on peut désormais utiliser ce snippet depuis n'importe quel document Markdown en faisant un "focus suggestion" Ctrl + Space
puis en tapant le "prefix" de notre snippet : py
.
Simple & efficace.
Et si on est flemmard (tous les devs le sont, c'est pour ça qu'ils inventent des trucs de fou), on peut associer notre snippet à un raccourci clavier :
- Ouvrir la "Command Palette" :
Ctrl + Shift + P
- Taper
Open Keyboard Shortcuts (JSON)
Puis on ajoute la portion de JSON suivante :
{
"key": "ctrl+shift+[BracketLeft]",
"command": "editor.action.insertSnippet",
"args": { "name": "Python code block" },
"when": "editorTextFocus"
},
Dans mon exemple ci-dessus, j'associe mon snippet au raccourci clavier Ctrl + Shift + ^
(le ^
étant la touche à droite de la touche P
sur un clavier Azerty).
Voilà, maintenant on ajoute notre snippet juste en pressant Ctrl + Shift + ^
depuis n'importe quel document Markdown !
Snippet "Bloc de code" pour Markdown#
😅 Bon en fait ce snippet existe déjà nativement ! Il s'appelle fenced codeblock
et s'appelle via un "focus suggestion", cette liste qui apparaît quand on fait un Ctrl + Space
. Je laisse tout de même le chapitre « Snippet "Bloc de code" pour Markdown » ci-dessous pour info (ou FTW, comme on dit)
J'avais juste besoin d'un snippet qui permet d'ajouter un bloc de code Markdown, où il ne reste plus qu'à préciser le language, et le contenu. Easy !
- ouvrir un document Markdown
- ouvrir la "Commande Palette" avec
Ctrl + Shift + P
- taper
Configure User Snippets
- dans la liste choisir
markdown
, ce qui ouvre le fichiermarkdown.json
Voici le snippet (bidon mais pratique) :
{
"Insert code block": {
"prefix": "code",
"body": [
"```${1:language}",
"$0"
"```"
],
"description": "Add a markdown code block"
}
}
Puis on sauvegarde ce fichier markdown.json
.
Voilà, on peut désormais utiliser ce snippet depuis n'importe quel document Markdown en faisant un "focus suggestion" Ctrl + Space
puis en tapant le "prefix" de notre snippet : code
.
Le bloc de code prérempli est alors ajouté au document, reste à renseigner le language, puis touche Tab
, taper le code, puis touche Tab
pour continuer son Markdown mémère ou pépère.
Dupliquer la ligne actuelle#
Un raccourci bien pratique (issu de l'éditeur Sublime Text) : Ctrl + Shift + d
Mais sur VSCode, ce raccourci est déjà attribué, donc il faut le supprimer, puis l'attribuer à l'action "dupliquer la ligne actuelle".
On peut faire ça de deux façons différentes : en mode "visuel", ou en mode config "JSON" :
Option 1 - Changer le raccourci, en mode visuel :
- Préférences > Keyboards Shortcuts
- Dans la barre de recherche, mettre :
"ctrl+shift+d"
- Click droit sur l'entrée > Remove Keybinding
- Dans la barre de recherche, mettre :
copyLinesDownAction
- Click droit sur l'entrée > Change Keybinding
- Appuyer simultanément sur les touches
Ctrl
+Shift
+d
puis valider par la toucheEntrée
Option 2 - Changer le raccourci, en mode JSON :
- Ouvrir la "Command Palette" :
Ctrl + Shift + P
- Taper
Open Keyboard Shortcuts (JSON)
- Puis on ajoute les portions de JSON suivantes :
On désactive le raccourci par défaut de VSCode :
{
"key": "ctrl+shift+d",
"command": "-workbench.view.debug",
"when": "viewContainer.workbench.view.debug.enabled"
},
On ajoute le raccourci pour dupliquer la ligne :
{
"key": "ctrl+shift+d",
"command": "editor.action.copyLinesDownAction",
"when": "editorTextFocus && !editorReadonly"
},
Voilou
Désactiver les fermetures automatiques de backticks#
- Préférences
Editor: Auto Closing Quotes
- Choisir
never
Voilou
Python#
Faire en sorte que code édité soit exécuté dans le répertoire courant, et non la racine de l'espace de travail (workspace) :
- Ouvrir les paramètres
- Onglet User (pour ne pas définir ce paramètre pour tous les workspaces)
- Dans l'invite de recherche, taper
python.terminal.executeInFileDir
- Cocher l'option
Mes extensions VSCode#
On est d'accord, des articles qui prônent telle ou telle extension pour VSCode, y'en a 3 millions. Bon, beh, ça c'est ma liste, voilà.
Extensions généralistes#
- Code Spell Checker
- Couplé à French - Code Spell Checker, bah oui c'est pour éviter de faire des
fôtesfautes. Et ⚠️ ne pas oublier de l'activer en allant dans les préférences (Ctrl
+,
) puis en tapantcSpell.language
dans la barre de recherche et en y mettant la valeuren,fr
. Ça permet de choisir l'anglais et le français comme langues à vérifier.
- Couplé à French - Code Spell Checker, bah oui c'est pour éviter de faire des
- Insert Unicode pratique pour trouver le bon caractère Unicode approprié au bon moment. On peut aussi accéder à tous les émojis (Unicode v15 au moment où je tape ceci). Vraiment pratique pour trouver le tirer long ou tel autre caractère, offline. Par contre cette extension affiche l'icône "Explorer" (mon VScode est en anglais) au dessus de celle des "Folders" dans la zone de "l'Activity Bar". Mais un simple "click droit dessus > Explorer" permet de le cacher ; Ou on peut faire glisser par un drag & drop cette icône Explorer tout en bas de l'Activity Bar.
- Git Graph très pratique pour gérer Git dans ses projets, j'en parle rapidement dans cette page dédiée à Git.
- VSCode-PDF pour visualiser des PDF sans quitter VSCode, pratique si on a de la doc écrite en PDF (donc de la doc immonde).
Extensions liées au format Markdown#
- Markdown All in One indispensable pour gagner du temps lorsqu'on créé du Markdown (liste à puces automatiques, listes auto incrémentées, création de table des matières automatiques, etc.)
- Set
markdown.extension.toc.slugifyMode
togitea
for cleaner slugified ids.
- Set
- Markdown Table j'adore cette extension. Ça, c'est dit.
- Permet de réindenter les tableaux Markdown automatiquement.
- On passe d'une colonne à l'autre avec la touche
TAB
- On peut ajouter une nouvelle colonne à droite ou à gauche.
- On peut changer l'alignement des colonnes (à gauche, au centre ou à droite).
- On peut copier/coller un tableau provenant d'une page web ou d'un tableur puis, on sélectionne le texte collé tout moche dans VSCode puis click droit dessus, "Convert TSV to table", et boom : un magnifique tableau Markdown. Elle est pas belle la vie ?
- Dark Github Markdown Preview inutile mais cool pour avoir un aperçu de son Markdown aussi classe que celui de GitHub en mode dark (lien Microsoft, pas d'open-vsx dispo).
- Markdownlint pratique pour prendre des bonnes habitudes et créer des Markdown dans les règles de l'art. Cette extension s'adresse surtout aux développeurs (ou aux maniaques ? voir aux développeurs maniaques ? lol.) parce qu'on se retrouve vite avec des trucs soulignés dans tous les sens, en tout cas au début.
- Markdown Navigation bon, cet addon n'est pas indispensable, vu qu'on peut naviguer dans un markdown nativement via l'onglet "Outline" en cliquant sur "Folder". Mais la visualisation offerte par cette extension "Markdown Navigation" est plutôt sympa, et permet de sauter facilement dans votre fichier Markdown d'un titre à l'autre, quelque soit son niveau. Parce qu'un markdown, quand il est gros, ça peut vite devenir le [complète par ce que tu veux ici]. Markdown Navigation est visible dans l'onglet "Explorer" de "l'Activity Bar" (lien Microsoft, pas d'open-vsx dispo).
Extensions liées au dev#
- Live Server (Five Server) pratique pour avoir son VSCode sur un écran A, et son navigateur sur un écran B. Le navigateur suit les changements en live, pas besoin de rafraîchir. D'ailleurs cette extension semble gérer PHP aussi, mais j'ai pas encore test.
- PHP DocBlocker très cool si tu codes en PHP et que tu souhaites mieux commenter tes fonctions, classes, propriétés, méthodes, etc.
- PHP Intelephense indispensable si tu codes en PHP. Autocomplétion, plein d'infos au survol des fonctions, variables et constantes natives, etc.