VS Code (Code – OSS), mon éditeur de code

De Notepad++ à VS Code

Lorsque j’étais sur Windows, il y a quelques années, j’utilisais Notepad++ pour éditer mes fichiers code. Puis, je suis passé sur Linux à plein temps ; il fallait que je trouve un éditeur pour le remplacer puisqu’il est uniquement compatible avec Windows.

J’ai commencé par tester Bluefish et Geany, mais leur interface me déplaisait. Il existe Notepadqq également, mais je ne sais plus pour quelles raisons j’ai décidé de chercher ailleurs. Finalement j’ai utilisé un temps Gedit avec ses plugins, mais ce n’était pas suffisant. J’ai tenté Emacs et Netbeans mais les deux m’ont fait l’effet d’une « usine à gaz », ça ne convenait pas à mes besoins.

Je me suis ensuite tourné vers Brackets, Atom et VS Code.

• Brackets a pour avantage d’être réactif, son utilisation était agréable, mais il m’a semblé moins complet qu’Atom ou VS Code. Peut-être n’ai-je pas pris le temps de le configurer comme il faut…
• J’ai utilisé un temps Atom, il répondait à mes attentes et son menu paramètres était clair. Par contre, je le trouvais assez lent et, par la suite, j’ai eu quelques bugs. Il fallait que je trouve autre chose.
• Finalement, j’ai tenté VS Code et, malgré mes à priori à cause de l’étiquette Microsoft, j’en ai fait mon éditeur par défaut : il répond à mes attentes et il est plus réactif qu’Atom.

Présentation de VS Code

Visual Studio Code est un éditeur de code extensible. Il est développé par Microsoft depuis 2015 et il est disponible sur Windows, macOS et Linux. Le code source est disponible sur Github sous la licence MIT. Il existe en réalité deux versions :

• Code – OSS, le projet en licence libre
• Visual Studio Code qui est construit à partir de Code – OSS. Cette version est distribuée avec une licence Microsoft et il contient des personnalisations spécifiques à Microsoft ainsi que des extensions supplémentaires.

J’utilise la version libre, donc en réalité je n’utilise pas VS Code mais Code. Ceci dit, si vous cherchez des articles sur le logiciel, vous aurez plus de chance d’en trouver en cherchant « vscode » donc je vais continuer à l’appeler ainsi.

VS Code possède de nombreuses fonctionnalités natives, comme :

• IntelliSense : code complétion et documentation
• Une fonction de débogage, avec un onglet dédié
• Les commandes Git intégrées à l’éditeur, avec un onglet dédié
• Un terminal, voire plusieurs même
• Détection et exécution de tâches
• Des paramètres globaux et des paramètres par espace de travail
• Emmet : un plugin qui permet de coder/éditer plus rapidement

VS Code possède également de nombreuses extensions. Au moment de rédiger l’article, une recherche indiquait 16 676 résultats. Il y en a chaque jour un peu plus. Ceci dit, toutes les extensions ne se valent pas : certaines sont buguées, d’autres sont plus performantes, etc. Le marketplace de VSCode vous propose plusieurs filtres pour trouver l’extension dont vous avez besoin. Par exemple, vous pouvez trier chaque catégorie par nombre d’installations, note ou date de mise à jour.

Les plugins VS Code que j’utilise

Depuis que la version Code – OSS de Manjaro n’utilise plus le marketplace de VS Code, mais celui d’OpenVSX, je n’ai plus accès à certaines extensions. J’en ai profité pour faire le tri dans les extensions que j’utilise. Voici celles que j’utilise désormais.

Apparence

Là, il s’agit avant tout d’un goût personnel, mais sachez que VS Code propose à ce jour plus de 2 880 thèmes. N’ayant pas pris le temps de tous les tester, je ne vais pas vous en recommander un en particulier.

Après avoir essayé plusieurs, j’utilise désormais Coldark. Il intègre une version claire et une foncée, ce qui permet de changer facilement suivant la luminosité dans la pièce. Il s’agit d’un thème que j’ai créé et il est décliné pour d’autres outils.

Étendre les suggestions de VS Code

• npm Intellisense : permet de suggérer des modules npm lors des importations.
• Path Intellisense : ce plugin permet l’autocomplétion des noms de fichier.
• PHP Intelephense : une extension qui me semble indispensable pour faire du PHP. Elle améliore la fonction native Intellisense et permet d’ajouter des « stubs » (par exemple WordPress).
• SCSS IntelliSense : autocomplétion pour les variables, mixins et fonctions Sass.
• Symfony for VSCode : ajoute des suggestions pour Symfony.
• Twig Language 2 : ajoute des snippets et la coloration syntaxique pour les fichiers Twig.

Linter / Beautifier / Fixer

• ESLint : trouve et corrige les problèmes dans les fichiers Javascript.
• php cs fixer : formate et corrige les erreurs en PHP.
• PHP Sniffer : formate et affiche les erreurs en PHP.
• Prettier : formateur de code supportant de nombreux langages.
• Shell-format : formateur de code pour les scripts shell (bash par exemple), fichiers docker, fichiers ignore (gitignore par exemple)…
• stylelint : trouve et corrige les problèmes dans les feuilles de style (CSS, Scss…)

Test & Debug

• Bash debug : un debugger pour les scripts Bash.
• Code Runner : permet d’exécuter du code directement dans l’éditeur ; ce qui peut-être utile pour effectuer certains tests.
• Debugger for Firefox : permet de débugger Javascript dans Firefox.
• Live Server : lance un serveur de développement local.
• PHP Debug : pour débugger PHP avec Xdebug.

Divers utilitaires

• Code Spell Checker : un plugin qui vérifie les erreurs de syntaxe en anglais, il fonctionne également avec l’écriture en camelCase.
• GitLens : le plugin offre plus de possibilités et une interface plus lisible que la fonctionnalité native de VS Code.
• PHP DocBlocker : l’extension permet de générer rapidement un bloc de documentation (pour une classe, une fonction…) en saisissant /** puis Entrée ; les valeurs générées sont ensuite à modifier.
• Project Manager : ajoute un nouvel onglet dans la barre latérale pour faciliter l’accès à vos projets. Vous pouvez déclarer des projets favoris ou des projets Git par exemple ; le chemin sera sauvegardé et en un clic vous pourrez ouvrir le projet en question.
• vscode-faker : permet de générer de fausses données ; je l’utilise surtout pour du « Lorem ipsum » mais il propose d’autres types de données.

Ce qui manque à Code – OSS

La fenêtre des paramètres d’Atom me semble plus claire que celle de VS Code. Si vous préférez une interface visuelle pour régler les options, vous risquez d’être déçus. Personnellement, je ne l’utilise pas. Lorsque je veux modifier certains paramètres, j’édite directement le fichier « settings.json ».

Je ne sais pas si c’est un bug venant de Gulp/Gulp-Sass/NPM ou des tâches VS Code. Il m’arrive d’avoir des erreurs avec ma tâche « watch » alors qu’il n’y a aucune erreur dans le fichier. Lancer la tâche pour compiler Sass en dehors de la tâche « watch » fonctionne. Si je relance la tâche « watch » après cette manipulation, ça fonctionne à nouveau. Je n’ai toujours pas compris ce qui pouvait causer ce genre d’erreurs. Un bug de VS Code ?