J’ai entendu parler de Visual Studio Code (VS Code) il y a assez longtemps maintenant, mais comme je n’ai jamais aimé les Visual Studio, surtout après avoir utilisé IntelliJ, je n’avais même pas envisagé de l’essayer par curiosité. Le plug-in officiel pour Rust ayant été fait pour VS Code, j’ai fini par me résoudre à le tester, et bien m’en a pris !

Simplicité

VS Code n’est pas un Integrated Development Environment (IDE) à la Visual Studio ou IntelliJ ni un bloc-notes à la Notepad++. Il se trouve en fait à mi-chemin entre ces deux mondes, ce qui le rend aussi simple à prendre en main qu’un Notepad. Une simplicité qui se lit dans l’interface épurée, dark par défaut (hallelujah !), un écran d’accueil donnant juste ce qu’il faut d’informations pour démarrer, une barre latérale avec cinq boutons : un gestionnaire de fichiers, un panneau de recherche, un gestionnaire de versions basé sur git, un panneau de debug, un gestionnaire d’extensions et tout en bas, les paramètres.

Pas de barre d’outils pleine de boutons qui ne servent pas, mais une barre contextuelle fondue dans la barre des onglets, à droite, et un menu classique intégré dans la barre de titre, ce qui permet d'économiser de précieux pixels dans le sens vertical.

Souplesse

D’entrée de jeu, sans rien y ajouter, l’éditeur se montre très souple. Visuellement, quelques thèmes sont fournis, de quoi se sentir chez soi rapidement sans avoir à naviguer sur le store de thèmes.

On peut aussi configurer les raccourcis clavier rapidement dans une interface spartiate mais efficace : on peut chercher la commande à affecter par son nom ou en tapant une combinaison de touches pour trouver la commande qui y est actuellement rattachée.

Pour peu que vous fassiez du web, je crois que sans rien ajouter, vous pouvez bosser, application Electron oblige.

Sinon, son système d’extensions lui permet de s’adapter à toutes les situations, et ce, très simplement : ouvrez un fichier Python et paf, il vous propose les extensions qui ont un rapport avec Python.

En effet, grâce à une communauté active, l’éditeur étant open source, il existe un écosystème d’extensions impressionnant. Et pour s’y retrouver, l’éditeur est assez intelligent pour nous suggérer ce qui pourrait nous aider selon le type de fichier sur lequel on bosse.

Puissance

L'apparente simplicité cache en fait une puissance qui ne demande qu'à s'exprimer. Parmi les fonctionnalités puissantes de base, je noterais le diff viewer, qui permet une vue côte à côte des différences ainsi qu’une vue inline, la prévisualisation des fichiers Markdown, la présence de git, bien sûr, et le terminal intégré avec des liens sur les erreurs de compilation vers le code source.

IntelliSense, le moteur de complétion de Microsoft est bien sûr de la partie. Il s’appuie sur un Server Language qui fourni les informations nécessaires à la complétion, mais aussi à la coloration syntaxique. Pour supporter un langage donné, il faut donc fournir ce serveur.

Notez qu’il existe aussi un protocole pour un Debug adapter, ce qui signifie que pour interfacer un debugger, il faut fournir une espèce de serveur de debug.

Ces protocoles ouvrent une quantité de possibilités astronomiques quant à la versatilité de l'outil.

Niveau problèmes

Pour les petits reproches, je pourrais pointer du doigt que c’est une application Electron et que, par conséquent, c’est pas ce qui se fait de plus véloce, mais ça reste totalement acceptable dans la plupart des cas. J’ai réussi à lui faire plier un genou avec d’énormes fichiers sur ma machine au bureau, mais cette machine est… défaillante, pour rester poli.

Il y a aussi le fait que bien qu’étant open source, le binaire téléchargé ne l’est pas tout à fait, car il ajoute de la télémétrie pour avoir des données sur comment l’outil est utilisé. Si cela dérange, un fork existe pour un binaire complètement libre (pas dispo pour Windows à l’heure où j’écris).

Extensions

Avec une telle présentation, on se demande s’il vaut vraiment le détour, cet éditeur. Après tout, tout cela est disponible dans tout IDE qui se respecte, et rien n’est vraiment innovant dans cette liste. Mais la puissance de VS Code se trouve dans les détails et les trucs et astuces qu’on découvre au fur et à mesure. Pour tenter de montrer la puissance de cet outil, voyons un peu les extensions que j’utilise pour améliorer mon expérience utilisateur lorsque je code ou quand j’écris pour le blog.

Pour le code

On va commencer par Hungry Delete, qui permet d’éviter d’effacer plein d’espaces d’indentation pour revenir à la ligne précédente. Allez voir la page de présentation, des GIF de démo seront bien plus parlants. 😄

Utilisant la disposition bépo, il m’arrive souvent de taper l’espace insécable par mégarde, vu qu’elle est aisément accessible par maj + espace. Malheureusement, un tel caractère n’est pas valide dans les langages de programmation et fait péter la compilation. 😅 regreplace permet de remplacer à la volée ce caractère par l’espace normale avec cette configuration :

"regreplace.commands": [
        {
            "name": "nbsp space",
            "match": "\\.(rs|h|hpp|c|cpp)$",
            "regexp": " ", // nbsp
            "global": true,
            "replace": " " // replace with space
        },
    ],

Notez bien que ce qui est entre guillemets sur la ligne regexp est une espace insécable et que dans replace, c’est une espace normale. Remarquez aussi que cette opération ne se fait que pour les fichiers dont l’extension est comprise dans la ligne match (Rust et C++, dans mon cas).

Une autre chose qu’on fait souvent quand on code est de placer des TODO dans des commentaires afin de se souvenir qu’il reste des choses à faire à cet endroit. Comme c’est un commentaire, c’est souvent dans une couleur un peu plus terne pour faire ressortir le code, mais dans le cas des TODO, on aimerait bien les voir un peu mieux. C’est ici qu’intervient l’extension Highlight, qui permet de surligner ce qu’on veut tant qu’on peut l’exprimer sous forme de regex. Je m’en suis servi un temps pour surligner les espaces insécables avant de découvrir regreplace et il me sert toujours pour les TODO, grâce à cette configuration :

"highlight.regexes": {
        "(// ?)(TODO:?).*": {
            "filterLanguageRegex": "rust|^C.?.?",
            "decorations": [
                {},
                {
                    "fontWeight": "bold",
                    "overviewRulerColor": "#e5c07b",
                    "color": "#ffffff",
                },
            ],
        },
        "([ ;])": {
            "filterLanguageRegex": "rust|^C.?.?",
            "decorations": [
                {
                    "backgroundColor": "darkred",
                    "border": "1px solid red",
                    "color": "white",
                    "borderRadius": "2px",
                    "overviewRulerColor": "red",
                }
            ],
        },
    },

Je vous ai laissé aussi la configuration pour surligner les espaces insécables ainsi qu’un caractère qui ressemble beaucoup à un point-virgule, mais qui est en fait un caractère utilisé en espagnol.

Pour finir la catégorie code, Bracket Pair Colorizer permet de coloriser par paire les parenthèses et autres crochets, et ajoute optionnellement un liseré indiquant la portée de la paire actuelle. C’est extrêmement pratique pour trouver la parenthèse/accolade/le crochet qui manque !

Pour le blog

Depuis mon passage à Cobalt, j’écris donc mes articles en Markdown et j’aime bien limiter la longueur des lignes à 90 caractères pour une question de lisibilité. Mais maintenir cette limite à la main est assez fastidieux, surtout lors d’éditions. C’est là que Rewrap entre en jeu : il va se caler sur la configuration de la marge droite de VS Code et automatiquement passer à la ligne. Il peut aussi reformater le paragraphe à la demande pour tout remettre d’équerre, par exemple après une édition. Voici ma configuration VS Code pour limiter les lignes à 90 caractères :

"[markdown]": {
        "editor.wordWrap": "on",
        "editor.rulers": [
            90
        ]
    },

J'ai aussi affecté la commande de reformatage à un raccourci clavier pour éviter d'aller la chercher dans le menu F1 de l’éditeur.

Ensuite, Markdown Shortcuts permet d’ajouter des raccourcis clavier au formatage Markdown (italique, gras, souligné). Toujours pratique à avoir sous la main, surtout pour les formatages qu'on utilise le moins.

Niveau orthographe, il existe plein de plug-ins sur le marketplace de VS Code et j’ai essayé le plus populaire, Code Spell Checker. Je n’ai pas du tout aimé à cause de la non-gestion des apostrophes : « l’assistant » et « assistant » sont par exemple considérés comme deux mots différents. J’ai découvert ensuite Spell Right, qui s’appuie sur le dictionnaire existant sur notre ordinateur et qui fait un bien meilleur travail.

Enfin, j’en ai déjà parlé dans la section pour le code mais je m’en sers aussi (voire beaucoup plus) pour le blog : regreplace. Ici, il me permet de soigner ma typographie automatiquement. Remplacer les espaces insécables par des espaces insécables fines ou encore remplacer l’apostrophe droite par l’apostrophe typographique (légèrement courbée) ; même si cette dernière est disponible en bépo via AltGr+,, la droite en accès direct est trop tentante. La configuration pour le blogging est dans un fichier de configuration à part, propre au dossier où j’écris les articles de blog, VS Code ayant plusieurs niveaux de configuration possible.

"regreplace.commands": [
        {
            "name": "space or nbsp to fine",
            "language": "markdown",
            "regexp": "[  \\n]([;!?])(?= |\\n)+", // space or nbsp
            "global": true,
            "replace": " $1" // replace with fine nbsp
        },
        {
            "name": "space or fine to nbsp for :",
            "language": "markdown",
            "regexp": "[ \\n](:)(?= |\\n)+", // space
            "global": true,
            "replace": " $1" // replace with nbsp
        },
        {
            "name": "closing fr quote fix",
            "language": "markdown",
            "regexp": "[  ](»)", // space or fine
            "global": true,
            "replace": " $1" // nbsp
        },
        {
            "name": "opening fr quote fix",
            "language": "markdown",
            "regexp": "(«)[  ]", // space or fine
            "global": true,
            "replace": "$1 " // nbsp
        },
        {
            "name": "apostrophe",
            "language": "markdown",
            "regexp": "([^\\^])’(?=[^`]*(?:`[^`]*`[^`]*)*$)",
            "global": true,
            "replace": "$1’"
        },
        {
            "name": "bad space after",
            "language": "markdown",
            "regexp": "([:;!?])[  ]", // nbsp of fine
            "global": true,
            "replace": "$1 " // space
        },
    ],

Pour le reste

Pour rendre l’explorateur de fichiers plus sympa, j’utilise vscode-icons, qui va remplacer les icônes de base et en ajouter plein selon les extensions des fichiers, histoire de s’y retrouver un peu mieux.

Niveau couleurs, je suis sur un thème que j’ai bidouillé moi-même à partir de Dark+ disponible par défaut et de la coloration syntaxique de One Monokai, que j’ai appelé Dark+ One Monokai dans un élan d’inspiration de haute voltige…

Conclusion

J’espère que tout ceci vous aura convaincu de jeter un œil curieux sur cet outil qui m’a agréablement surpris et dont je ne me passe plus. Je reviendrai sûrement sur cet outil lorsque j’aurai des astuces ou d’autres extensions à faire découvrir !