Article original : Best Colorful VSCode Extensions – How to Personalize Your Editor

Les ingénieurs passent une bonne partie de leur journée à écrire du code dans leur environnement de développement intégré, ou IDE en abrégé. Et Visual Studio Code est l'un des meilleurs IDE gratuits sur le marché.

Je trouve que personnaliser mon IDE m'aide à apprécier davantage le temps que je passe à l'utiliser. Je souhaite partager cette même étincelle de joie avec vous tous et j'ai recherché et testé les meilleures extensions à télécharger. Et beaucoup de ces extensions vous aideront à être plus productif.

Cet article va au-delà des extensions de thème, je suggère donc de choisir d'abord un thème. Ou essayez mon thème préféré actuel, Dracula Refined.

Indent Rainbow

Indent Rainbow est un excellent outil pour ajouter de la couleur et de la productivité à votre configuration. Il peut également servir de vérification d'alignement pour votre indentation. Chaque indentation est colorée avec une couleur arc-en-ciel alternée.

Image Indent Rainbow

Bonus : Indent Rainbow Palettes

Vous voulez des couleurs personnalisées dans votre Indent Rainbow ? Découvrez Indent Rainbow Palettes par Evondev.

Après avoir installé Indent Rainbow, installez cette extension et suivez les étapes décrites pour sélectionner une nouvelle palette de dégradés.

Image Indent Palettes1

Image Indent Palettes2

Bracket Pair Colorizer

Cela ajoutera des couleurs arc-en-ciel aux crochets, et les crochets correspondants auront la même couleur. Cette extension m'a sauvé plusieurs fois lorsque je cherchais un crochet manquant ou supplémentaire.

Le Bracket Pair Colorizer est une autre extension populaire avec plus de 4 millions d'installations.

Image

Avis de dépréciation pour 2022

Cette extension est récemment devenue obsolète. Cela est dû aux mises à jour de VSCode permettant un paramètre de colorisation des paires de crochets. Cela peut être activé avec "editor.bracketPairColorization.enabled": true dans vos paramètres utilisateur.

Les performances améliorées de cette fonctionnalité en font un meilleur choix, mais si vous préférez ne pas modifier vos paramètres utilisateur, je vous suggère de rechercher des extensions qui gèrent cela pour vous, comme Bracket Pair Colorizer ou Rainbow Brackets.

Colorize

Colorize visualise les variables de couleur en les mettant en surbrillance avec leur valeur de couleur. Cela permet de gagner du temps pour traduire les codes hexadécimaux et les noms de variables.

Image Crédit photo : Colorize

Peacock

Peacock fournit des couleurs de fenêtre optionnelles. Il est idéal pour gérer plusieurs espaces de travail. Il peut être facile d'oublier dans quel espace de travail vous vous trouvez lorsque vous passez d'une fenêtre à l'autre, mais pas avec les couleurs vives fournies par Peacock. Vous pouvez même personnaliser les couleurs de l'espace de travail.

Image Crédit photo : Peacock

VSCode Icons

L'ajout d'icônes peut aider lors de la navigation dans vos dossiers. VSCode Icons dispose d'une bibliothèque étendue d'icônes correspondant à une variété de types de fichiers.

Par exemple, vous pouvez facilement voir si vous sélectionnez un fichier TypeScript ou un fichier JavaScript en fonction de l'icône. Cela ajoute également une touche supplémentaire de couleur et de détail aux structures de dossiers.

Image Crédit photo : vscode-icons

TODO Highlight

TODO Highlight personnalisera votre liste de commentaires TODO et les fera ressortir avec de la couleur. Il peut être facile de négliger le code commenté, mais pas avec cette extension, car il est difficile de négliger un texte qui est orange vif.

TODO et FIXME sont des mots-clés intégrés. Vous aurez la possibilité de personnaliser la couleur de ceux-ci et d'ajouter des mots-clés supplémentaires.

Image Crédit photo : TODO Highlight

TL;DR

Voici une liste condensée des extensions mentionnées dans cet article.

J'espère que ces extensions apporteront également un arc-en-ciel de couleurs à votre VSCode.