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

J’ai mis un peu de temps à trouver un éditeur de code qui répondait à mes attentes. Finalement, après différents essais, j’utilise maintenant Visual Studio Code (VS Code) ou plutôt Code – OSS. Dans cet article, je vous détaille les différents plugins que j’utilise.

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.
VS Code - Code OSS

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

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 trouve 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

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.

Personnellement, j’utilisais « Sublime Material Theme – Dark » comme thème ; maintenant j’utilise « Ayu Mirage Bordered ». Pour les icônes apparaissant dans l’arborescence du projet, j’utilise « VSCode Great Icons ». Ceci dit, je ne suis pas fixé sur un thème.

Editeur Code OSS

Lisibilité

Pour améliorer la lisibilité du code, il existe différentes extensions que je trouve utiles :

  • Better Comments : l’extension permet de mettre en valeur certains types de commentaires (TODO, alertes, interrogations…).
  • Bracket Pair Colorizer 2 : l’extension colore différemment chaque paire de parenthèses/accolades/crochets d’un ensemble ce qui permet de distinguer le parent de l’enfant.
  • indent-rainbow : avec cette extension, chaque niveau d’indentation est coloré différemment.
  • Trailing Spaces : l’extension met en valeur les espaces inutiles en fin de ligne par exemple.
  • Markdown Preview Github Style : cette extension permet d’afficher votre fichier markdown comme il le serait sur Github.
  • Apache Conf : permet de colorer le code dans les fichiers de configuration d’Apache (comme les htaccess)

Linter / Beautifier / Fixer

Détecter les problèmes dans un fichier, les corriger et formater le code automatiquement grâce à des extensions permet un vrai gain de temps. Voici ce que j’utilise :

  • ESLint : trouve et corrige les problèmes dans les fichiers Javascript
  • Prettier : formateur de code supportant de nombreux langages
  • StandardJS – JavaScript Standard Style : intègre Standard dans VS Code
  • EditorConfig for VS Code : l’extension permet de remplacer les paramètres utilisateurs par ceux trouvés dans le fichier « .editorconfig » s’il existe. Il permet également de créer ce fichier rapidement.
  • Shell-format : formateur de code pour les scripts shell (bash par exemple), fichiers docker, fichiers ignore (gitignore par exemple)…

PHP

  • PHP Intelephense : une extension qui me semble indispensable pour faire du PHP. Elle améliore la fonction native Intellisense.
  • 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.
  • Phpcs : l’extension fournit une interface à phpcs dans VS Code ; vous pourrez vérifier rapidement les problèmes dans vos fichiers PHP.

Il existe également une extension phpcbf (le fixer de phpcs) mais ça ne fonctionnait pas aussi bien qu’en ligne de commande. Je préfère donc configurer un script dans mon fichier composer pour utiliser cette fonctionnalité.

WordPress

  • WordPress Snippets : ajoute des snippets spécifiques (fonction, class…) et améliore l’auto-complétion pour les projets WordPress

CSS / Sass

Et avant d’utiliser Gulp, j’avais aussi ces extensions :

Javascript

Divers mais tout aussi utiles

  • Path Intellisense : ce plugin permet l’autocomplétion des noms de fichier
  • 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.
  • Composer : ajoute une interface à Composer dans VS Code. Les commandes Composer sont directement accessibles dans le menu « Command Pallet ».
  • YAML : ajoute le support pour ce langage

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 ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.