texto - Mostrar caracteres de espacio en blanco en Visual Studio Code

indentar codigo visual studio code

Question

¿Es posible mostrar caracteres de espacio en blanco, como el carácter de espacio, en Visual Studio Code?

No parece haber una opción para ello en settings.json (aunque es una opción en Atom.io ), y no he podido mostrar caracteres de espacio en blanco usando CSS.

Answer 1

ACTUALIZACIÓN (junio de 2019)

Para aquellos dispuestos a alternar caracteres de espacios en blanco usando un atajo de teclado, puede agregar fácilmente una combinación de teclas para eso.

En las últimas versiones de Visual Studio Code, ahora hay una interfaz gráfica fácil de usar (es decir, no es necesario escribir datos JSON, etc.) para ver y editar todos los atajos de teclado disponibles. Todavía está bajo

Archivo> Preferencias> Atajos de teclado (o use Ctrl + K Ctrl + S )

También hay un campo de búsqueda para ayudar a encontrar (y filtrar) rápidamente las combinaciones de teclas deseadas. Entonces, tanto agregar nuevas como editar las combinaciones de teclas existentes es mucho más fácil:

Alternar caracteres de espacio en blanco no tiene una combinación de teclas predeterminada, así que no dude en agregar uno. Simplemente presione el signo + en el lado izquierdo de la línea relacionada (o presione Entrar , o haga doble clic en cualquier lugar de esa línea) e ingrese la combinación deseada en la ventana emergente.

Y si la combinación de teclas que ha elegido ya se usa para alguna otra acción, habrá una advertencia conveniente en la que puede hacer clic y observar qué acción (s) ya utiliza su combinación de teclas elegida:

Como puede ver, todo es muy intuitivo y conveniente.
Buen trabajo, Microsoft!

Respuesta original (antigua)

Para aquellos que deseen alternar caracteres de espacios en blanco utilizando un método abreviado de teclado , puede agregar un enlace personalizado al archivo keybindings.json ( Archivo> Preferencias> Métodos abreviados de teclado ).

Ejemplo :

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

Aquí he asignado una combinación de Ctrl + Shift + i para alternar caracteres invisibles, por supuesto, puede elegir otra combinación.

Answer 2

1. Abrir las preferencias del usuario. Atajo de teclado: CTR + SHIFT + P -> Preferencias: Abrir configuración de usuario;

2. Inserte en el campo de búsqueda Espacio en blanco y seleccione todos los parámetros

Answer 3

Actualización para v1.37: agregar la opción para representar espacios en blanco solo dentro del texto seleccionado. Ver notas de la versión v1.37, espacio en blanco .

La configuración editor.renderWhitespace ahora admite una opción de selection . Con esta opción establecida, el espacio en blanco se mostrará solo en el texto seleccionado:

"editor.renderWhitespace": "selection"

y

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

Answer 4

La opción para hacer que el espacio en blanco sea visible ahora aparece como una opción en el menú Ver, como "Alternar espacio en blanco de renderizado" en la versión 1.15.1 de Visual Studio Code.

Answer 5

Para que el diff muestre espacios en blanco de manera similar a git diff configure diffEditor.ignoreTrimWhitespace en falso. edit.renderWhitespace es solo marginalmente útil.

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

Para actualizar la configuración, vaya a

Archivo> Preferencias> Configuración de usuario

Nota para usuarios de Mac: el menú Preferencias se encuentra en Código, no en Archivo. Por ejemplo, Código> Preferencias> Configuración de usuario.

Esto abre un archivo titulado "Configuración predeterminada". Expande el área //Editor . Ahora puede ver dónde se encuentran todas estas configuraciones misteriosas del editor.* . Busque (CTRL + F) para renderWhitespace . En mi caja tengo:

// 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 la confusión, la ventana izquierda "Configuración predeterminada" no es editable. Debe anularlos utilizando la ventana derecha titulada "settings.json". Puede copiar la configuración de pegado de "Configuración predeterminada" a "settings.json":

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

Terminé apagando renderWhitespace .

Answer 6

Presiona el botón F1, luego escribe "Toggle Render Whitespace" o las partes que puedas recordar :)

Utilizo vscode versión 1.22.2, por lo que esta podría ser una característica que no existía en 2015.

Answer 7

Solo para demostrar los cambios que editor.renderWhitespace : true le hará a su VSCode agregué esta captura de pantalla:
.

Donde Tab son → y Espacio son .

Answer 8

También se puede hacer a través del menú principal View -> Render Whitespace

Answer 9

Ya no es un boolean . Cambiaron a una enum . Ahora podemos elegir entre: none , boundary y 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",

Puedes ver la diferencia original en GitHub .

Answer 10

Código VS 1.6.0 y superior

Como se menciona en aloisdg a continuación , editor.renderWhitespace ahora es una enumeración que toma none , boundary o all . Para ver todos los espacios en blanco:

"editor.renderWhitespace": "all", 

Antes del código VS 1.6.0

Antes de 1.6.0, tenía que establecer editor.renderWhitespace en true :

"editor.renderWhitespace": true

Answer 11

Mostrar caracteres de espacio en blanco en Visual Studio Code

cambie el setting.json, agregando los siguientes códigos!

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

así como así
(PD: ¡no hay una opción "verdadera" ! Incluso funciona).