Configurer son Visual Studio Code pour React

Dans cet article, je vais me concentrer sur une liste d’extensions pour Visual Studio Code indispensables pour les développeurs React / JavaScript afin d’accélérer votre vitesse de développement.

Visual Studio Code ou VS Code est l’un des éditeurs de code le plus populaire à l’heure actuelle ; gratuit, léger et open-source, il particulièrement optimisé pour le développement d’applications Web. En outre, il fournit des fonctionnalités indispensables telles qu’IntelliSense, qui n’étaient auparavant disponibles que dans des IDE lourds comme Eclipse ou Visual Studio 2017.

Le succès de VS Code comparé à d’autres éditeurs comme Atom, Sublime Text provient entre autres de son « Marketplace » qui permet de personnaliser son éditeur à ses besoins et ses projets. Ainsi grâce à la communauté open-source, l’éditeur prendre en charge presque tous les langages de programmation, framework et technologies de développement et propose de nombreuses librairies et outils.

Cette liste d’extensions reflète l’état actuel de l’écosystème des extensions VS Code de fin 2019. Elle est construite autour des mes expériences professionnelles et n’est en rien exhaustive. Je vous encourage à la compléter et de partager vos extensions les plus utiles en commentaire !

Import Cost

Cette extension affichera dans l’éditeur la taille du paquet importé. L’extension utilise webpack avec babili-webpack-plugin afin de détecter la taille importée.

blog ai3 import-cost Configurer son Visual Studio Code pour React

Une très bonne extension pour prendre conscience de la taille des librairies que l’on importe dans nos projets et faire des meilleurs choix afin d’améliorer performance et responsivité de nos applications web.

JavaScript (ES6) code snippets

Si vous souhaitez améliorer votre vitesse de développement et en avez marre de réécrire les mêmes choses, cette extension est faites pour vous !

Cette extension vous rajoute des raccourcis clavier pour écrire plus vite du code répétitif en Javascript / React comme les constructeurs, les imports et exports, la déclarations de fonctions anonymes, etc.. . La liste des raccourcis est très complète et vous offre une vraie marge de progression pour l’accélérer vos développements.

blog ai3 image-3 Configurer son Visual Studio Code pour React
Exemple de raccourcis proposés par JavaScript ES6 code snippets

TsLint

Un Linter est un outil qui analyse statiquement du code et vérifie que celui-ci respecte un certain nombre de règles.

L’intérêt est multiple :

  • Vous êtes assuré de la constance du code, qu’il s’agisse de bonnes pratiques ou de considérations plus esthétiques : autant de points plus ou moins triviaux dont vous n’aurez plus à vous soucier directement.
  • Vous êtes toujours à jour sans avoir à faire d’effort, les mises à jour du Linter prenant en considération les évolutions des bonnes pratiques de développement.
  • En cas d’erreur de syntaxe dans votre code, l’analyse statique de ce dernier échouera, et l’erreur en question vous sera remontée : c’est un garde-fou supplémentaire

Cet outil est très simple à mettre en place et assure une bonne qualité de votre code. Un outil indispensable ! 

Path Intellisense

Ce plugin complète automatiquement les noms de fichiers permettant d’économiser de précieuses seconde ; qui bout à bout se transformeront vite en heures économiser !

blog ai3 path-intellisense Configurer son Visual Studio Code pour React

Au premier abord, ce plugin ne semble pas extraordinaire ou d’une grande importance mais une fois désinstallée on remarque très vite son absence.

GitLens

GitLens surcharge les fonctionnalités de Git intégrées à Visual Studio Code. Il vous aide à visualiser l’auteur du morceau de code en un coup d’œil via des annotations, de naviguer et d’explorer de manière transparente dans vos répertoires Git, d’obtenir de précieuses informations grâce aux puissantes commandes de comparaison.

blog ai3 gitlens-preview Configurer son Visual Studio Code pour React

Prettier

Prettier est un formateur de code. Contrairement au litter, ce plugin ne s’occupe que de la partie esthétique du code, il assure un style/mise en page cohérent en analysant votre code et en le réimprimant avec des règles que vous aurez configurées comme par exemple la longueur de ligne maximale, la taille d’une tabulation etc…

Très pratique si vous êtes sur un projet avec de nombreux développeurs, car il permet à chacun de coder comme il le souhaite sans avoir à porter d’attention à la mise en page puis le code est réagencer pour assurer une lecture et une compréhension plus consistante du code pour l’ensemble de l’équipe.

Debugger for Chrome

Extension permettant de déboguer votre code JavaScript directement depuis VS Code avec le navigateur Google Chrome ou d’autres navigateur prenant en charge le protocole Chrome DevTools ; remplaçant ainsi le débogage un peu pénible depuis l’inspecteur dans la console de Chrome.

blog ai3 demo Configurer son Visual Studio Code pour React

Peacock

Modifiez subtilement la couleur de votre espace de travail. Idéal lorsque vous avez plusieurs instances de code VS et que vous souhaitez identifier rapidement laquelle est laquelle.

blog ai3 peacock Configurer son Visual Studio Code pour React

Bracket Pair Colorizer

Cette extension permet d’identifier les parenthèses et accolades correspondantes avec des couleurs. Ce qui permet d’accélérer la lecture du code.

blog ai3 consecutiveExample Configurer son Visual Studio Code pour React

Voici un petit exemple avant / après l’application de l’extension. Le changement est subtile mais une fois adopté, il est difficile de s’en séparer !

blog ai3 image-1-1024x407 Configurer son Visual Studio Code pour React
Avant – Après

2 thoughts on “Configurer son Visual Studio Code pour React

  1. Super article 😉

    Au niveau des extensions utiles, je rajouterai aussi Hightlight Matching Tag, qui met en surbrillance les tags ouvrant et fermant en JSX et TSX, Identicator et indent-rainbow pour se repérer plus facilement dans son indentation, Trailing Spaces qui met en surbrillance les espaces non nécessaires, Visual Studio Keymap pour être comme à la maison et Version Lens pour visualiser les versions des différents packages

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.