Astuces pour VSCode / VSCodium#

Salut, pour le moment tu n'as pas grand chose à te mettre sous la dent sur cette page, et j'en suis désolé. N'empêche que j'ajouterai ici quelques bonnes astuces, à garder sous le coude.

Table des matières :

• Astuces pour VSCode / VSCodium
  • Changer la couleur des titres Markdown
  • Mes extensions VSCode

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 fichier settings.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 !

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à.

• Code Spell Checker couplé à French - Code Spell Checker, bah oui c'est pour éviter de faire des fôtes. Au passage, ne pas oublier de l'activer en allant dans les préférences (Ctrl + ,) puis en tapant cSpell.language dans la barre de recherche et en y mettant la valeur en,fr. Ça permet de choisir l'anglais et le français comme langues à vérifier.
• 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.)
• markdownlint pratique pour prendre des bonnes habitudes et créer des Markdown aux normes.
• Markdown Table Prettifier pratique pour réindenter des tableaux Markdown en 1 click.
• Dark Github Markdown Preview inutile mais cool pour avoir un aperçu de son Markdown aussi classe que celui de GitHub en mode dark.
• Git Graph très pratique pour gérer Git dans ses projets, j'en parle dans cette page dédiée à Git.
• 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.