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


854

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.

Respostas:


1361

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 ArquivoPreferênciasConfigurações do usuário e para Mac no menu CódigoPreferênciasConfiguraçõ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

1
Ei Guss, você gostaria de me indicar um arquivo em que a suposição está errada? Compartilhe também como você definiu essas duas configurações (tabSize e insertSpaces) e o que você esperaria obter. Obrigado! :)
Alex Dima

5
Eu configurei as duas configurações para "automático" e o comportamento não é o esperado (embora eu não vá tão longe quanto chamar isso de "errado"). Eu não sei o arquivo deve ser alterado para suportar minha convenção, mas eu abri um bilhete uservoice para que , como sugerido na resposta à pergunta # 30057721
Guss

4
Existe também uma opção para definir o padrão para novos arquivos em branco? Não há muito para adivinhar nesse cenário e acho VSCode será o padrão para usar os espaços (que eu não preferir) ...
Stijn de Witt

Fwiw, também há uma opção de configurações do local de trabalho para que você possa definir um comportamento diferente por projeto que substitua as configurações do usuário. 2 ¢
ruffin

1
Obrigado ruffin. Existe uma maneira de mudar tabSizepor idioma? por exemplo, ao editar vários arquivos com idiomas diferentes no mesmo espaço de trabalho (por exemplo, Ruby, JavaScript, CSS, etc.) - Ruby seria 2espaços, mas CSS seria 4... normalmente.
Jacob Barnard

693

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, →

Digite a descrição da imagem aqui

  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.


como é feito # 3? Depois de escolher o item 2, não parece haver uma maneira de "selecionar a quantidade de espaços que você gosta". Obrigado.
Chris22 22/03

Todo o tempo eu pensava: "Isso deve ser possível de alguma forma ..." Isso explica como.
vlz

189

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

 

Digite a descrição da imagem aqui


105

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
}

57

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.


Do que extvocê está falando (responda editando sua resposta, não aqui nos comentários (conforme apropriado))? Alguma coisa do Node.js? Qual plataforma?
Peter Mortensen

12

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

8

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 ArquivoPreferênciasConfigurações do usuário ou use as teclas de atalho Ctrl+ Shift+P
  • Mac no menu CódigoPreferênciasConfigurações ou ,

Digite a descrição da imagem aqui

Digite a descrição da imagem aqui


7

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.


7

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

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



4

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

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.


4

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


1
Sim, este é o caminho a seguir, se você deseja definir um formato diferente para um idioma específico. Eu gosto de usar guias com tabWidth = 2, mas o autopep8 odeia isso.
Abhishek Kasireddy 17/04

2

Arquivo de menu → PreferênciasConfiguraçõ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.


2

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.


1

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,
}

0

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.


0

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

-1

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.