Est-il possible d'afficher des caractères d'espacement, comme le caractère d'espace, dans Visual Studio Code?

Il ne semble pas y avoir d'option pour cela dans settings.json(bien que ce soit une option dans Atom.io ), et je n'ai pas pu afficher les espaces en utilisant CSS.

VS Code 1.6.0 et supérieur

Comme mentionné par aloisdg ci - dessous , editor.renderWhitespaceest maintenant une énumération prenant soit none, boundarysoit all. Pour afficher tous les espaces blancs:

"editor.renderWhitespace": "all", 

Avant VS Code 1.6.0

Avant 1.6.0, vous deviez ensemble editor.renderWhitespaceà true:

"editor.renderWhitespace": true

Cela peut également être fait via le menu principal View -> Render Whitespace

MISE À JOUR (juin 2019)

Pour ceux qui souhaitent basculer entre les caractères d' espacement à l' aide d'un raccourci clavier, vous pouvez facilement ajouter une liaison de touches pour cela.

Dans les dernières versions de Visual Studio Code, il existe désormais une interface graphique conviviale (c'est-à-dire qu'il n'est pas nécessaire de taper des données JSON, etc.) pour afficher et modifier tous les raccourcis clavier disponibles. Il est encore sous

Fichier> Préférences> Raccourcis clavier (ou utilisez Ctrl+ K Ctrl+ S)

Il y a aussi un champ de recherche pour aider à trouver rapidement (et filtrer) les raccourcis clavier souhaités. Alors maintenant, à la fois ajouter et modifier les raccourcis clavier existants est beaucoup plus facile:

Le basculement des caractères d'espaces blancs n'a pas de raccourci clavier par défaut, alors n'hésitez pas à en ajouter un. Appuyez simplement sur le +signe sur le côté gauche de la ligne associée (ou appuyez sur Enterou double-cliquez n'importe où sur cette ligne) et entrez la combinaison souhaitée dans la fenêtre contextuelle.

Et si le raccourci clavier que vous avez choisi est déjà utilisé pour une ou plusieurs autres actions, il y aura un avertissement pratique sur lequel vous pouvez cliquer et observer quelles actions utilisent déjà le raccourci clavier que vous avez choisi:

Comme vous pouvez le voir, tout est très intuitif et pratique.
Bon travail, Microsoft!

Réponse originale (ancienne)

Pour ceux qui souhaitent basculer entre les caractères d' espacement à l' aide d'un raccourci clavier , vous pouvez ajouter une liaison personnalisée au fichier keybindings.json ( Fichier> Préférences> Raccourcis clavier ).

Exemple :

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "ctrl+shift+i",
        "command": "editor.action.toggleRenderWhitespace"
    }
]

Ici, j'ai attribué une combinaison de Ctrl+ Shift+ ipour basculer les caractères invisibles, vous pouvez bien sûr choisir une autre combinaison.

Afficher les espaces blancs dans le code Visual Studio

changez le fichier setting.json, en ajoutant les codes suivants!

// Place your settings in this file to overwrite default and user settings.
{
    "editor.renderWhitespace": "all"
}

juste comme ça!
(PS: il n'y a pas de "vraie" option!, Même ça marche aussi.)

Juste pour démontrer les changements qui editor.renderWhitespace : none||boundary||allferont à votre VSCode J'ai ajouté cette capture d' écran:
.

Où Tabsont →et Spacesont.

Ce n'est plus un boolean. Ils sont passés à un enum. Maintenant , nous pouvons choisir entre: none, boundaryet all.

// Controls how the editor should render whitespace characters,
// posibilties are 'none', 'boundary', and 'all'.
// The 'boundary' option does not render single spaces between words.
"editor.renderWhitespace": "none",

Vous pouvez voir le diff original sur GitHub .

* Mise à jour de la version de février 2020 * voir https://github.com/microsoft/vscode/issues/90386

Dans la v1.43, la valeur par défaut sera changée enselection de nonecomme c'était le cas dans la v1.42.

"editor.renderWhitespace": "selection"  // default in v1.43

Mise à jour pour v1.37: ajout de l'option de rendu des espaces dans le texte sélectionné uniquement. Voir les notes de publication v1.37, rendre les espaces blancs .

Le editor.renderWhitespaceparamètre prend désormais en charge une selectionoption. Avec cette option définie, les espaces seront affichés uniquement sur le texte sélectionné:

"editor.renderWhitespace": "selection"

et

"workbench.colorCustomizations": {    
  "editorWhitespace.foreground": "#fbff00"
}

Pour que le diff affiche les espaces blancs de la même manière, git diffdéfinissez-le diffEditor.ignoreTrimWhitespacesur false. edit.renderWhitespacen'est que marginalement utile.

// Controls if the diff editor shows changes in leading or trailing whitespace as diffs
"diffEditor.ignoreTrimWhitespace": false,

Pour mettre à jour les paramètres, accédez à

Fichier> Préférences> Paramètres utilisateur

Remarque pour les utilisateurs de Mac: le menu Préférences se trouve sous Code et non sur Fichier. Par exemple, Code> Préférences> Paramètres utilisateur.

Cela ouvre un fichier intitulé "Paramètres par défaut". Développez la zone //Editor. Vous pouvez maintenant voir où se trouvent tous ces editor.*paramètres mystérieux . Recherchez (CTRL + F) renderWhitespace. Sur ma boite j'ai:

// Controls how the editor should render whitespace characters, posibilties are 'none', 'boundary', and 'all'. The 'boundary' option does not render single spaces between words.
"editor.renderWhitespace": "none",

Pour ajouter à la confusion, la fenêtre de gauche "Paramètres par défaut" n'est pas modifiable. Vous devez les remplacer à l'aide de la fenêtre de droite intitulée "settings.json". Vous pouvez copier les paramètres de collage de "Paramètres par défaut" vers "settings.json":

// Place your settings in this file to overwrite default and user settings.
{
     "editor.renderWhitespace": "all",
     "diffEditor.ignoreTrimWhitespace": false
}

J'ai fini par éteindre renderWhitespace.

L'option permettant de rendre les espaces visibles apparaît désormais comme une option dans le menu Affichage, comme «Basculer les espaces de rendu» dans la version 1.15.1 de Visual Studio Code.

Appuyez sur le bouton F1, puis tapez "Toggle Render Whitespace" ou les parties de celui-ci dont vous vous souvenez :)

J'utilise la version 1.22.2 de vscode, donc cela pourrait être une fonctionnalité qui n'existait pas en 2015.

1. Ouvrez les préférences utilisateur. Raccourci clavier: CTR + SHIFT + P-> Préférences: ouvrir les paramètres utilisateur;

2. Insérer dans le champ de recherche Espace blanc et sélectionner tous les paramètres