Mostrar caracteres de espacio en blanco en Visual Studio Code


411

¿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.

Respuestas:


608

Código VS 1.6.0 y superior

Como se menciona por aloisdg a continuación , editor.renderWhitespaceahora es una enumeración tomando none, boundaryo 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 configurar editor.renderWhitespacea true:

"editor.renderWhitespace": true

25
¿Hay alguna manera de hacer esto solo para los personajes seleccionados, como la "draw_white_space": "selection"opción de Sublime ?
noio

10
@noio Todavía no, pero está en camino github
revo

¿Pero esto solo muestra espacios en blanco al principio y al final de las líneas?
drzaus

14
@drzaus, "editor.renderWhitespace": "boundary"será el principio y el final de las líneas donde "deitor.renderWhitespace": "all"se mostrarán todos los espacios en blanco. @AlexanderGonchiy, me pareció útil abrir el archivo> preferencias> configuración del usuario (o configuración del espacio de trabajo) y usar 'buscar' en la carpeta de configuración predeterminada para buscar lo que necesito.
JackChance

1
Archivo -> Preferencias -> Configuración. Busque 'espacios en blanco'. En 'Editor: Render Whitespace' hay un menú desplegable para seleccionar su nueva configuración. (v1.13.2)
CRice

139

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


2
En v 1.36.xView -> Render Whitespace
rmsys

1
Esto no parece funcionar para espacios para mí.
Ian Smith

67

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:

ingrese la descripción de la imagen aquí


Alternar caracteres de espacio en blanco no tiene una combinación de teclas predeterminada, así que siéntase libre de agregar uno. Simplemente presione el +signo en el lado izquierdo de la línea relacionada (o presione Enter, 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:

ingrese la descripción de la imagen aquí

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+ ipara alternar caracteres invisibles, por supuesto, puede elegir otra combinación.


2
My Visual Studio usa ctrl+e ctrl+sde forma predeterminada. Para los accesos directos combinados como este, debe colocar un espacio entre las dos combinaciones, no una coma.
t3chb0t

50

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). ingrese la descripción de la imagen aquí


"editor.renderWhitespace": "todos"
xgqfrms

29

Sólo para demostrar los cambios que editor.renderWhitespace : none||boundary||allva a hacer a su VSCode añadí captura de pantalla:
ingrese la descripción de la imagen aquí.

Donde Tabestan y Spaceestan.


2
El esquema de color de PS no es parte del cambio (tengo un complemento adicional para esto)
Zack S

1
El complemento se puede encontrar aquí: marketplace.visualstudio.com/…
Zack S

16

Ya no es un boolean. Cambiaron a un 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 .


2
También es posible instalar una extensión llamada Espacios finales para mostrar solo los finales.
Stephane

11

* Actualización de la versión de febrero de 2020 * consulte https://github.com/microsoft/vscode/issues/90386

En v1.43, el valor predeterminado cambiaráselection de nonecomo estaba en v1.42.

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

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

La editor.renderWhitespaceconfiguración ahora admite una selectionopción. 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"
}

demostración de render de espacios en blanco en la selección



Este cambio de color es increíble, gracias.
Ian Smith

Si desea que esté un poco menos presente, el código vs también acepta el canal alfa, por lo que # fbff0040 también sería válido para hacer que los puntos sean más transparentes
relief.melone

6

Para que el diff muestre espacios en blanco de manera similar a git diffset diffEditor.ignoreTrimWhitespaceen false. edit.renderWhitespacees 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 editor.*configuraciones misteriosas . 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é apagándome renderWhitespace.


5

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


5

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.


1
¡esto funciona! Pero solo alterna entre 'todos' y 'ninguno', omitiendo la opción 'límite'.
DiegoDD

5
  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 ingrese la descripción de la imagen aquí


Además, para VS Code 1.45 (en OSX), el valor predeterminado era "selección".
Shane
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.