Mostrar caracteres de espaço em branco no código do Visual Studio

411

É possível mostrar caracteres de espaço em branco, como o caractere de espaço, no Código do Visual Studio?

Parece não haver uma opção para isso no settings.json(embora seja uma opção no Atom.io ), e não pude exibir caracteres de espaço em branco usando CSS.

eirvandelden
fonte

Respostas:

608

Código VS 1.6.0 e superior

Como mencionado por aloisdg abaixo , editor.renderWhitespaceé agora um enum tomar qualquer none, boundaryou all. Para visualizar todos os espaços em branco:

"editor.renderWhitespace": "all", 

Antes do VS Code 1.6.0

Antes da 1.6.0, era necessário definir editor.renderWhitespacepara true:

"editor.renderWhitespace": true
revo
fonte
25
Existe uma maneira de fazer isso apenas para caracteres selecionados, como a "draw_white_space": "selection"opção do Sublime ?
noio 10/01/16
10
@noio Ainda não, mas está a caminho github
revo
Mas isso mostra apenas espaço em branco no início e no final das linhas?
drzaus 02/09
14
@drzaus, "editor.renderWhitespace": "boundary"será o início e o fim das linhas em que como "deitor.renderWhitespace": "all"será mostrado todo o espaço em branco. @AlexanderGonchiy, achei útil abrir arquivo> preferências> configurações do usuário (ou configurações da área de trabalho) e usar 'find' na pasta de configurações padrão para procurar o que eu preciso.
JackChance
1
Arquivo -> Preferências -> Configurações. Procure por 'espaço em branco'. Em 'Editor: Render Whitespace', há um menu suspenso para selecionar sua nova configuração. (v1.13.2)
CRice 15/03/19
139

Isso também pode ser feito através do menu principal View -> Render Whitespace

Coder Absolute
fonte
2
Em v 1.36.xView -> Render Whitespace
rmsys
1
Isso não parece funcionar para espaços para mim.
Ian Smith
66

ATUALIZAÇÃO (junho de 2019)

Para aqueles que desejam alternar caracteres de espaço em branco usando um atalho de teclado, é possível adicionar facilmente uma combinação de teclas .

Nas versões mais recentes do Visual Studio Code, agora existe uma interface gráfica amigável (ou seja, não é necessário digitar dados JSON etc.) para visualizar e editar todos os atalhos de teclado disponíveis. Ainda está sob

Arquivo> Preferências> Atalhos do teclado (ou use Ctrl+ K Ctrl+ S)

Há também um campo de pesquisa para ajudar a encontrar (e filtrar) rapidamente as combinações de teclas desejadas. Portanto, agora, adicionar e editar novas combinações de teclas existentes é muito mais fácil:

insira a descrição da imagem aqui


A alternância de caracteres de espaço em branco não possui ligação de teclas padrão; portanto, fique à vontade para adicionar uma. Basta pressionar o +sinal no lado esquerdo da linha relacionada (ou pressione Enterou clique duas vezes em qualquer lugar nessa linha) e digite a combinação desejada na janela pop-up.

E se a combinação de teclas escolhida já estiver sendo usada para outras ações, haverá um aviso conveniente no qual você poderá clicar e observar quais ações já usam a combinação de teclas escolhida:

insira a descrição da imagem aqui

Como você pode ver, tudo é muito intuitivo e conveniente.
Bom trabalho, Microsoft!


Resposta original (antiga)

Para aqueles que desejam alternar caracteres de espaço em branco usando um atalho de teclado , você pode adicionar uma ligação personalizada ao arquivo keybindings.json ( Arquivo> Preferências> Atalhos de Teclado ).

Exemplo :

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

Aqui designei uma combinação de Ctrl+ Shift+ ipara alternar caracteres invisíveis; é claro que você pode escolher outra combinação.

informatik01
fonte
2
Meu Visual Studio usa ctrl+e ctrl+spor padrão. Para atalhos combinados como este, você precisa colocar um espaço entre as duas combinações, não uma vírgula.
t3chb0t
50

Mostrar caracteres de espaço em branco no código do Visual Studio

altere o setting.json, adicionando os seguintes códigos!

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

bem assim!
(PS: não existe uma opção "verdadeira" !, mesmo ela também funciona.) insira a descrição da imagem aqui

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

Apenas para demonstrar as mudanças que editor.renderWhitespace : none||boundary||allvai fazer para o seu VSCode eu adicionei neste screenshot:
insira a descrição da imagem aqui.

Onde Tabestão e Spaceestão.

Zack S
fonte
2
PS esquema de cor não é parte da mudança (eu tenho um plugin extra para isso)
Zack S
1
O plug-in pode ser encontrado aqui: marketplace.visualstudio.com/…
Zack S
16

Não é booleanmais um . Eles mudaram para um enum. Agora podemos escolher entre: 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",

Você pode ver o diff original no GitHub .

aloisdg movendo-se para codidact.com
fonte
2
Também é possível instalar uma extensão chamada Espaços à direita para mostrar apenas os à direita.
Stephane
11

* Atualização da versão de fevereiro de 2020 *, consulte https://github.com/microsoft/vscode/issues/90386

Na v1.43, o valor padrão será alterado paraselection de nonecomo estava na v1.42.

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

Atualização para a v1.37: adicionando a opção de renderizar espaços em branco apenas no texto selecionado. Consulte as notas de versão v1.37, renderize espaços em branco .

A editor.renderWhitespaceconfiguração agora suporta uma selectionopção. Com esta opção definida, o espaço em branco será mostrado apenas no texto selecionado:

"editor.renderWhitespace": "selection"

e

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

demonstração do espaço em branco render na seleção


Marca
fonte
essa mudança de cor é incrível, obrigado.
Ian Smith
Se você quiser torná-lo um pouco menos presente, o código vs também aceita o canal alfa, então # fbff0040 também seria válido, tornando os pontos mais transparentes
relief.melone
6

Para que o diff exiba o espaço em branco da mesma forma que git diffdefina diffEditor.ignoreTrimWhitespacecomo false. edit.renderWhitespaceé apenas marginalmente útil.

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

Para atualizar as configurações, vá para

Arquivo> Preferências> Configurações do Usuário

Nota para usuários de Mac: O menu Preferências está em Código, não em Arquivo. Por exemplo, Código> Preferências> Configurações do usuário.

Isso abre um arquivo intitulado "Configurações padrão". Expanda a área //Editor. Agora você pode ver onde todas essas editor.*configurações misteriosas estão localizadas. Procure (CTRL + F) por renderWhitespace. Na minha caixa eu tenho:

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

Para aumentar a confusão, a janela esquerda "Configurações padrão" não é editável. Você precisa substituí-los usando a janela direita intitulada "settings.json". Você pode copiar as configurações de colagem de "Configurações padrão" para "settings.json":

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

Acabei desligando renderWhitespace.

P.Brian.Mackey
fonte
5

A opção para tornar o espaço em branco visível agora aparece como uma opção no menu Exibir, como "Alternar espaço em branco na renderização" na versão 1.15.1 do Visual Studio Code.

Dragonthoughts
fonte
5

Aperte o botão F1 e digite "Toggle Render Whitespace" ou as partes dele que você se lembra :)

Eu uso o vscode versão 1.22.2, portanto, esse poderia ser um recurso que não existia em 2015.

Stevelot
fonte
1
isso funciona! Mas apenas alterna entre 'todos' e 'nenhum', pulando a opção 'limite'.
21418 DiegoDD
5
  1. Abra as preferências do usuário. Atalho do teclado: CTR + SHIFT + P-> Preferências: Abrir configurações do usuário;

  2. Insira no campo de pesquisa espaço em branco e selecione todos os parâmetros insira a descrição da imagem aqui

Andrey Patseiko
fonte
Além disso, para o Código VS 1.45 (no OSX), o padrão era "seleção".
Shane