visual-studio-code - reiniciar - visual studio code español

¿Cómo personalizar el factor de conversión de tabulación a espacio?

Question

¿Cómo personalizar el factor de conversión de tabulación a espacio cuando se usa Visual Studio Code?

Por ejemplo, en este momento en HTML parece producir dos espacios por pulsación de TAB , pero en TypeScript produce 4.

Answer 1

Bueno, si te gusta la forma de desarrollador, Visual Studio Code te permite especificar el tipo de archivo diferente para tabSize . Aquí está el ejemplo de mi settings.json con 4 espacios predeterminados y espacios JavaScript / JSON 2:

{
  // I want my default to be 4, but JS/JSON to be 2
  "editor.tabSize": 4,
  "[javascript]": {
    "editor.tabSize": 2
  },
  "[json]": {
    "editor.tabSize": 2
  }
}

PD: Bueno, si no sabes cómo abrir este archivo (especialmente en la nueva versión de vscode), puedes:

left-bottom gear -> Settings -> Desplácese hasta la parte inferior y haga clic Edit in settings.json

Answer 2

Cuando se usa TypeScript, el ancho de pestaña predeterminado siempre es dos, independientemente de lo que dice en la barra de herramientas. Debe cambiar "prettier.tabWidth" en su configuración de usuario para cambiarlo.

Ctrl + P , Tipo → configuración de usuario, agregue:

"prettier.tabWidth": 4

Answer 3

De forma predeterminada, Visual Studio Code detecta automáticamente la sangría del archivo abierto actual. Si desea desactivar esta función y hacer toda la sangría, por ejemplo, dos espacios, debe hacer lo siguiente en la Configuración del usuario o en la Configuración del espacio de trabajo.

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

Answer 4

De forma predeterminada, Visual Studio Code intentará adivinar sus opciones de sangría según el archivo que abra.

Puede desactivar la adivinación de sangría a través de "editor.detectIndentation": false .

Puede personalizar esto fácilmente a través de estas tres configuraciones para Windows en el menú Archivo → Preferencias → Configuración de usuario y para Mac en el menú Código → Preferencias → Configuración o ⌘,

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

// Insert spaces when pressing Tab. This setting is overriden
// based on the file contents when `editor.detectIndentation` is true.
"editor.insertSpaces": true,

// When opening a file, `editor.tabSize` and `editor.insertSpaces`
// will be detected based on the file contents. Set to false to keep
// the values you''ve explicitly set, above.
"editor.detectIndentation": false

Answer 5

Desea asegurarse de que su configuración de editor no entre en conflicto con la configuración de configuración de su usuario o área de trabajo, ya que me molestó un poco pensar que la configuración de los archivos de configuración no se aplicaba cuando era la configuración de mi editor deshaciendo esos cambios.

Answer 6

El usuario 3550138 es correcto. lonefy.vscode-js-css-html-formatter anula todas las configuraciones mencionadas en otras respuestas. Sin embargo, no tiene que deshabilitarlo o desinstalarlo, ya que se puede configurar.

Puede encontrar instrucciones completas abriendo la barra lateral de extensiones y haciendo clic en esta extensión y mostrará las instrucciones de configuración en el espacio de trabajo del editor. Al menos lo hace para mí en Visual Studio Code versión 1.14.1.

Answer 7

En VSC versión 1.31.1 o más (creo). Como sed Alex Dima . Puede personalizar esto fácilmente a través de estas configuraciones para

• Windows en el menú Archivo → Preferencias → Configuración de usuario o use las teclas cortas ctr + shift + p
• Mac en el menú Código → Preferencias → Configuración o ⌘,

Answer 8

En su esquina inferior derecha, tiene Espacios: Espacios: 2

Allí puede cambiar la sangría según sus necesidades: Opciones de sangría

Answer 9

Eso es lonefy.vscode-js-css-html-formatter . Deshabilítelo e instale HookyQR.beautify .

Ahora al guardar sus pestañas no se convertirán.

Answer 10

Estoy ejecutando la versión 1.21 pero creo que esto también puede aplicarse a versiones anteriores.

Eche un vistazo a la parte inferior derecha de la pantalla. Debería ver algo que dice Spaces o Tab-Size .

La mía muestra espacios, ->

1. Haga clic en los Spaces (o Tab-Size )
2. Elija Indent Using Spaces o Indent using Tabs
3. Seleccione la cantidad de espacios o pestañas que desee.

Esto solo funciona por documento, no en todo el proyecto. Si desea aplicarlo en todo el proyecto, también debe agregar "editor.detectIndentation": false a su configuración de usuario.

Answer 11

Intenté cambiar el editor .tabSize a 4, pero .editorConfig anula cualquier configuración que haya especificado, por lo que no hay necesidad de cambiar ninguna configuración en la configuración del usuario. Solo necesita editar el archivo .editorConfig:

set indent_size = 4

Answer 12

La solución de @ alex-dima a partir de 2015 cambiará el tamaño de las pestañas y los espacios para todos los archivos y la solución de @ Tricky a partir de 2016 parece cambiar solo la configuración del archivo actual.

A partir de 2017, encontré otra solución que funciona por idioma. Visual Studio Code no estaba usando los tamaños de pestaña o la configuración de espacio adecuados para Elixir, por lo que descubrí que podía cambiar la configuración de todos los archivos de Elixir.

Hice clic en el idioma en la barra de estado ("Elixir" en mi caso), elegí "Configurar la configuración basada en el idioma ''Elixir'' ..." y edité la configuración de idioma específica de Elixir. Acabo de copiar la configuración "editor.tabSize" y "editor.insertSpaces" de la configuración predeterminada a la izquierda (me alegra que se muestren) y luego las modifiqué a la derecha.

Funcionó muy bien, y ahora todos los archivos de idioma de Elixir usan el tamaño de pestaña y la configuración de espacio adecuados.

Answer 13

Podemos controlar el tamaño de la pestaña por tipo de archivo con EditorConfig y su extensión de Visual Studio Code . Entonces podemos hacer que Alt + Shift + F sea específico para cada tipo de archivo.

Instalación

ext install EditorConfig

Configuración de ejemplo

.editorconfig

[*]
indent_style = space

[*.{cs,js}]
indent_size = 4

[*.json]
indent_size = 2

settings.json

EditorConfig anula cualquier configuración de settings.json para el editor. No hay necesidad de cambiar editor.detectIndentation .

Answer 14

Si esto es para Angular 2, y la CLI está generando archivos con un formato diferente, puede editar estos archivos para cambiar lo que se genera:

npm_modules/@angular/cli/blueprints/component/files/__path__/*

No se recomienda masivamente ya que una actualización de npm eliminará su trabajo, pero me ha ahorrado mucho tiempo.

Answer 15

Si la respuesta aceptada en esta publicación no funciona, inténtalo:

Tenía EditorConfig for Visual Studio Code instalado en mi editor, y seguía anulando mi configuración de usuario que estaba configurada para sangrar archivos usando espacios. ¡Cada vez que cambiaba entre pestañas de editor, mi archivo se sangraba automáticamente con pestañas incluso si hubiera convertido la sangría en espacios!

Justo después de desinstalar esta extensión, la sangría ya no cambia entre cambiar las pestañas del editor, y puedo trabajar más cómodamente en lugar de tener que convertir manualmente las pestañas a espacios cada vez que cambio de archivo, eso es doloroso.

Answer 16

Si usa la extensión más bonita en vscode, intente agregar esto al archivo settings.json:

"editor.insertSpaces": false,
"editor.tabSize": 4, 
"editor.detectIndentation": false,

"prettier.tabWidth": 4,
"prettier.useTabs": true  // this made it finally work for me 

Answer 17

Archivo de menú → Preferencias → Configuración

Agregar a la configuración del usuario:

"editor.tabSize": 2,
"editor.detectIndentation": false

luego haga clic derecho en su documento si ya tiene uno abierto y haga clic en Formatear documento para que su documento existente siga estas nuevas configuraciones.