Comment personnaliser le code Visual Studio
Visual Studio Code, le nouvel éditeur de code open source de Microsoft, offre aux développeurs de nombreuses fonctionnalités impressionnantes faciliter le processus d'édition du code source. De plus, Visual Studio Code garantit que les utilisateurs ne s’ennuieront pas quand ils travailleront avec, car cela leur permet de personnaliser plusieurs parties de son apparence, tels que les couleurs, les polices, l’espacement et la mise en forme du texte, tout comme de nombreuses fonctionnalités, telles que peluches et règles de validation.
Dans cet article, nous allons d'abord examiner Comment modifier l'apparence de l'espace de travail Code Visual Studio, alors je vais vous montrer comment personnaliser les paramètres par défaut à l'aide de deux JSON-fichiers de configuration formatés.
Comment définir un thème de couleur sur le code VS
Visual Studio Code vous permet de définir un thème de couleur personnalisé pour votre éditeur.
Pour utiliser un thème déjà créé, cliquez sur le bouton Fichier> Préférences> Thème de couleur menu dans la barre de menu supérieure. Quand vous frappez “Entrer”, la palette de commandes apparaît et affiche une liste déroulante des thèmes que vous pouvez choisir.
Vous pouvez obtenir le même effet si vous appuyez sur F1 pour ouvrir la palette de commandes et tapez le Préférences: thème de couleur commande dans le champ de saisie.
Au fur et à mesure que vous survolez les options de la liste déroulante, l'apparition de l'espace de travail change en temps réel, afin que vous puissiez rapidement voir quel thème correspond le mieux à vos besoins.
Je chooe le “Contraste élevé” thème de couleur, comme mes yeux ne sont pas les meilleurs. Voici à quoi ressemble ma vue.
Comment installer un thème de VS Code Marketplace
Si vous n'aimez aucun des thèmes de couleur proposés par VS Code par défaut, vous pouvez en télécharger de nombreux autres à partir de VS Code Marketplace..
Ici, vous pouvez jeter un coup d’œil sur les thèmes que le marché a actuellement. Si vous souhaitez installer un thème à partir du marché, appuyez sur F1 directement dans votre éditeur de code VS afin d’ouvrir la palette de commandes, puis tapez le poste installé commande dans le champ de saisie, choisissez enfin la Extensions: Installer l'extension option de la liste qui apparaît.
Lorsque vous cliquez sur cette option, une nouvelle instance de la palette de commandes apparaît. Tapez le "thème d'installation ext" commande dans le nouveau champ de saisie, et vous obtenir une liste de tous les thèmes disponibles sur le marché du code VS.
Je choisis le thème appelé “Kit Thème Matériel”, et installez-le en cliquant dessus. Pour que le nouveau thème figure dans la liste Thème de couleur, au même endroit que les autres thèmes par défaut, vous devez redémarrer le code VS. Après le redémarrage, le nouveau thème apparaît dans la liste des thèmes et vous pouvez le définir à partir de la palette de commandes..
Avec le nouveau thème de matière, mon éditeur ressemble à ceci:
Vous pouvez revenir au thème précédent (comme je le faisais, car je préfère toujours ce thème) ou vous pouvez en jouer un peu plus avec d'autres thèmes pour voir lequel vous convient le mieux..
Si vous voulez, vous pouvez aussi créez votre thème personnalisé, et le publier sur VS Code Marketplace à l'aide de l'outil de gestion des extensions vsce.
Modifier les paramètres de l'utilisateur et de l'espace de travail
VS Code vous permet non seulement de définir un thème personnalisé, mais vous pouvez également configurer beaucoup d'autres paramètres, telles que les règles de formatage, l'utilisation de différentes fonctionnalités, les rapports d'erreur, les paramètres HTTP, les associations de fichiers, les règles anti-peluches, etc..
Vous pouvez le faire en modifiant deux fichiers de configuration, tous deux au format JSON. Ne vous inquiétez pas, vous n'avez pas besoin d'être un professionnel, car VS Code offre un moyen assez simple et intuitif d'ajouter rapidement vos personnalisations..
Dans un premier temps, voyons quelle est la différence entre les deux fichiers de configuration. VS Code a deux portées (global et local) pour les réglages, d’où les deux fichiers distincts:
- le Global
settings.json, dans lequel les règles de configuration sont valables pour chaque espace de travail - le lié à l'espace de travail
.vscode / settings.json, c'est seulement lié à un espace de travail individuel
le global settings.json Ce fichier se trouve dans le dossier où votre système d'exploitation stocke tous les autres fichiers de configuration liés à l'application, respectivement:
- sous Windows:
% APPDATA% \ Code \ User \ settings.json - sous Linux:
$ HOME / .config / Code / User / settings.json - sur Mac:
$ HOME / Bibliothèque / Application Support / Code / Utilisateur / settings.json
le lié à l'espace de travail settings.json Le fichier est stocké dans le dossier de votre projet actuel. Par défaut, ce fichier n'existe pas, mais dès que vous ajoutez un paramètre d'espace de travail personnalisé, VS Code crée un .vscode / settings.json fichier à la fois et y place des configurations personnalisées spécifiques à l’espace de travail.
Alors, quand utilisez-vous le settings.json des dossiers?
Si vous voulez que VS Code utilise vos règles de configuration personnalisées dans tout vos projets, mettez-les dans le global settings.json fichier.
Si vous souhaitez que vos paramètres ne soient valides que dans votre Projet en cours, placez-les dans l'espace de travail lié settings.json fichier.
Les paramètres de l'espace de travail remplacent les paramètres globaux, donc sois prudent.
Les paramètres globaux sont appelés “Paramètres utilisateur” dans le code de VS. Ouvrez-les soit en cliquant sur le bouton Fichier> Préférences> Paramètres utilisateur menu, ou en commençant à taper l'expression “Paramètres utilisateur” dans la palette de commandes (ouvrez-la avec F1).
VS Code ouvre deux panneaux l'un à côté de l'autre: celui de gauche contient toutes les options qu'il est possible de configurer et celui de droite affiche les options globales. settings.json fichier. Vous devez placer vos règles de configuration personnalisées dans ce fichier..
Comme vous pouvez le constater, vous n'avez rien d'autre à faire. Il vous suffit de copier-coller les paramètres que vous souhaitez modifier de gauche à droite et d'ajouter les valeurs modifiées..
Jetons un coup d'oeil à un exemple court (mais vous pouvez apporter d'autres modifications en fonction de vos besoins). Je vais changer la famille de polices, réduire la longueur d'un languette du nombre par défaut de quatre espaces à deux, réduisez le nombre maximal de fichiers de travail de neuf à cinq et modifiez l’une des règles de linting CSS pour les styles en double de "ignorer" à "Attention".
Après avoir copié-collé, mon fichier global settings.json Le fichier ressemble à ceci:
// Placez vos paramètres dans ce fichier pour écraser les paramètres par défaut "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "Attention"
Après avoir sauvegardé le modifié settings.json fichier, les apparences de mon éditeur changent immédiatement (sur la capture d'écran ci-dessous, seul le changement de la famille de polices est visible):
Vous pouvez modifier les paramètres de l'espace de travail de la même manière. Maintenant, vous devez cliquer sur le bouton Fichier> Préférences> Paramètres de l'espace de travail dans la barre de menus supérieure pour accéder à l'espace de travail associé .vscode / settings.json fichier.
Les paramètres de l'espace de travail ont exactement les mêmes options de configuration que les paramètres de l'utilisateur et vous pouvez utiliser la même technique de copier-coller. Il n'y a que deux différences, la portée (locale plutôt que globale) et la settings.json fichier dans lequel vos configurations personnalisées seront enregistrées.
