È possibile mostrare caratteri di spazi bianchi, come il carattere di spazio, in Visual Studio Code?

Non sembra esserci un'opzione per esso nel settings.json(sebbene sia un'opzione in Atom.io ), e non sono stato in grado di visualizzare i caratteri degli spazi bianchi usando CSS.

Codice VS 1.6.0 e versioni successive

Come menzionato da aloisdg sotto , editor.renderWhitespaceora è un enum che prende o none, boundaryo all. Per visualizzare tutti gli spazi bianchi:

"editor.renderWhitespace": "all", 

Prima del codice VS 1.6.0

Prima della 1.6.0, dovevi impostare editor.renderWhitespacesu true:

"editor.renderWhitespace": true

Può anche essere fatto tramite il menu principale View -> Render Whitespace

AGGIORNAMENTO (giugno 2019)

Per coloro che desiderano attivare o disattivare i caratteri degli spazi bianchi utilizzando una scorciatoia da tastiera, è possibile aggiungere facilmente una combinazione di tasti .

Nelle ultime versioni di Visual Studio Code ora esiste un'interfaccia grafica intuitiva (cioè non è necessario digitare dati JSON ecc.) Per visualizzare e modificare tutte le scorciatoie da tastiera disponibili. È ancora sotto

File> Preferenze> Scorciatoie da tastiera (o usa Ctrl+ K Ctrl+ S)

C'è anche un campo di ricerca per trovare rapidamente (e filtrare) le combinazioni di tasti desiderate. Quindi ora sia l'aggiunta di nuove che la modifica delle combinazioni di tasti esistenti è molto più semplice:

Attivare o disattivare i caratteri di spazi bianchi non ha un vincolo di tasti predefinito quindi sentiti libero di aggiungerne uno. Basta premere il +segno sul lato sinistro della riga correlata (o premere Entero fare doppio clic in un punto qualsiasi di quella riga) e inserire la combinazione desiderata nella finestra pop-up.

E se il keybinding che hai scelto è già utilizzato per qualche altra azione, ci sarà un comodo avviso che puoi fare clic e osservare quali azioni già usano il keybinding scelto:

Come puoi vedere, tutto è molto intuitivo e conveniente.
Ottimo lavoro, Microsoft!

Risposta originale (vecchia)

Per coloro che desiderano attivare o disattivare i caratteri degli spazi bianchi utilizzando una scorciatoia da tastiera , è possibile aggiungere un'associazione personalizzata al file keybindings.json ( File> Preferenze> Scorciatoie da tastiera ).

Esempio :

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

Qui ho assegnato una combinazione di Ctrl+ Shift+ iper attivare / disattivare i caratteri invisibili, puoi ovviamente scegliere un'altra combinazione.

Mostra i caratteri degli spazi bianchi nel codice di Visual Studio

cambia setting.json, aggiungendo i seguenti codici!

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

proprio come questo!
(PS: non esiste un'opzione "vera" ! Anche funziona.)

Giusto per dimostrare i cambiamenti che editor.renderWhitespace : none||boundary||allfarà al tuo VSCode ho aggiunto questa schermata:
.

Dove Tabsiamo →e dove Spacesiamo.

Non è booleanpiù. Passarono a un enum. Ora siamo in grado di scegliere tra: none, boundary, e 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",

Puoi vedere il diff originale su GitHub .

* Aggiornamento della versione di febbraio 2020 * consultare https://github.com/microsoft/vscode/issues/90386

Nella v1.43 il valore predefinito verrà modificatoselection da nonecom'era nella v1.42.

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

Aggiornamento per v1.37: aggiunta dell'opzione per il rendering degli spazi bianchi solo nel testo selezionato. Vedi le note di rilascio della v1.37, rendering degli spazi bianchi .

L' editor.renderWhitespaceimpostazione ora supporta selectionun'opzione. Con questa opzione impostata, gli spazi bianchi verranno visualizzati solo sul testo selezionato:

"editor.renderWhitespace": "selection"

e

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

Per fare in modo che il diff visualizzi gli spazi bianchi in modo simile per git diffimpostare diffEditor.ignoreTrimWhitespacesu false. edit.renderWhitespaceè solo marginalmente utile.

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

Per aggiornare le impostazioni vai a

File> Preferenze> Impostazioni utente

Nota per utenti Mac: il menu Preferenze è in Codice non file. Ad esempio, Codice> Preferenze> Impostazioni utente.

Questo apre un file intitolato "Impostazioni predefinite". Espandi l'area //Editor. Ora puoi vedere dove si trovano tutte queste editor.*impostazioni misteriose . Cerca (CTRL + F) per renderWhitespace. Sulla mia scatola ho:

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

Per aggiungere confusione, la finestra di sinistra "Impostazioni predefinite" non è modificabile. Devi sovrascriverli usando la finestra a destra intitolata "settings.json". Puoi copiare le impostazioni di incolla da "Impostazioni predefinite" a "settings.json":

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

Ho finito per spegnere renderWhitespace.

L'opzione per rendere visibile lo spazio bianco ora appare come un'opzione nel menu Visualizza, come "Attiva / disattiva spazio rendering" nella versione 1.15.1 del codice di Visual Studio.

Premi il pulsante F1, quindi digita "Attiva / disattiva spazi bianchi" o le parti che puoi ricordare :)

Uso vscode versione 1.22.2, quindi questa potrebbe essere una funzionalità che non esisteva nel 2015.

1. Apri le preferenze dell'utente. Tasto di scelta rapida: CTR + SHIFT + P-> Preferenze: Apri impostazioni utente;

2. Inserisci nel campo di ricerca Spazio bianco e seleziona tutti i parametri