Como posso personalizar o fator de conversão de tabulação em espaço?

Como personalizo o fator de conversão de tabulação em espaço ao usar o Código do Visual Studio?

Por exemplo, agora, em HTML, parece produzir dois espaços por pressão de TAB, mas no TypeScript produz 4.

Por padrão, o Visual Studio Code tentará adivinhar suas opções de recuo, dependendo do arquivo que você abrir.

Você pode desativar a adivinhação de recuo via "editor.detectIndentation": false.

Você pode personalizar isso facilmente através dessas três configurações para Windows no menu Arquivo → Preferências → Configurações do usuário e para Mac no menu Código → Preferências → Configurações ou ⌘,:

// 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

Estou executando a versão 1.21, mas acho que isso também pode se aplicar às versões anteriores.

Dê uma olhada no canto inferior direito da tela. Você deve ver algo que diz Spacesou Tab-Size.

Mina mostra espaços, →

1. Clique nos Espaços (ou Tab-Size )
2. Escolha Recuar usando espaços ou Recuar usando guias
3. Selecione a quantidade de espaços ou guias que você gosta.

Isso funciona apenas por documento, não em todo o projeto. Se você deseja aplicá-lo em todo o projeto, também precisa adicionar "editor.detectIndentation": falseàs suas configurações de usuário.

Bem, se você gosta da maneira do desenvolvedor, o Visual Studio Code permite especificar os diferentes tipos de arquivos para o tabSize. Aqui está o exemplo do meu settings.jsoncom quatro espaços padrão e JavaScript / JSON dois espaços:

{
  // 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
}

PS: Bem, se você não souber abrir este arquivo (especialmente em uma nova versão do Visual Studio Code), poderá:

1. Engrenagem inferior esquerda →
2. Configurações → canto superior direito Abrir Configurações

Por padrão, o Visual Studio Code detecta automaticamente o recuo do arquivo aberto atual. Se você deseja desativar esse recurso e fazer todo o recuo, por exemplo, dois espaços, faça o seguinte nas configurações do usuário ou do espaço de trabalho.

{
    "editor.tabSize": 2,

    "editor.detectIndentation": false
}

Podemos controlar o tamanho da guia por tipo de arquivo com o EditorConfig e sua extensão EditorConfig for VS Code . Em seguida, podemos tornar o Alt+ Shift+ Fespecífico para cada tipo de arquivo.

Instalação

ext install EditorConfig

Exemplo de configuração

.editorconfig

[*]
indent_style = space

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

[*.java]
indent_size = 4

[*.go]
indent_style = tab

settings.json

EditorConfig substitui quaisquer configurações.json configuradas para o editor. Não há necessidade de mudar editor.detectIndentation.

Se você usar a extensão mais bonita no Visual Studio Code, tente adicionar isso ao arquivo settings.json:

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

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

No Visual Studio Code versão 1.31.1 ou posterior (eu acho): como o sed Alex Dima , você pode personalizá-lo facilmente através dessas configurações para

• Windows no menu Arquivo → Preferências → Configurações do usuário ou use as teclas de atalho Ctrl+ Shift+P
• Mac no menu Código → Preferências → Configurações ou ⌘,

Você quer ter certeza de que o editorconfig não está em conflito com a configuração do usuário ou da área de trabalho, pois fiquei um pouco aborrecido ao pensar que as configurações dos arquivos de configuração não estavam sendo aplicadas quando a configuração do editor estava desfazendo essas alterações.

Isso é o lonefy.vscode-js-css-html-formatterculpado. Desative-o e instale HookyQR.beautify.

Agora, ao salvar, suas guias não serão convertidas.

No canto inferior direito, você tem Espaços: Espaços: 2

Lá você pode alterar o recuo de acordo com suas necessidades: Opções de recuo

Ao usar o TypeScript, a largura da guia padrão é sempre duas, independentemente do que diz na barra de ferramentas. Você precisa definir "prettier.tabWidth" nas configurações do usuário para alterá-lo.

Ctrl+ P, Digite → configurações do usuário, adicione:

"prettier.tabWidth": 4

Se a resposta aceita nesta postagem não funcionar, tente:

Eu tinha o EditorConfig for Visual Studio Code instalado no meu editor e ele substituía as configurações do usuário que eram definidas para recuar arquivos usando espaços. Toda vez que eu alternava entre as guias do editor, meu arquivo era automaticamente recuado com as guias, mesmo que eu tivesse convertido o recuo em espaços !!!

Logo após desinstalar esta extensão, o recuo não muda mais entre as guias do editor de comutação e posso trabalhar com mais conforto, em vez de ter que converter manualmente as guias em espaços toda vez que troco de arquivo - isso é doloroso.

Já existem muitas boas respostas fornecidas pelos nossos queridos membros da comunidade. Na verdade, eu queria adicionar o tabSize do código C # e encontrei esse segmento. Encontrei muitas soluções e os documentos oficiais do VS Code são impressionantes. Eu só quero compartilhar minha configuração de c #:

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

basta copiar e colar o código acima no seu settings.jsonarquivo e salvar. obrigado

Arquivo de menu → Preferências → Configurações

Adicionar às configurações do usuário:

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

clique com o botão direito do mouse no documento se você já tiver um aberto e clique em Formatar documento para que o documento existente siga essas novas configurações.

A solução da @ alex-dima de 2015 alterará o tamanho e os espaços das guias para todos os arquivos e a solução da @ Tricky de 2016 parece alterar apenas as configurações do arquivo atual.

A partir de 2017, encontrei outra solução que funciona por idioma. O Visual Studio Code não estava usando os tamanhos de guia ou as configurações de espaço apropriados para o Elixir , portanto, descobri que era possível alterar as configurações de todos os arquivos do Elixir.

Cliquei no idioma na barra de status ("Elixir" no meu caso), escolhi "Definir configurações baseadas no idioma 'Elixir' ..." e editei as configurações de idioma específicas do Elixir. Eu apenas copiei as configurações "editor.tabSize" e "editor.insertSpaces" das configurações padrão à esquerda (fico feliz que elas sejam mostradas) e as modifiquei à direita.

Funcionou muito bem, e agora todos os arquivos de idioma do Elixir usam o tamanho apropriado da guia e as configurações de espaço.

Eu tive que fazer muitas edições de configurações como as respostas anteriores, então não sei o que fez funcionar depois de muitas modificações.

Nada funcionou até que eu fechados e openen meu IDE, mas os últimos três coisas que fiz foi desativar a lonefy.vscode-js-css-html-formatter, "html.format.enable": true,e reinicie o 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,
}

Se for para o Angular 2, e a CLI estiver gerando arquivos que você gostaria de formatar de forma diferente, você pode editar esses arquivos para alterar o que é gerado:

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

Não recomendado massivamente, pois uma atualização npm excluirá o seu trabalho, mas economizou muito tempo.

Tentei alterar o editor .tabSizepara 4, mas .editorConfigsubstitui as configurações especificadas, portanto não há necessidade de alterar nenhuma configuração nas configurações do usuário. Você só precisa editar o arquivo .editorConfig:

set indent_size = 4

User3550138 está correto. lonefy.vscode-js-css-html-formattersubstitui todas as configurações mencionadas em outras respostas. No entanto, você não precisa desativá-lo ou desinstalá-lo, pois ele pode ser configurado.

É possível encontrar instruções completas abrindo a barra lateral das extensões e clicando nessa extensão e ele exibirá instruções de configuração na área de trabalho do editor. Pelo menos para mim no Visual Studio Code versão 1.14.1.