Personnalisation du code VS

Visual Studio Code
Personnalisation
Thèmes de l'éditeur de code
Personnalisation du code VS cover image

Introduction

Visual Studio Code (VS Code) est l'un des éditeurs de code les plus populaires de l'industrie technologique, car il offre des fonctionnalités robustes et un design léger qui en ont fait l'éditeur de code de prédilection des développeurs du monde entier. Sa popularité peut être attribuée, en partie, à son apparence personnalisable, qui nous permet de créer des espaces de codage fantaisistes et attrayants. Dans cet article, nous allons voir comment personnaliser l'apparence de vs code en fonction de vos préférences, y compris les thèmes de l'éditeur de code, les thèmes des icônes et les changements de couleur de la barre d'outils.

Thèmes d'icônes

Même si les icônes par défaut de Visual Studio Code sont parfaites, pourquoi s'y limiter quand on peut se faire plaisir visuellement ? Vous pouvez modifier l'apparence de votre explorateur de fichiers à l'aide de thèmes d'icônes, qui améliorent à la fois son attrait visuel et sa convivialité.

L'un des choix les plus populaires parmi les développeurs est l'extension Material Icon Theme. Grâce à cette extension, votre explorateur de fichiers disposera d'une collection d'icônes colorée et bien organisée, inspirée du Material Design de Google. Chaque type de fichier possède sa propre icône distinctive et immédiatement identifiable, ce qui améliore l'aspect général de votre espace de travail.

Pour installer l'extension Material Icon Theme, procédez comme suit :

  1. Ouvrez Visual Studio Code.

  2. Accédez à la vue Extensions en cliquant sur l'icône Extensions dans la barre d'outils sur le côté gauche de la fenêtre.

  3. Recherchez "Material Icon Theme" et cliquez sur installer.

Après l'installation, cliquez sur l'icône en forme de roue dentée dans le coin inférieur gauche et sélectionnez "File Icon Theme" pour choisir le Material Icon Theme.

Thèmes de l'éditeur de code

Maintenant que votre explorateur de fichiers a fière allure, concentrons-nous sur l'éditeur de code lui-même. Bien que les thèmes clair et foncé par défaut de VS Code soient excellents, il arrive que vous souhaitiez quelque chose d'un peu plus personnalisé et élégant.

L'extension Night Owl est une bonne option de thème, en particulier pour ceux qui préfèrent coder dans l'obscurité. Night Owl, qui a été créé en tenant compte du contraste et de la lisibilité, présente une palette de couleurs apaisante qui aide à soulager la fatigue oculaire pendant les sessions de codage prolongées.

Pour installer l'extension du thème Night Owl :

Naviguez jusqu'à la vue Extensions.

Recherchez "Night Owl" et cliquez sur installer.

Après l'installation, choisissez Night Owl comme thème en ouvrant la Command Palette (Ctrl Shift P sous Windows/Linux, Cmd Shift P sous macOS), en sélectionnant "Color Theme" et en choisissant Night Owl dans la liste des thèmes installés dans votre éditeur de code.

Couleur de la barre d'outils

Maintenant que l'apparence et la convivialité de votre éditeur de code sont parfaites, personnalisons la couleur de la barre d'outils pour mettre la cerise sur le gâteau. C'est ici que l'extension peacock entre en jeu.

Grâce à l'extension Peacock, vous pouvez personnaliser votre espace de travail en changeant la couleur de la barre d'outils sur le côté de votre éditeur de code. Non seulement c'est esthétique, mais si vous avez plusieurs instances de VS Code ouvertes, cela peut aussi vous aider à les distinguer.

Pour installer l'extension Peacock :

  1. Allez dans la vue Extensions.

  2. Recherchez "Peacock" et cliquez sur installer.

Après l'installation, vous pouvez personnaliser la couleur de la barre d'outils en ouvrant la palette de commandes, en recherchant "Peacock" : Entrez une couleur", puis indiquez la valeur hexadécimale de la couleur que vous souhaitez définir pour votre barre d'outils de vs code.

Conclusion

Personnaliser le code Visual Studio ne se limite pas à changer les couleurs. Vous devez également créer un environnement de codage qui corresponde à votre style et augmente votre productivité. N'hésitez donc pas à vous amuser et à créer une zone de codage qui stimule votre imagination en termes d'apparence ainsi qu'en explorant d'autres fonctionnalités fantaisistes de l'incroyable VS Code. Bon codage !


Career Services background pattern

Services de carrière

Contact Section background image

Restons en contact

Code Labs Academy © 2024 Tous droits réservés.