Ah, les éditeurs de code… Toute une histoire. Après pas mal d’années d’errement où de multiples candidats au titre de meilleur IDE se sont succédés sans vraiment arriver à satisfaire complètement les développeurs exigeants que nous sommes, il semble qu’enfin, il y en ait un qui se démarque : VSCode.
Même si Visual Studio Code semble avoir été pensé depuis le départ pour du développement front-end, notamment avec l’intégration native de TypeScript, il devient un outil incontournable lorsque les bonnes extensions sont utilisées.
Dans cet article nous avons réuni ce qui nous semble être les dix meilleures extensions pour du développement front-end notamment avec React ou TypeScript. Nous avons toutefois essayé de voir plus loin encore et d’y insérer des plugins qui touchent aussi à d’autres aspects de la couche UI (par exemple l’internationalisation).
Même si nous avons fait de notre mieux pour panacher cette sélection, celle-ci n’est rien comparée aux nombreux conseils agrémentés d’outils et de méthodes que nous proposons lors de nos sessions de coaching pour développeur front, donc si vous souhaitez un environnement de travail pensé uniquement pour vous, n’hésitez pas à prendre contact avec nous !
i18nAlly
Si votre application doit être traduite dans plusieurs langues, cette extension vous sera très utile : elle vous permettra de voir les chaînes traduites dans chacune des langues, là où vous ne voyiez avant que les clés i18n. Mais ce n’est pas tout : vous pourrez aussi modifier les traductions directement là où elles sont utilisées !
i18n-ally sur la marketplace de VSCode
SVG Viewer
Nativement, VSCode n’affiche que le code source des fichiers SVG. Avec cette extension, vous pourrez prévisualiser ces images directement dans l’IDE, soit à l’ouverture du fichier, soit en utilisant un raccourci de votre choix. Lors de la modification du code, la prévisualisation sera mise à jour automatiquement.
SVG viewer sur la marketplace de VSCode
Colorize
Cette petite extension facilite grandement la lecture du code en surlignant les définitions de couleurs, avec la couleur elle-même. Elle est compatible avec tous les codes couleur (hexa, rgb, rgba, hsl, hsla), ainsi que les préprocesseurs comme SCSS ou LESS.
Colorize sur la marketplace de VSCode
Auto Rename Tag
Par défaut, VSCode sait fermer automatiquement les balises HTML ou JSX. Mais quand vous voulez changer votre <div> en une balise plus sémantique, comme <article> par exemple, vous devez le faire pour la balise ouvrante et la balise fermante. Avec “Auto rename tag”, vous n’aurez qu’à modifier l’une des balises pour que l’autre se mette à jour automatiquement.
Auto Rename Tag sur la marketplace de VSCode
Import Cost
Ajouter une nouvelle dépendance à son projet front est très facile, mais si on y prend pas garde cela impacte très rapidement les performances globales de celle-ci. Avec cette extension, vous saurez très précisément la taille de chaque module importé dans chaque fichier. Vous pourrez aussi configurer des limites pour être alerté visuellement en cas de dépassement.
Import Cost sur la marketplace de VSCode
Path Autocomplete
On écrit très souvent des chemins dans notre code. Ne serait-ce que pour les imports, mais aussi pour les ‘src’ des images, ou autre… Path Autocomplete va nous aider à taper la suite du chemin qu’on est en train d’écrire, qu’il soit relatif ou absolu.
Path Autocomplete sur la marketplace de VSCode
Snippets
Pour celle-ci nous avons un peu triché, ce n’est pas une mais deux extensions que nous vous conseillons d’installer pour vous permettre, une fois les raccourcis les plus couramment utilisés bien en tête, de gagner un temps considérable en vous évitant d’écrire des dizaines de fois par jour des import React from ‘react’; par exemple.
Pour des snippets généralistes ES6 : Javascript ES6 Snippets
Des snippets incontournables pour du dev React (dont celles de la preview ci-dessus) : React-Native/React/Redux snippets for es6/es7
Bracket Pair Colorizer 2
Plus le code se complexifie, plus les parenthèses, crochets et autres accolades s’entremêlent, rendant de plus en plus complexe le repérage d’un élément précis dans le code. Cette extension vous permettra d’y voir plus clair en modifiant subtilement la couleur de chaque niveau de parenthèse, crochet ou autre.
Bracket Pair Colorizer 2 sur la marketplace de VSCode
ESLint / Stylelint
Ces deux extensions sont similaires et complémentaires, c’est pourquoi nous les avons regroupées. Elles permettent à VSCode de prendre en charge les linters du même nom, en affichant les problèmes de linting (erreurs et warnings) directement dans le code source. Chacune peut utiliser la version du programme (eslint ou stylelint) qui est fournie dans les dépendances de votre projet, afin de garantir le même résultat que si on la lance en ligne de commande.
ESLint sur la marketplace de VSCode
Stylelint sur la marketplace de VSCode