¿Cómo cambiar la sangría en Visual Studio Code?


345

Para cada archivo mecanografiado, el código visual de estudio utiliza una sangría automática de 8 espacios. Esto es demasiado para mi gusto, pero no puedo encontrar dónde cambiarlo.

Tal vez esté disponible como configuración, pero con un nombre diferente, ya que no puedo encontrar nada relacionado con la sangría.

ACTUALIZAR

Actualmente estoy usando el formateador de código Prettier y eso resuelve todos los problemas de formato al formatear automáticamente al guardar (si no hay un error de sintaxis)

Respuestas:


114

Puede cambiar esto a Usernivel global o Workspacenivel.

Abra la configuración: Usando el acceso directo ctrl + ,o haciendo clic File> Preferences> Settingscomo se muestra a continuación.

Configuraciones en el menú VS Code

Luego, realice los siguientes 2 cambios: (escriba tabSizeen la barra de búsqueda)

  1. Desmarca la casilla de verificación de Detect Indentation
  2. Cambie el tamaño de la pestaña a 2/4 (aunque creo firmemente que 2 es correcto para JS :))

ingrese la descripción de la imagen aquí


1
Por favor, use 4 espacios para la sangría.
Bohdan Kuts

44
@BohdanKuts, ja, ja, este será un argumento interminable
Xin

Sí :) Hice un poco de búsqueda para eso y encontré por qué se convirtió en 2 espacios. Y para mí la razón parece anticuada, así que recomendaré usar 4 espacios con seguridad.
Bohdan Kuts

1
Esto es subjetivo y no tiene ninguna ventaja real, mantengo 2 espacios para algunos tipos de archivos como js, ​​html y css, y 3 espacios para el código, solo para facilitar la lectura. En HTML y XML con 4 espacios, deberá desplazarse hacia la derecha muy pronto.
Pablo Pazos

574

En la barra de herramientas en la esquina inferior derecha, verá un elemento similar al siguiente: ingrese la descripción de la imagen aquí Después de hacer clic en él, tendrá la opción de sangrar usando espacios o pestañas. Después de seleccionar su tipo de sangría, tendrá la opción de cambiar el tamaño de una sangría. En el caso del ejemplo anterior, la sangría se establece en 4 caracteres de espacio por sangría. Si selecciona la pestaña como su carácter de sangría, verá Tamaño de pestaña en lugar de Espacios

Si desea que esto se aplique a todos los archivos y no a un archivo individual, anule la configuración Editor: Tab Sizey Editor: Insert Spacesen la Configuración del usuario o en la Configuración del área de trabajo, según sus necesidades.

Editar 1

Para acceder a la configuración de su usuario o área de trabajo, vaya a Preferencias -> Configuración . Verifique que esté en la pestaña Usuario o Espacio de trabajo según sus necesidades y use la barra de búsqueda para ubicar la configuración. Es posible que también desee deshabilitar Editor: Detect Indentationya que esta configuración anulará lo que configuró Editor: Insert Spacesy Editor: Tab Sizecuándo está habilitado


El enlace de la imagen está roto.

34
Cambiando editor.tabSpacesno no cambiar el espacio de todos los archivos. Solo lo cambia para archivos creados en el futuro. Todavía no hay solución para arreglar todos los archivos en una sola acción.
Jacob Stamm

3
Guau. mente alucinada. a veces las cosas se esconden a simple vista
pingo

44
Esto es superintuitivo. Ya tengo una sangría establecida para usar espacios. ¿Por qué debo hacer clic en la opción de espacios para acceder a un segundo menú oculto para establecer la cantidad de espacios? Todos los demás editores que he usado son un clic en los detalles de sangría en la barra de estado y hay una opción de varios espacios. En VS Code, necesito buscar esto en Stack Overflow porque el menú que quiero está oculto detrás de una opción que no estoy tratando de cambiar.
ian.pvd

1
siempre parece volver al valor predeterminado de 4 espacios cada vez que creo un nuevo archivo?!?!
oldboy

143

Para cambiar la sangría según el lenguaje de programación :

  1. Abrir la paleta de comandos ( CtrlShiftP| macOS: P)
  2. Preferencias: la configuración del idioma específicos ... (id: comando workbench.action.configureLanguageBasedSettings)
  3. Seleccionar lenguaje de programación (por ejemplo, TypeScript)
  4. Agrega este código:

    "[typescript]": {
        "editor.tabSize": 2
    }
    

Ver también: VS Code Docs


¿Cómo (dónde) se usa el comando id? No veo "Configurar opciones específicas de idioma" en Preferencias de archivo.
Alan Baljeu

@AlanBaljeu puede usar la identificación de comando para atajos de teclado, extensiones, etc. Entonces, puede ir a Archivo > Preferencias > Atajos de teclado , pegar la ID a la entrada y asignar, por ejemplo, Ctrl + K Ctrl + L al comando.
Martin Schneider

55

También es posible que desee establecer el valor editor.detectIndentationen falso, además de la respuesta de Elliot-J.

VSCode sobrescribirá su configuración editor.tabSizey editor.insertSpacespor archivo si detecta que un archivo tiene una pestaña diferente o un patrón de sangría de espacios. Puede encontrarse con este problema si agrega archivos existentes a su proyecto, o si agrega archivos usando generadores de código como Angular Cli. La configuración anterior evita que VSCode lo haga.


44

Atajo de formato de código:

VSCode en Windows - Shift + Alt + F

VSCode en MacOS - Shift + Opción + F

VSCode en Ubuntu - Ctrl + Shift + I

También puede personalizar este acceso directo utilizando la configuración de preferencias si es necesario.

selección de columna con teclado Ctrl + Shift + Alt + Arrow


1
Shift + Alt + FCambié todas las sangrías en mi archivo de 8 espacios a mis 4 espacios predeterminados. Justo lo que estaba buscando :)
Harry12345

24

En mi caso, la extensión " EditorConfig for VS Code " anula la configuración de VSCode. Si lo tiene instalado, compruebe el archivo .editorconfig en la carpeta raíz del proyecto.

Aquí hay un ejemplo de configuración. "Indent_size" establece el número de espacios para una pestaña.

# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

7

Explicación simplificada con imágenes para aquellos que buscaron en Google "Cambiar sangría en el código VS"

Paso 1: haga clic en Preferencias> Configuración

ingrese la descripción de la imagen aquí

Paso 2: La configuración que está buscando es "Detectar sangría", comience a escribir eso. Haga clic en "Editor: Tamaño de pestaña"

ingrese la descripción de la imagen aquí

Paso 3: desplácese hacia abajo hasta "Editor: Tamaño de la pestaña" y escriba 2 (o lo que necesite).

ingrese la descripción de la imagen aquí



Los cambios se guardan automáticamente

ingrese la descripción de la imagen aquí

Ejemplo de mis cambios.

ingrese la descripción de la imagen aquí


6

Para configurar todos los archivos existentes y los archivos nuevos para la ideación de espacio en 2, simplemente colóquelo en su settingns.json (en la raíz de json):

"[typescript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features",
        "editor.tabSize": 2,
        "editor.insertSpaces": true,
        "editor.detectIndentation":false
 }

puede agregar el tipo de idioma de la configuración:

"[javascript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation":false
} 

En estos días uso prettier.js y el complemento js, ​​ya que se ocupa del espaciado y otras líneas largas, así como de casi cualquier otra cosa.
HMR

1
Gracias, increíble respuesta, la mejor manera para mí.
Swetabja Hazra

5

Cómo convertir sangrías de 4 espacios en todos los archivos en VS Code a 2 espacios

  • Abrir búsqueda de archivos
  • Activar expresiones regulares
  • Ingrese: ( {2})(?: {2})(\b|(?!=[,'";\.:\*\\\/\{\}\[\]\(\)]))en el campo de búsqueda
  • Ingrese: $1en el campo reemplazar

Cómo convertir sangrías de 2 espacios en todos los archivos en VS Code a 4 espacios

  • Abrir búsqueda de archivos
  • Activar expresiones regulares
  • Ingrese: ( {2})(\b|(?!=[,'";\.:\\*\\\/{\}\[\]\(\)]))en el campo de búsqueda
  • Ingrese: $1$1en el campo reemplazar

NOTA: Primero debe activar PERL Regex. Así es como:

  • Abra la configuración y vaya al archivo JSON
  • agregue lo siguiente al archivo JSON "search.usePCRE2": true

Espero que alguien vea esto.


1
Específicamente para VS Code, también hay una extensión para convertir 4 a 2 espacios.
Tanius

4

Problema: la respuesta aceptada en realidad no corrige la sangría en el documento actual.

Solución: Ejecute Format Documentpara volver a procesar el documento de acuerdo con la configuración actual (nueva).

Problema: Los documentos HTML en mis proyectos son de tipo "Django HTML" no "HTML" y no hay ningún formateador disponible.

Solución: cámbielos a la sintaxis "HTML", formateelos y luego vuelva a "Django HTML".

Problema: El formateador HTML no sabe cómo manejar las etiquetas de plantilla de Django y deshace gran parte de mi anidamiento cuidadosamente aplicado.

Solución: instale la extensión Indent 4-2 , que realiza una sangría estrictamente, sin tener en cuenta la sintaxis del idioma actual (que es lo que quiero en este caso).


2

Quería cambiar la sangría de mi archivo HTML existente de 4 espacios a 2 espacios.

Hice clic en el botón 'Espacios: 4' en la barra de estado y los cambié a dos en el siguiente cuadro de diálogo.

Yo uso la extensión 'vim'. No sé cómo volver a sangrar sin vim

Para volver a sangrar mi archivo actual, utilicé esto:

gg

=

G

0

Agregando: sí, puede usar la interfaz de usuario inferior derecha para configurar los ajustes de espacio. Pero si tiene un código existente que no está formateado con el nuevo espacio, puede hacer clic con el botón derecho en cualquier parte del archivo y hacer clic en Formatear documento . Me tomó un tiempo resolver esto hasta que me topé con este problema .

Menú de formato de documento

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.