Mes extensions pour Visual Studio Code

Il arrive souvent que je partage ma liste d'extensions pour Visual Studio Code avec mes collègues. Je recopie rapidement les noms dans slack et j'envoie ça aux interessés sans plus d'explications.

Dernièrement, on m'a demandé sur Twitter si je comptais faire un article sur les extensions Visual Studio Code que j'utilise. Je me suis dit que ce ne serait pas une mauvaise idée.

Donc nous y voilà, je vais essayer de faire une liste des extensions que j'utilise chaque jour au boulot.

Atom Keymap

Oui, j'utilisais Atom avant. Et croyez le ou non, mais je n'avais clairement pas envie de tout réapprendre sur un nouvel éditeur de code.

Pour ceux qui ne l'ont pas encore compris Atom Keymap active les raccourcis d'Atom dans Visual Studio Code et vous permet d'utiliser l'éditeur de Microsoft sans passer trop de temps à prendre en main l'outil.

EditorConfig for VS Code

Une des extensions les plus indispensables installées sur mon éditeur. Le but est d'avoir un fichier de configuration de l'éditeur versionné dans le projet.

En configuration j'entend : est-ce qu'il faut toujours une ligne vide à la fin des fichiers ? Quelle est la taille d'un niveau d'indentation en espace ? Est-ce qu'il faut utiliser des espaces ou des tabulations pour l'indentation ? Est-ce que cette configuration est la même si je suis sur un fichier HTML ou un fichier JS ?

Comme le fichier de configuration est versionné avec le projet, EditorConfig permet d'avoir une configuration par type de fichier qui est propre à chaque projet. Peut-être que deux projets open-source auxquels je contribue n'ont pas du tout les même régles de formatage. Dans ce cas je n'ai pas envie de reparamétrer mon éditeur à chaque fois que je passe d'un projet à l'autre. Tout se fait automatiquement avec EditorConfig.

Autre intéret de cette extension: la cohérence des sources sur les projets où plusieurs développeurs interviennent. Dans les différentes équipes de développement avec lesquelles je bosse nous n'avons pas tous le même éditeur. Tout le monde à ses petites préférence et c'est tant mieux. Par contre si l'on impose pas l'éditeur, on impose EditorConfig. Il est supporté par beaucoup d'éditeur et permet que les régles de formatage soient respectées par tous.

TSLint

Beaucoup connaissent ESLint. Et bien TSLint c'est la même chose mais pour TypeScript. C'est un outil pour faire de l'analyse statique de votre code.

Pas grand chose à ajouter. Il fait bien son boulot et je crois qu'il n'a pas trop de conccurent pour l'instant.

TypeScript Importer

Très très utile. Surtout lorsque l'on travaille sur des projets ou l'on veut suivre les bonnes pratiques, les design pattern à la mode et tous ces autres trucs qui rendent le code plus lisible, plus beau, plus simple mais qui pousse à tout découper dans pleins de fichiers.

Que l'on s'entende bien. Je n'ai rien contre le fait de tout découper par responsibilité et multiplier les fichiers. C'est juste qu'en TypeScript (et en JS aussi du coup) il faut importer chaque fichier à chaque fois qu'il contient un symbole que tu veux utiliser.

Déjà on se retrouve avec une floppée d'importations en début de fichier et surtout on se retrouve sur les grosses applications à passer le plus clair de notre temps à scroller de haut en bas pour importer un symbole, l'utiliser, importer un autre symbole, l'utiliser, etc.

Avec TypeScript Importer, j'utilise juste le symbole. Lui s'occupe de l'importer.

Path Intellisense

Un grand classique de Visual Studio Code. Cette extension vous aide à écrire des paths dans votre code grâce une autocomplétion des chemins absolu et relatif sur votre machine.

NPM Intellisense

Même principe que l'extension précédente mais pour les package npm. L'extension scanne les packages installés dans votre projet et les propose en autocompletion lorsque l'on veut les importer.

nginx.conf

Ce n'est que de la coloration syntaxique basique pour les fichiers de configuration de NGINX. Mais c'est tellement mieux qu'un simple fichier en noir et blanc.

Auto Close Tag | Auto Rename tag

Deux extensions qui facilitent l'édition de code HTML. Les noms sont assez parlant :

On ferme automatiquement les balises HTML
On renomme automatiquement la balise correspondante (ouvrante ou fermant) à la balise que je viens de renommer manuellement.

/!\ L'extension Auto Close Tag n'est plus réellement nécessaire puisque Microsoft à intégré ses fonctionnalités à Visual Studio Code dans une récente mise à jour.

Angular Language Service

Extension très complète qui améliore tout un pan des fonctionnalités de Visual Studio Code lorsque l'on travaille sur un projet Angular.

Elle ajoute :

l'autocomplétion des symboles JS/TS lorsque l'on édite un template HTML.
La vérification d'erreurs et de régles liées au projet Angular
cmd + click depuis le template ouvre la définition du symbole dans le code JS/TS

Dash

Avoir la documentation directement à partir de son éditeur de code c'est quand même bien pratique. C'est ce que permet de faire Dash (ou Zeal sur linux et windows).

Un petit ctrl + h sur un symbole de notre code et la documentation s'ouvre pour le symbole sélectionné.

Git Lens

Cette extension augmention l'intégration de git dans Visual Studio Code. Elle permet de faire beaucoup de choses mais je n'utilise pas tout.

Ce que j'utilise le plus c'est les infos de blame sur chaque ligne (date de modifications, etc), les diffs rapides entre deux portions de code, la visualisation rapide du code où l'on est positionné en HEAD~1, etc.

Latest TypeScript and Javascript Grammar

Histoire d'être bien à jour au niveau des deux langages et de ne pas avoir à attendre que les nouveautés soit intégrées à l'éditeur dans une prochaine version.

Il n'y a sûrement pas toute les extensions que j'utilise mais ce sont celles que je suis à peu près certain de réinstaller si je fais une nouvelle installation de Visual Studio Code. Les extensions manquantes sont pricipalement des themes, du support de nouveaux langages pour la coloration syntaxique et des icones pour les fichiers.