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

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)

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.

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 :))

En la barra de herramientas en la esquina inferior derecha, verá un elemento similar al siguiente: 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

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

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.

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

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

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

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"

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

Los cambios se guardan automáticamente

Ejemplo de mis cambios.

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
} 

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.

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

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

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