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

¿Cómo personalizo el factor de conversión de tabulación a espacio cuando uso Visual Studio Code?

Por ejemplo, en este momento en HTML parece producir dos espacios por pulsación de TAB, pero en TypeScript produce 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

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ías ver algo que dice Spaceso Tab-Size.

La mía muestra espacios, →

1. Haga clic en los espacios (o tamaño de tabulación )
2. Elija sangría usando espacios o sangría usando pestañas
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 agregarlo "editor.detectIndentation": falsea su configuración de usuario.

Bueno, si te gusta la forma de desarrollador, Visual Studio Code te permite especificar los diferentes tipos de archivos para tabSize. Aquí está el ejemplo de mi settings.jsoncon cuatro espacios predeterminados y JavaScript / JSON dos espacios:

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

  // This one forces the tab to be **space**
  "editor.insertSpaces": true
}

PD: Bueno, si no sabe cómo abrir este archivo (especialmente en una nueva versión de Visual Studio Code), puede:

1. Engranaje inferior izquierdo →
2. Configuración → arriba a la derecha Abrir Configuración

De manera 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 de usuario o en la Configuración del espacio de trabajo.

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

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

Instalación

ext install EditorConfig

Configuración de ejemplo

.editorconfig

[*]
indent_style = space

[*.{js,ts,json}]
indent_size = 2

[*.java]
indent_size = 4

[*.go]
indent_style = tab

settings.json

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

Si usa la extensión más bonita en Visual Studio Code, 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

En Visual Studio Code versión 1.31.1 o posterior (creo): Al igual que sed Alex Dima , puede personalizar esto fácilmente a través de esta configuración para

• Windows en el menú Archivo → Preferencias → Configuración de usuario o use teclas cortas Ctrl+ Shift+P
• Mac en el menú Código → Preferencias → Configuración o ⌘,

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.

Eso tiene la lonefy.vscode-js-css-html-formatterculpa. Deshabilítelo e instálelo HookyQR.beautify.

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

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

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

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 la configuración de usuario para cambiarlo.

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

"prettier.tabWidth": 4

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.

Ya hay muchas buenas respuestas proporcionadas por nuestros queridos miembros de la comunidad. De hecho, quería agregar el código C # tabSize y encontré este hilo. Encontré muchas soluciones y los documentos oficiales de VS Code son increíbles. Solo quiero compartir mi configuración de C #:

"[csharp]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 4
},

simplemente copie y pegue el código anterior en su settings.jsonarchivo y guárdelo. Gracias

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.

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.

Tuve que hacer muchas ediciones de configuración como las respuestas anteriores, por lo que no sé qué lo hizo funcionar después de muchas modificaciones.

Nada funcionó hasta que cerré y openen mi IDE, pero los últimos tres cosas que hice fue desactivar el lonefy.vscode-js-css-html-formatter, "html.format.enable": true,y reiniciar Visual Studio.

{
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "workbench.colorTheme": "Default Light+",
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features",
        "editor.tabSize": 2,
        "editor.detectIndentation": false,
        "editor.insertSpaces": true
    },
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
    "editor.tabSize": 2,
    "typescript.format.insertSpaceAfterConstructor": true,
    "files.autoSave": "afterDelay",
    "html.format.indentHandlebars": true,
    "html.format.indentInnerHtml": true,
    "html.format.enable": true,
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
}

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.

Intenté cambiar el editor .tabSizea 4, pero .editorConfiganulo cualquier configuración que haya especificado, por lo que no es necesario cambiar ninguna configuración en la configuración del usuario. Solo necesita editar el archivo .editorConfig:

set indent_size = 4

El usuario 3550138 es correcto. lonefy.vscode-js-css-html-formatteranula 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.