Afficher les espaces blancs dans le code Visual Studio

411

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.

eirvandelden
la source

Réponses:

608

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
revo
la source
25
Existe-t-il un moyen de le faire uniquement pour les personnages sélectionnés, comme l' "draw_white_space": "selection"option Sublime ?
noio
10
@noio Pas encore, mais il est en route github
revo
Mais cela ne montre que des espaces au début et à la fin des lignes?
drzaus
14
@drzaus, "editor.renderWhitespace": "boundary"sera le début et la fin des lignes où as "deitor.renderWhitespace": "all"affichera tous les espaces. @AlexanderGonchiy, j'ai trouvé utile d'ouvrir fichier> préférences> paramètres utilisateur (ou paramètres de l'espace de travail) et d'utiliser 'trouver' dans le dossier des paramètres par défaut pour rechercher ce dont j'ai besoin.
JackChance
1
Fichier -> Préférences -> Paramètres. Recherchez «espace blanc». Sous «Éditeur: espace de rendu», il y a une liste déroulante pour sélectionner votre nouveau paramètre. (v1.13.2)
CRice
139

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

Coder Absolute
la source
2
Dans la v 1.36.xView -> Render Whitespace
rmsys
1
Cela ne semble pas fonctionner pour les espaces pour moi.
Ian Smith
67

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:

entrez la description de l'image ici


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:

entrez la description de l'image ici

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.

informatik01
la source
2
Mon Visual Studio utilise ctrl+e ctrl+spar défaut. Pour les raccourcis combinés comme celui-ci, vous devez mettre un espace entre les deux combinaisons, pas une virgule.
t3chb0t
50

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.) entrez la description de l'image ici

xgqfrms
la source
"editor.renderWhitespace": "tous"
xgqfrms
29

Juste pour démontrer les changements qui editor.renderWhitespace : none||boundary||allferont à votre VSCode J'ai ajouté cette capture d' écran:
entrez la description de l'image ici.

Tabsont et Spacesont.

Zack S
la source
2
Le schéma de couleurs PS ne fait pas partie du changement (j'ai un plugin supplémentaire pour cela)
Zack S
1
Le plugin peut être trouvé ici: marketplace.visualstudio.com/…
Zack S
16

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 .

aloisdg passe à codidact.com
la source
2
Il est également possible d'installer une extension appelée Trailing Spaces pour afficher uniquement les derniers.
Stephane
11

* 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"
}

démonstration du rendu des espaces dans la sélection


marque
la source
ce changement de couleur est génial, merci.
Ian Smith
Si vous souhaitez le rendre un peu moins présent, le code vs accepte également le canal alpha, donc # fbff0040 serait également valide pour rendre les points plus transparents
relief.melone
6

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.

P.Brian.Mackey
la source
5

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.

Dragonthoughts
la source
5

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.

Stevelot
la source
1
cela marche! Mais il ne fait que basculer entre «tout» et «aucun», en sautant l'option «limite».
DiegoDD
5
  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 entrez la description de l'image ici

Andrey Patseiko
la source
De plus, pour VS Code 1.45 (sous OSX), la valeur par défaut était "sélection".
Shane