EditorConfig & Configurações do VS Code

Q: Quais extensões do VS Code devo recomendar para um projeto Next.js?

esbenp.prettier-vscode -- Formatador Prettier dbaeumer.vscode-eslint -- Integração ESLint bradlc.vscode-tailwindcss -- Tailwind IntelliSense yoavbls.pretty-ts-errors -- Erros TypeScript legíveis

Q: Como configuro as preferências de importação automática do TypeScript no VS Code?

"non-relative" usa aliases de caminho (@/components) em vez de ../../../. autoImports habilita sugestões enquanto você digita.

Garanta um comportamento consistente do editor em sua equipe com EditorConfig, configurações de workspace do VS Code e extensões recomendadas.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

# Crie os três arquivos de configuração
touch .editorconfig
mkdir -p .vscode
touch .vscode/settings.json
touch .vscode/extensions.json

Quando usar isso: Qualquer projeto com vários contribuidores, especialmente quando os membros da equipe usam editores diferentes ou configurações de VS Code.

Exemplo de Trabalho

# .editorconfig
root = true
 
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
 
[*.md]
trim_trailing_whitespace = false
 
[Makefile]
indent_style = tab

// .vscode/settings.json
{
  // Formatação
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
 
  // Formatadores específicos de linguagem
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
 
  // ESLint
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
 
  // Arquivos
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "**/.next": true,
    "**/node_modules": true,
    "**/out": true
  },
 
  // TypeScript
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.suggest.autoImports": true,
  "typescript.tsdk": "node_modules/typescript/lib"
}

// .vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-rename-tag",
    "yoavbls.pretty-ts-errors",
    "streetsidesoftware.code-spell-checker"
  ]
}

O que isso demonstra:

.editorconfig garante que as configurações básicas do editor (indentação, finais de linha) funcionem em todos os editores
.vscode/settings.json configura a formatação ao salvar, integração com ESLint e preferências do TypeScript
.vscode/extensions.json solicita aos membros da equipe que instalem extensões recomendadas

Mergulho Profundo

Como Funciona

EditorConfig é um padrão suportado pela maioria dos editores (VS Code, IntelliJ, Vim, etc.) sem plugins (VS Code precisa da extensão EditorConfig.EditorConfig)
.vscode/settings.json na raiz do projeto atua como configurações de workspace, substituindo as configurações do usuário para este projeto
.vscode/extensions.json aciona um prompt de "extensões recomendadas" quando os membros da equipe abrem o projeto
Formatação ao salvar executa o formatador configurado sempre que você salva um arquivo
source.fixAll.eslint executa a correção automática do ESLint ao salvar, corrigindo problemas de linting juntamente com a formatação

Variações

Para Biome em vez de Prettier + ESLint:

// .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

// .vscode/extensions.json
{
  "recommendations": [
    "biomejs.biome",
    "bradlc.vscode-tailwindcss"
  ]
}

Desativando formatação ao salvar para linguagens específicas:

{
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

Referência de opções do EditorConfig:

Opção	Valores	O Que Faz
`indent_style`	`space` ou `tab`	Tipo de indentação
`indent_size`	número	Espaços por nível de indentação
`end_of_line`	`lf` ou `crlf`	Estilo de final de linha
`charset`	`utf-8`	Codificação do arquivo
`trim_trailing_whitespace`	`true` ou `false`	Remove espaços em branco no final de linha ao salvar
`insert_final_newline`	`true` ou `false`	Garante que o arquivo termine com uma nova linha

Notas sobre TypeScript

// Configurações do VS Code que melhoram a DX do TypeScript:
// - "typescript.preferences.importModuleSpecifier": "non-relative"
//   → Usa aliases de caminho (@/components) em vez de ../../../
//
// - "typescript.suggest.autoImports": true
//   → Sugestões de importação automática enquanto você digita
//
// - "typescript.tsdk": "node_modules/typescript/lib"
//   → Usa a versão do TypeScript do projeto, não a integrada do VS Code

Armadilhas

Coisas que vão te morder. Cada armadilha inclui o que dá errado, por que acontece e a correção.

Conflitos entre EditorConfig e Prettier - EditorConfig define indent_size = 4 mas o Prettier usa tabWidth: 2. O Prettier vence para arquivos formatados, mas novos arquivos criados pelo editor usam o valor do EditorConfig. Correção: Mantenha as configurações do EditorConfig e do Prettier sincronizadas.
.vscode/ em .gitignore - Alguns templates adicionam .vscode/ ao .gitignore. Correção: Commite .vscode/settings.json e .vscode/extensions.json para consistência da equipe. Adicione .vscode/*.code-workspace e .vscode/launch.json ao .gitignore em vez disso (esses são pessoais).
Formatação ao salvar não funciona - Múltiplos formatadores estão instalados e o VS Code não sabe qual usar. Correção: Defina "editor.defaultFormatter" globalmente e por linguagem. O VS Code solicita que você escolha quando há ambiguidade.
Correção ESLint ao salvar entra em conflito com formatação ao salvar - Ambos são executados ao salvar e podem produzir alterações concorrentes. Correção: Use eslint-config-prettier para desativar as regras de formatação do ESLint, para que o ESLint apenas corrija problemas de qualidade de código ao salvar.

Alternativas

Outras maneiras de resolver o mesmo problema - e quando cada uma é a melhor escolha.

Alternativa	Use Quando	Não Use Quando
Apenas `.editorconfig`	A equipe usa editores mistos (VS Code, IntelliJ, Vim)	Você quer formatação ao salvar e recomendações de extensão
Apenas `.vscode/settings.json`	Todos usam VS Code	Membros da equipe usam outros editores
`devcontainers`	Você quer um ambiente de desenvolvimento totalmente reproduzível, incluindo extensões	A sobrecarga da configuração do contêiner é muito alta

FAQs

Qual é a diferença entre EditorConfig e Prettier?

EditorConfig define o comportamento básico do editor (estilo de indentação, finais de linha, espaços em branco no final de linha) em todos os editores.
Prettier é um formatador de código que reimprime arquivos inteiros com estilo consistente.
EditorConfig afeta novas digitações; Prettier reformata o código existente.
Use ambos e mantenha suas configurações sincronizadas.

Devo commitar .vscode/settings.json no repositório?

Sim. As configurações de workspace garantem um comportamento consistente do editor para a equipe.
Commite settings.json e extensions.json.
Adicione arquivos pessoais como launch.json e *.code-workspace ao .gitignore.

O que source.fixAll.eslint faz ao salvar?

Ele executa a correção automática do ESLint em cada salvamento de arquivo.
Combinado com a formatação ao salvar, ele corrige problemas de qualidade de código e formatação.
Use eslint-config-prettier para evitar conflitos entre os dois.

Armadilha: O que acontece se EditorConfig e Prettier usarem tamanhos de indentação diferentes?

O Prettier vence para os arquivos que ele formata (ele ignora o EditorConfig).
Mas novos arquivos criados pelo editor usam o valor do EditorConfig antes que o Prettier seja executado.
Mantenha indent_size em .editorconfig e tabWidth em .prettierrc idênticos.

Como desativo a formatação ao salvar para arquivos markdown?

{
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

Quais extensões do VS Code devo recomendar para um projeto Next.js?

esbenp.prettier-vscode -- Formatador Prettier
dbaeumer.vscode-eslint -- Integração ESLint
bradlc.vscode-tailwindcss -- Tailwind IntelliSense
yoavbls.pretty-ts-errors -- Erros TypeScript legíveis

Como funciona .vscode/extensions.json?

Quando os membros da equipe abrem o projeto, o VS Code os notifica para instalar as extensões recomendadas.
Não força a instalação, apenas sugere.
Liste as extensões pelo seu ID no marketplace no array recommendations.

O que typescript.tsdk faz nas configurações do VS Code?

{ "typescript.tsdk": "node_modules/typescript/lib" }

Ele informa ao VS Code para usar a versão do TypeScript do projeto em vez de sua versão integrada.
Isso garante que a verificação de tipos corresponda ao que tsc produz no CI.

Armadilha: Por que a formatação ao salvar entra em conflito com a correção ESLint ao salvar?

Ambos são executados ao salvar e podem produzir alterações concorrentes.
O Prettier formata o arquivo, então o ESLint tenta reformatá-lo de maneira diferente.
Use eslint-config-prettier para desativar as regras de formatação do ESLint para que o ESLint apenas corrija problemas de qualidade de código.

O EditorConfig funciona em outros editores além do VS Code?

Sim. O EditorConfig é suportado por IntelliJ, Vim, Sublime Text e a maioria dos editores modernos.
O VS Code requer a extensão EditorConfig.EditorConfig.
Isso o torna ideal para equipes com preferências de editor mistas.

Como configuro as preferências de importação automática do TypeScript no VS Code?

{
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.suggest.autoImports": true
}

"non-relative" usa aliases de caminho (@/components) em vez de ../../../.
autoImports habilita sugestões enquanto você digita.

Quais opções do EditorConfig são mais importantes?

Opção	Recomendado
`indent_style`	`space`
`indent_size`	`2`
`end_of_line`	`lf`
`insert_final_newline`	`true`
`trim_trailing_whitespace`	`true`

Relacionados

Configuração do Prettier - formatação ao salvar requer configuração do Prettier
Configuração do ESLint para Next.js - configuração de correção ESLint ao salvar
Integração ESLint + Prettier - evite conflitos com formatação ao salvar
Husky & lint-staged - captura o que a formatação ao salvar perde

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

# Crie os três arquivos de configuração
touch .editorconfig
mkdir -p .vscode
touch .vscode/settings.json
touch .vscode/extensions.json

Quando usar isso: Qualquer projeto com vários contribuidores, especialmente quando os membros da equipe usam editores diferentes ou configurações de VS Code.

Exemplo de Trabalho

# .editorconfig
root = true
 
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
 
[*.md]
trim_trailing_whitespace = false
 
[Makefile]
indent_style = tab

// .vscode/settings.json
{
  // Formatação
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
 
  // Formatadores específicos de linguagem
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
 
  // ESLint
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
 
  // Arquivos
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "**/.next": true,
    "**/node_modules": true,
    "**/out": true
  },
 
  // TypeScript
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.suggest.autoImports": true,
  "typescript.tsdk": "node_modules/typescript/lib"
}

// .vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "formulahendry.auto-rename-tag",
    "yoavbls.pretty-ts-errors",
    "streetsidesoftware.code-spell-checker"
  ]
}

O que isso demonstra:

.editorconfig garante que as configurações básicas do editor (indentação, finais de linha) funcionem em todos os editores
.vscode/settings.json configura a formatação ao salvar, integração com ESLint e preferências do TypeScript
.vscode/extensions.json solicita aos membros da equipe que instalem extensões recomendadas

Mergulho Profundo

Como Funciona

EditorConfig é um padrão suportado pela maioria dos editores (VS Code, IntelliJ, Vim, etc.) sem plugins (VS Code precisa da extensão EditorConfig.EditorConfig)
.vscode/settings.json na raiz do projeto atua como configurações de workspace, substituindo as configurações do usuário para este projeto
.vscode/extensions.json aciona um prompt de "extensões recomendadas" quando os membros da equipe abrem o projeto
Formatação ao salvar executa o formatador configurado sempre que você salva um arquivo
source.fixAll.eslint executa a correção automática do ESLint ao salvar, corrigindo problemas de linting juntamente com a formatação

Variações

Para Biome em vez de Prettier + ESLint:

// .vscode/settings.json
{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

// .vscode/extensions.json
{
  "recommendations": [
    "biomejs.biome",
    "bradlc.vscode-tailwindcss"
  ]
}

Desativando formatação ao salvar para linguagens específicas:

{
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

Referência de opções do EditorConfig:

Opção	Valores	O Que Faz
`indent_style`	`space` ou `tab`	Tipo de indentação
`indent_size`	número	Espaços por nível de indentação
`end_of_line`	`lf` ou `crlf`	Estilo de final de linha
`charset`	`utf-8`	Codificação do arquivo
`trim_trailing_whitespace`	`true` ou `false`	Remove espaços em branco no final de linha ao salvar
`insert_final_newline`	`true` ou `false`	Garante que o arquivo termine com uma nova linha

Notas sobre TypeScript

// Configurações do VS Code que melhoram a DX do TypeScript:
// - "typescript.preferences.importModuleSpecifier": "non-relative"
//   → Usa aliases de caminho (@/components) em vez de ../../../
//
// - "typescript.suggest.autoImports": true
//   → Sugestões de importação automática enquanto você digita
//
// - "typescript.tsdk": "node_modules/typescript/lib"
//   → Usa a versão do TypeScript do projeto, não a integrada do VS Code

Armadilhas

Coisas que vão te morder. Cada armadilha inclui o que dá errado, por que acontece e a correção.

Conflitos entre EditorConfig e Prettier - EditorConfig define indent_size = 4 mas o Prettier usa tabWidth: 2. O Prettier vence para arquivos formatados, mas novos arquivos criados pelo editor usam o valor do EditorConfig. Correção: Mantenha as configurações do EditorConfig e do Prettier sincronizadas.
.vscode/ em .gitignore - Alguns templates adicionam .vscode/ ao .gitignore. Correção: Commite .vscode/settings.json e .vscode/extensions.json para consistência da equipe. Adicione .vscode/*.code-workspace e .vscode/launch.json ao .gitignore em vez disso (esses são pessoais).
Formatação ao salvar não funciona - Múltiplos formatadores estão instalados e o VS Code não sabe qual usar. Correção: Defina "editor.defaultFormatter" globalmente e por linguagem. O VS Code solicita que você escolha quando há ambiguidade.
Correção ESLint ao salvar entra em conflito com formatação ao salvar - Ambos são executados ao salvar e podem produzir alterações concorrentes. Correção: Use eslint-config-prettier para desativar as regras de formatação do ESLint, para que o ESLint apenas corrija problemas de qualidade de código ao salvar.

Alternativas

Outras maneiras de resolver o mesmo problema - e quando cada uma é a melhor escolha.

Alternativa	Use Quando	Não Use Quando
Apenas `.editorconfig`	A equipe usa editores mistos (VS Code, IntelliJ, Vim)	Você quer formatação ao salvar e recomendações de extensão
Apenas `.vscode/settings.json`	Todos usam VS Code	Membros da equipe usam outros editores
`devcontainers`	Você quer um ambiente de desenvolvimento totalmente reproduzível, incluindo extensões	A sobrecarga da configuração do contêiner é muito alta

FAQs

Qual é a diferença entre EditorConfig e Prettier?

EditorConfig define o comportamento básico do editor (estilo de indentação, finais de linha, espaços em branco no final de linha) em todos os editores.
Prettier é um formatador de código que reimprime arquivos inteiros com estilo consistente.
EditorConfig afeta novas digitações; Prettier reformata o código existente.
Use ambos e mantenha suas configurações sincronizadas.

Devo commitar .vscode/settings.json no repositório?

Sim. As configurações de workspace garantem um comportamento consistente do editor para a equipe.
Commite settings.json e extensions.json.
Adicione arquivos pessoais como launch.json e *.code-workspace ao .gitignore.

O que source.fixAll.eslint faz ao salvar?

Ele executa a correção automática do ESLint em cada salvamento de arquivo.
Combinado com a formatação ao salvar, ele corrige problemas de qualidade de código e formatação.
Use eslint-config-prettier para evitar conflitos entre os dois.

Armadilha: O que acontece se EditorConfig e Prettier usarem tamanhos de indentação diferentes?

O Prettier vence para os arquivos que ele formata (ele ignora o EditorConfig).
Mas novos arquivos criados pelo editor usam o valor do EditorConfig antes que o Prettier seja executado.
Mantenha indent_size em .editorconfig e tabWidth em .prettierrc idênticos.

Como desativo a formatação ao salvar para arquivos markdown?

{
  "[markdown]": {
    "editor.formatOnSave": false
  }
}

Quais extensões do VS Code devo recomendar para um projeto Next.js?

esbenp.prettier-vscode -- Formatador Prettier
dbaeumer.vscode-eslint -- Integração ESLint
bradlc.vscode-tailwindcss -- Tailwind IntelliSense
yoavbls.pretty-ts-errors -- Erros TypeScript legíveis

Como funciona .vscode/extensions.json?

Quando os membros da equipe abrem o projeto, o VS Code os notifica para instalar as extensões recomendadas.
Não força a instalação, apenas sugere.
Liste as extensões pelo seu ID no marketplace no array recommendations.

O que typescript.tsdk faz nas configurações do VS Code?

{ "typescript.tsdk": "node_modules/typescript/lib" }

Ele informa ao VS Code para usar a versão do TypeScript do projeto em vez de sua versão integrada.
Isso garante que a verificação de tipos corresponda ao que tsc produz no CI.

Armadilha: Por que a formatação ao salvar entra em conflito com a correção ESLint ao salvar?

Ambos são executados ao salvar e podem produzir alterações concorrentes.
O Prettier formata o arquivo, então o ESLint tenta reformatá-lo de maneira diferente.
Use eslint-config-prettier para desativar as regras de formatação do ESLint para que o ESLint apenas corrija problemas de qualidade de código.

O EditorConfig funciona em outros editores além do VS Code?

Sim. O EditorConfig é suportado por IntelliJ, Vim, Sublime Text e a maioria dos editores modernos.
O VS Code requer a extensão EditorConfig.EditorConfig.
Isso o torna ideal para equipes com preferências de editor mistas.

Como configuro as preferências de importação automática do TypeScript no VS Code?

{
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.suggest.autoImports": true
}

"non-relative" usa aliases de caminho (@/components) em vez de ../../../.
autoImports habilita sugestões enquanto você digita.

Quais opções do EditorConfig são mais importantes?

Opção	Recomendado
`indent_style`	`space`
`indent_size`	`2`
`end_of_line`	`lf`
`insert_final_newline`	`true`
`trim_trailing_whitespace`	`true`

Relacionados

Configuração do Prettier - formatação ao salvar requer configuração do Prettier
Configuração do ESLint para Next.js - configuração de correção ESLint ao salvar
Integração ESLint + Prettier - evite conflitos com formatação ao salvar
Husky & lint-staged - captura o que a formatação ao salvar perde

EditorConfig & Configurações do VS Code

Buscar na documentação

EditorConfig & Configurações do VS Code