Assemblage de petites astuces pour VSCodium.

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 !

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 :

capture d'écran de mon VSCodium où je modifie un Markdown dans lequel apparaissent des titres de différentes couleurs

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#

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 :

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 !

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 :

Option 2 - Changer le raccourci, en mode JSON :

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#

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) :

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#

Extensions liées au format Markdown#

Extensions liées au dev#

This page was last edited on , generated from this markdown. Content is available under the Creative Commons CC BY-SA 3.0 License unless otherwise noted. This site is ad-free and contains no third party cookies or tracking, just as the Web should remain.
HomepageBack to top