Zeigen Sie Leerzeichen in Visual Studio Code an

411

Ist es möglich, Leerzeichen wie das Leerzeichen in Visual Studio Code anzuzeigen?

Es scheint keine Option dafür in der zu geben settings.json(obwohl es eine Option in Atom.io ist ), und ich konnte keine Leerzeichen mit CSS anzeigen.

Eirvandelden
quelle

Antworten:

608

VS Code 1.6.0 und höher

Wie bereits erwähnt von unten aloisdg , editor.renderWhitespaceist nun entweder eine Enumeration nehmen none, boundaryoder all. So zeigen Sie alle Leerzeichen an:

"editor.renderWhitespace": "all", 

Vor VS Code 1.6.0

Vor 1.6.0, mußte man Satz editor.renderWhitespacean true:

"editor.renderWhitespace": true
revo
quelle
25
Gibt es eine Möglichkeit, dies nur für ausgewählte Charaktere zu tun, wie die "draw_white_space": "selection"Option von Sublime ?
Noio
10
@noio Noch nicht, aber es ist auf dem Weg Github
Revo
Dies zeigt aber nur Leerzeichen am Anfang und Ende von Zeilen?
Drzaus
14
@drzaus, "editor.renderWhitespace": "boundary"wird der Anfang und das Ende von Zeilen sein, in denen "deitor.renderWhitespace": "all"alle Leerzeichen angezeigt werden . @AlexanderGonchiy, ich fand es nützlich, Datei> Einstellungen> Benutzereinstellungen (oder Arbeitsbereichseinstellungen) zu öffnen und "Suchen" im Standardeinstellungsordner zu verwenden, um nach dem zu suchen, was ich brauche.
JackChance
1
Datei -> Einstellungen -> Einstellungen. Suchen Sie nach "Leerzeichen". Unter 'Editor: Whitespace rendern' gibt es eine Dropdown-Liste, in der Sie Ihre neue Einstellung auswählen können. (v1.13.2)
CRice
139

Dies kann auch über das Hauptmenü erfolgen View -> Render Whitespace

Codierer Absolut
quelle
2
In v 1.36.xView -> Render Whitespace
rmsys
1
Dies scheint für Räume für mich nicht zu funktionieren.
Ian Smith
66

UPDATE (Juni 2019)

Für diejenigen , die bereit zu wechseln Leerzeichen eine Tastenkombination verwenden, können Sie einfach einen hinzufügen können Keybinding dafür.

In den neuesten Versionen von Visual Studio Code gibt es jetzt eine benutzerfreundliche grafische Oberfläche (dh Sie müssen keine JSON-Daten usw. eingeben), um alle verfügbaren Tastaturkürzel anzuzeigen und zu bearbeiten. Es ist immer noch unter

Datei> Einstellungen> Tastaturkürzel (oder verwenden Sie Ctrl+ K Ctrl+ S)

Es gibt auch ein Suchfeld, mit dem Sie die gewünschten Tastenkombinationen schnell finden (und filtern) können. Das Hinzufügen neuer und das Bearbeiten der vorhandenen Tastenkombinationen ist jetzt viel einfacher:

Geben Sie hier die Bildbeschreibung ein


Das Umschalten von Leerzeichen hat keine Standard- Tastenkombination. Sie können also eine hinzufügen. Drücken Sie einfach auf das +Zeichen auf der linken Seite der zugehörigen Zeile (oder drücken Sie Enteroder doppelklicken Sie auf eine beliebige Stelle in dieser Zeile) und geben Sie die gewünschte Kombination in das Popup-Fenster ein.

Und wenn die von Ihnen gewählte Tastenkombination bereits für andere Aktionen verwendet wird, wird eine praktische Warnung angezeigt, auf die Sie klicken und beobachten können, welche Aktionen Ihre ausgewählte Tastenkombination bereits verwenden:

Geben Sie hier die Bildbeschreibung ein

Wie Sie sehen können, ist alles sehr intuitiv und bequem.
Gute Arbeit, Microsoft!


Ursprüngliche (alte) Antwort

Für diejenigen, die Leerzeichen mithilfe einer Tastenkombination umschalten möchten , können Sie der Datei keybindings.json eine benutzerdefinierte Bindung hinzufügen ( Datei> Einstellungen> Tastaturkürzel ).

Beispiel :

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

Hier habe ich eine Kombination von Ctrl+ Shift+ zugewiesen, ium unsichtbare Zeichen umzuschalten. Sie können natürlich auch eine andere Kombination wählen.

informatik01
quelle
2
Mein Visual Studio verwendet ctrl+e ctrl+sstandardmäßig. Für Kombinationsverknüpfungen wie diese müssen Sie ein Leerzeichen zwischen den beiden Kombinationen einfügen, kein Komma.
t3chb0t
50

Zeigen Sie Leerzeichen in Visual Studio Code an

Ändern Sie die Einstellung.json, indem Sie die folgenden Codes hinzufügen!

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

genau wie dieser!
(PS: Es gibt keine "wahre" Option!, Auch wenn es funktioniert.) Geben Sie hier die Bildbeschreibung ein

xgqfrms
quelle
"editor.renderWhitespace": "all"
xgqfrms
29

editor.renderWhitespace : none||boundary||allUm die Änderungen zu demonstrieren, die an Ihrem VSCode vorgenommen werden, habe ich diesen Screenshot hinzugefügt :
Geben Sie hier die Bildbeschreibung ein.

Wo Tabsind und Spacesind.

Zack S.
quelle
2
PS Farbschema ist nicht Teil der Änderung (ich habe ein zusätzliches Plugin dafür)
Zack S
1
Plugin finden Sie hier: marketplace.visualstudio.com/...
Zack S
16

Es ist kein booleanmehr. Sie wechselten zu einem enum. Jetzt können wir wählen zwischen: none, boundary, und 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",

Sie können das ursprüngliche Diff auf GitHub sehen .

aloisdg wechselt zu codidact.com
quelle
2
Es ist auch möglich, eine Erweiterung namens Trailing Spaces zu installieren, um nur die Trailing Spaces anzuzeigen.
Stephane
11

* Update Februar 2020 * siehe https://github.com/microsoft/vscode/issues/90386

In Version 1.43 wird der Standardwertselection von nonein Version 1.42 geändert.

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

Update für Version 1.37: Hinzufügen der Option zum Rendern von Leerzeichen nur innerhalb des ausgewählten Texts. Siehe Versionshinweise zu Version 1.37, Leerzeichen rendern .

Die editor.renderWhitespaceEinstellung unterstützt jetzt eine selectionOption. Wenn diese Option festgelegt ist, werden Leerzeichen nur für den ausgewählten Text angezeigt:

"editor.renderWhitespace": "selection"

und

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

Demo von Whitespace-Rendering in Auswahl


Kennzeichen
quelle
Dieser Farbwechsel ist großartig, danke.
Ian Smith
Wenn Sie es etwas weniger präsent machen möchten, akzeptiert der Code auch den Alphakanal, sodass # fbff0040 auch gültig ist, um die Punkte transparenter zu machen
relief.melone
6

Um die diff Anzeige Leerzeichen ähnlich zu bekommen git diffSatz diffEditor.ignoreTrimWhitespaceauf false gesetzt . edit.renderWhitespaceist nur unwesentlich hilfreich.

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

Um die Einstellungen zu aktualisieren, gehen Sie zu

Datei> Einstellungen> Benutzereinstellungen

Hinweis für Mac-Benutzer: Das Menü "Einstellungen" befindet sich unter "Code nicht Datei". Beispiel: Code> Einstellungen> Benutzereinstellungen.

Dies öffnet eine Datei mit dem Titel "Standardeinstellungen". Erweitern Sie den Bereich //Editor. Jetzt können Sie sehen, wo sich all diese mysteriösen editor.*Einstellungen befinden. Suchen Sie (STRG + F) nach renderWhitespace. Auf meiner Box habe ich:

// 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",

Um die Verwirrung zu vergrößern, kann das linke Fenster "Standardeinstellungen" nicht bearbeitet werden. Sie müssen sie im rechten Fenster mit dem Titel "settings.json" überschreiben . Sie können Einfügeeinstellungen von "Standardeinstellungen" nach "settings.json" kopieren:

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

Am Ende habe ich ausgeschaltet renderWhitespace.

P.Brian.Mackey
quelle
5

Die Option, Leerzeichen sichtbar zu machen, wird jetzt als Option im Menü Ansicht als "Render-Leerzeichen umschalten" in Version 1.15.1 von Visual Studio Code angezeigt.

Drachengedanken
quelle
5

Drücken Sie die F1-Taste und geben Sie "Render Whitespace umschalten" oder die Teile davon ein, an die Sie sich erinnern können :)

Ich verwende vscode Version 1.22.2, daher könnte dies eine Funktion sein, die es 2015 noch nicht gab.

Stevelot
quelle
1
das funktioniert! Es wird jedoch nur zwischen "Alle" und "Keine" umgeschaltet, wobei die Option "Grenze" übersprungen wird.
DiegoDD
5
  1. Öffnen Sie die Benutzereinstellungen. Tastaturkürzel: CTR + SHIFT + P-> Einstellungen: Benutzereinstellungen öffnen;

  2. In das Suchfeld Whitespace einfügen und alle Parameter auswählenGeben Sie hier die Bildbeschreibung ein

Andrey Patseiko
quelle
Für VS Code 1.45 (unter OSX) war die Standardeinstellung "Auswahl".
Shane