Convertir espacios en pestañas

138

Estoy escribiendo TypeScripty HTMLarchivos, y las pestañas se convierten en espacios.

En mi TypeScriptproyecto, cada pestaña se convierte en espacios, quiero desactivarla y tener una pestaña en lugar de espacios.

Esta es mi configuración:

{
  "editor.insertSpaces": false
}

EDITAR 1:

Parece funcionar en .htmlarchivos, pero no en .tsarchivos.

Matan Yedayev
fuente

Respuestas:

247

Hay 3 opciones en .vscode/settings.json:

// The number of spaces a tab is equal to.
"editor.tabSize": 4,

// Insert spaces when pressing Tab.
"editor.insertSpaces": true,

// When opening a file, `editor.tabSize` and `editor.insertSpaces` will be detected based on the file contents.
"editor.detectIndentation": true

editor.detectIndentationlo detecta desde su archivo, debe deshabilitarlo. Si no ayudó, verifique que no tenga configuraciones con mayor prioridad. Por ejemplo, cuando lo guarda en la configuración del usuario, podría sobrescribirse con la configuración del área de trabajo que se encuentra en la carpeta del proyecto.

Actualizar:

Puede abrir Archivo » Preferencias » Configuración o usar acceso directo:

CTRL+ , (Windows, Linux)

+ , (Mac)

Actualizar:

Ahora tiene una alternativa para editar esas opciones manualmente.
Haga clic en el selector Espacios: 4 en la parte inferior derecha del editor:
Ln44, Col.  [Espacios: 4].  UTF-8 con BOM.  CTRLF.  HTML  :)

Cuando desee convertir ws existentes a pestaña, instale la extensión desde Marketplace
EDITAR:
Para convertir la sangría existente de espacios a pestañas, presione Ctrl+ Shift+P y escriba:

>Convert indentation to Tabs

Esto cambiará la sangría de su documento en función de la configuración definida en pestañas.

v-andrew
fuente
1
@Viragos settings.json
v-andrew
1
¿Cómo ejecuto este comando para todos los archivos en mi espacio de trabajo?
Vijender Kumar
134

Para cambiar la configuración de las pestañas, haga clic en el área de texto directamente al texto Ln / Col en la barra de estado en la parte inferior derecha de la ventana vscode.

El nombre puede ser Tab Sizeo Spaces.

Aparecerá un menú con todas las acciones y configuraciones disponibles.

ingrese la descripción de la imagen aquí

Eric Bole-Feysot
fuente
3
Para mí, esto solo cambia esta configuración para el archivo en particular que estoy viendo actualmente. Los otros archivos en el proyecto mantienen su configuración anterior. ¿Cómo lo establecerías universalmente?
Kyle Vassella
Por lo general, reemplazo todos mis archivos a la vez, si es necesario, haciendo una búsqueda de proyecto para la expresión regular simple `{4}` y la reemplazo con \ t (para pestañas). Por lo general, también revise las coincidencias para asegurarse de que nada se romperá como los literales de cadena de varias líneas, etc. ¡Obviamente aplique estas configuraciones para que sus nuevas sangrías sean los caracteres deseados también!
cosaco el
25

Ctrl+ Shift+ P, luego "Convertir sangría en pestañas"

Carlsborg
fuente
13

Si quieres usar pestañas en lugar de espacios

Prueba esto:

  1. Vaya a FilePreferencesSettingso simplemente presione Ctrl + ,
  2. En la barra de configuración de búsqueda en la parte superior, inserteeditor.insertSpaces
  3. Verá algo como esto: Editor: inserte espacios y probablemente se verificará. Simplemente desactívela como se muestra en la imagen a continuación

Editor: Insertar espacios

  1. Recargar el código de Visual Studio ( presione F1➤ tipo reload window➤ presione Enter)

Si no funcionó, intente esto:

Probablemente sea por el complemento instalado JS-CSS-HTML Formatter

(Puede verificarlo yendo a FilePreferencesExtensionso simplemente presionando Ctrl + Shift + X , en la lista Habilitado encontrará el Formateador JS-CSS-HTML )

Si es así, puede modificar este complemento:

  1. Presione F1➤ escriba Formatter config➤ presione Enter(se abrirá el archivo formatter.json)
  2. Modifique el archivo así:
 4|    "indent_size": 1,
 5|    "indent_char": "\t"
——|
24|    "indent_size": 1,
25|    "indentCharacter": "\t",
26|    "indent_char": "\t",
——|
34|    "indent_size": 1,
35|    "indent_char": "\t",
36|    "indent_character": "\t"
  1. Guárdelo (vaya a FileSaveo simplemente presione Ctrl + S )
  2. Recargar el código de Visual Studio ( presione F1➤ tipo reload window➤ presione Enter)
Alex Logvin
fuente
Si desea espacios en lugar de pestañas, modifique el formatter.jsonarchivo: coloque un espacio entre comillas en lugar de \t(Así se "\t"convirtió " ") y coloque 4 donde vea 1 . Así que puedes venir así "indent_size": 4, "indent_char": " " "indent_size": 4, "indentCharacter": " ", "indent_char": " ", "indent_size": 4, "indent_char": " ", "indent_character": " "
Alex Logvin el
1
El paso RELOAD WINDOW era lo que me faltaba. Frustrante por haber pasado por el proceso de marcar casillas y jugar con la configuración 3 veces para que no haya cambios, cuando todo lo que tenía que hacer era volver a cargar la ventana. ¡Gracias por el consejo!
Rin y Len
8

En mi caso, el problema era la extensión JS-CSS-HTML Formatter instalada después de la actualización de enero. La indent_charpropiedad predeterminada es el espacio. Lo desinstalé y el comportamiento extraño se detiene.

Vinicios Torres
fuente
Oh sí, este fue el problema real para mí. Dedique mucho tiempo a modificar el código VS. finalmente deshabilitar esta extensión resolvió el problema.
Avijeet
8

Verifique esto desde la configuración oficial de vscode:

// Controls whether `editor.tabSize#` and `#editor.insertSpaces` will be automatically detected when a file is opened based on the file contents.
"editor.detectIndentation": true,

// The number of spaces a tab is equal to. This setting is overridden based on the file contents when `editor.detectIndentation` is on.
"editor.tabSize": 4,

// Config the editor that making the "space" instead of "tab"
"editor.insertSpaces": true,

// Configure editor settings to be overridden for [html] language.
"[html]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.autoIndent": false
}
Xin
fuente
7

Las configuraciones a continuación me han funcionado bien,

"editor.insertSpaces": false,
"editor.formatOnSave": true, // only if you want auto fomattting on saving the file
"editor.detectIndentation": false

La configuración anterior se reflejará y se aplicará a todos los archivos. No necesita sangrar / formatear todos los archivos manualmente.

Rohan Kumar
fuente
3

Archivo -> Preferencias -> Configuración o simplemente presione Ctrl+ ,y busque espacios , luego simplemente desactive esta opción:

ingrese la descripción de la imagen aquí

Tuve que volver a abrir el archivo para que los cambios surtan efecto.

lama12345
fuente
1
  1. Resalta tu Código (en archivo)
  2. Haga clic en Tamaño de pestaña en la esquina inferior derecha de la ventana de la aplicación Tamaño de pestaña en la esquina inferior derecha de la imagen de la ventana de la aplicación
  3. Seleccione la sangría de conversión adecuada en pestañas Seleccione la imagen adecuada Convertir sangría a pestañas
RealScatman
fuente
1

Si desea cambiar las pestañas a espacios en una gran cantidad de archivos, pero no quiere abrirlos individualmente, he descubierto que funciona igual de bien simplemente usar la opción Buscar y reemplazar de la barra de herramientas de la izquierda.

En el primer cuadro ( Find), copie y pegue una pestaña del código fuente.

En el segundo cuadro ( Replace), ingrese el número de espacios que desea usar (es decir, 2 o 4).

Si presiona el ...botón, puede especificar directorios para incluir o ignorar (es decir,src/Data/Json ).

Finalmente, inspeccione la vista previa del resultado y presione Reemplazar todo . Todos los archivos en el espacio de trabajo pueden verse afectados.

kvanberendonck
fuente
0
{
  "editor.insertSpaces": true
}

True funciona para mi.

ilovethedrama
fuente