Configuração do Prettier

Q: Qual a diferença entre --check e --write?

--check sai com um código não zero se algum arquivo não estiver formatado (use na CI). --write formata os arquivos no local (use localmente). Nunca use --write na CI; isso modificaria arquivos sem commitá-los.

Q: Por que um arquivo .prettierignore é necessário?

Sem ele, o Prettier formata a saída de build (.next/), arquivos de lock e código gerado. Isso desperdiça tempo e pode produzir alterações indesejadas. Sempre crie .prettierignore para pular arquivos com os quais você não se importa.

Q: Armadilha: Por que o Prettier excede minha configuração de printWidth?

printWidth é uma diretriz, não um máximo rígido. Prettier otimiza para legibilidade, então strings longas, imports e props JSX podem excedê-lo. Aceite esse comportamento; impor limites de coluna estritos produziria uma formatação pior.

Q: Quais formatos de arquivo de configuração o Prettier suporta?

.prettierrc (JSON) .prettierrc.json, .prettierrc.js, .prettierrc.cjs, .prettierrc.mjs prettier.config.js Chave "prettier" em package.json

Q: Como adiciono a ordenação de classes do Tailwind CSS?

Este plugin deve ser listado por último no array plugins.

Instale e configure o Prettier para formatação de código consistente em seu projeto React e Next.js.

Receita

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

# Instalar Prettier
npm install --save-dev prettier
 
# Verificar formatação (amigável para CI, sai com erro em violações)
npx prettier --check .
 
# Formatar todos os arquivos
npx prettier --write .
 
# Formatar arquivos específicos
npx prettier --write "src/**/*.{ts,tsx,css,json}"

Quando usar isso: Todo projeto com mais de um contribuidor, ou qualquer projeto onde você queira parar de debater o estilo do código.

Exemplo de Trabalho

// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"]
}

# .prettierignore
node_modules/
.next/
out/
coverage/
pnpm-lock.yaml
package-lock.json
*.min.js

// scripts do package.json
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

// .vscode/settings.json (formatar ao salvar)
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

O que isso demonstra:

.prettierrc com configurações recomendadas para projetos React/Next.js
.prettierignore para pular a saída de build e arquivos de lock
Scripts npm para formatação e verificação
Configuração de formatar ao salvar no VS Code

Mergulho Profundo

Como Funciona

Prettier é um formatador de código opinativo - ele analisa seu código e o reimprime com um estilo consistente
Ele suporta TypeScript, JSX, CSS, JSON, Markdown e mais nativamente
O arquivo .prettierrc controla as opções; a maioria das equipes muda apenas alguns padrões
--check sai com um código não zero quando os arquivos não estão formatados (use na CI)
--write formata os arquivos no local

Variações

Opções chave explicadas:

Opção	Padrão	Recomendado	O Que Faz
`semi`	`true`	`true`	Adiciona ponto e vírgula no final das declarações
`singleQuote`	`false`	`false` ou `true`	Usa aspas simples em vez de duplas
`tabWidth`	`2`	`2`	Número de espaços por nível de indentação
`trailingComma`	`"all"`	`"all"`	Adiciona vírgulas finais onde for válido
`printWidth`	`80`	`80`	Comprimento da linha antes de quebrar
`bracketSpacing`	`true`	`true`	Espaços em literais de objeto `{ foo }`
`arrowParens`	`"always"`	`"always"`	Parênteses em torno de parâmetros de função de seta única
`endOfLine`	`"lf"`	`"lf"`	Estilo de final de linha

Ordenação de classes do Tailwind CSS:

npm install --save-dev prettier-plugin-tailwindcss

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Este plugin ordena automaticamente as classes do Tailwind na ordem recomendada.

Formatos de arquivo de configuração suportados:

.prettierrc (JSON)
.prettierrc.json
.prettierrc.js ou .prettierrc.cjs
.prettierrc.mjs
prettier.config.js
Chave "prettier" em package.json

Notas sobre TypeScript

// Prettier lida com formatação TypeScript nativamente.
// Nenhum parser ou plugin adicional é necessário para arquivos .ts e .tsx.
 
// Ele formata anotações de tipo, genéricos, interfaces e
// uniões de tipo de forma consistente:
type Props = {
  name: string;
  age: number;
  onSubmit: (data: FormData) => void;
};

Armadilhas

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

Conflitos com ESLint - Prettier e ESLint querem controlar a formatação. Executar ambos sem coordenação produz um loop de correção infinito. Correção: Use eslint-config-prettier para desabilitar as regras de formatação do ESLint. Veja Integração ESLint + Prettier.
printWidth não é um limite rígido - Prettier trata printWidth como uma diretriz, não um máximo. Strings longas, imports e props JSX podem excedê-lo. Correção: Aceite esse comportamento; Prettier otimiza para legibilidade, não limites de coluna estritos.
Formatar ao salvar não está funcionando - O VS Code pode estar usando um formatador padrão diferente. Correção: Defina "editor.defaultFormatter": "esbenp.prettier-vscode" e certifique-se de que a extensão esteja instalada.
.prettierignore é necessário - Sem ele, o Prettier formata a saída de build, arquivos de lock e código gerado. Correção: Sempre crie um arquivo .prettierignore, ou o Prettier perderá tempo em arquivos com os quais você não se importa.
A ordem de carregamento dos plugins importa - Se você usar vários plugins do Prettier, eles podem entrar em conflito. Correção: prettier-plugin-tailwindcss deve sempre ser listado por último no array plugins.

Alternativas

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

Alternativa	Use Quando	Não Use Quando
Biome	Você quer uma única ferramenta para linting e formatação	Você precisa de plugins Prettier (ex: ordenação Tailwind)
`dprint`	Você quer um formatador rápido baseado em Rust com mais opções de configuração	Você quer formatação opinativa sem configuração
Formatação apenas no Editor	Projeto solo com apenas um editor	Projeto em equipe ou aplicação de CI é necessária

FAQs

Qual a diferença entre --check e --write?

--check sai com um código não zero se algum arquivo não estiver formatado (use na CI).
--write formata os arquivos no local (use localmente).
Nunca use --write na CI; isso modificaria arquivos sem commitá-los.

Por que um arquivo .prettierignore é necessário?

Sem ele, o Prettier formata a saída de build (.next/), arquivos de lock e código gerado.
Isso desperdiça tempo e pode produzir alterações indesejadas.
Sempre crie .prettierignore para pular arquivos com os quais você não se importa.

Armadilha: Por que o Prettier excede minha configuração de printWidth?

printWidth é uma diretriz, não um máximo rígido.
Prettier otimiza para legibilidade, então strings longas, imports e props JSX podem excedê-lo.
Aceite esse comportamento; impor limites de coluna estritos produziria uma formatação pior.

Como configuro a formatação ao salvar no VS Code?

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Defina o formatador padrão globalmente e por idioma.

Quais formatos de arquivo de configuração o Prettier suporta?

.prettierrc (JSON)
.prettierrc.json, .prettierrc.js, .prettierrc.cjs, .prettierrc.mjs
prettier.config.js
Chave "prettier" em package.json

Como adiciono a ordenação de classes do Tailwind CSS?

npm install --save-dev prettier-plugin-tailwindcss

{ "plugins": ["prettier-plugin-tailwindcss"] }

Este plugin deve ser listado por último no array plugins.

Armadilha: Por que a formatação ao salvar não funciona mesmo com o Prettier instalado?

O VS Code pode estar usando um formatador padrão diferente.
Múltiplas extensões de formatador instaladas causam ambiguidade.
Defina "editor.defaultFormatter": "esbenp.prettier-vscode" explicitamente por idioma.

O Prettier lida com arquivos TypeScript nativamente?

Sim. Nenhum parser ou plugin adicional é necessário para arquivos .ts e .tsx.
Prettier formata anotações de tipo, genéricos, interfaces e uniões de tipo.

Quais são as configurações recomendadas do Prettier para um projeto Next.js?

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "endOfLine": "lf"
}

Como formatar apenas tipos de arquivo específicos?

npx prettier --write "src/**/*.{ts,tsx,css,json}"

Use padrões glob para direcionar extensões específicas.

O Prettier entra em conflito com o ESLint?

Sim, se ambos estiverem configurados para lidar com a formatação.
Use eslint-config-prettier para desabilitar as regras de formatação do ESLint.
Veja Integração ESLint + Prettier para a configuração completa.

Posso usar o Prettier para ordenar imports do TypeScript?

O Prettier não ordena imports por padrão.
Use prettier-plugin-organize-imports ou @ianvs/prettier-plugin-sort-imports para ordenação de imports.
Alternativamente, use a regra import/order do ESLint.

Relacionados

Integração ESLint + Prettier - faça ESLint e Prettier trabalharem juntos
Configurações do EditorConfig & VS Code - consistência entre editores
Husky & lint-staged - formatar ao commitar
Linting em CI/CD - impor formatação na CI

Receita

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

# Instalar Prettier
npm install --save-dev prettier
 
# Verificar formatação (amigável para CI, sai com erro em violações)
npx prettier --check .
 
# Formatar todos os arquivos
npx prettier --write .
 
# Formatar arquivos específicos
npx prettier --write "src/**/*.{ts,tsx,css,json}"

Quando usar isso: Todo projeto com mais de um contribuidor, ou qualquer projeto onde você queira parar de debater o estilo do código.

Exemplo de Trabalho

// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "plugins": ["prettier-plugin-tailwindcss"]
}

# .prettierignore
node_modules/
.next/
out/
coverage/
pnpm-lock.yaml
package-lock.json
*.min.js

// scripts do package.json
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

// .vscode/settings.json (formatar ao salvar)
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

O que isso demonstra:

.prettierrc com configurações recomendadas para projetos React/Next.js
.prettierignore para pular a saída de build e arquivos de lock
Scripts npm para formatação e verificação
Configuração de formatar ao salvar no VS Code

Mergulho Profundo

Como Funciona

Prettier é um formatador de código opinativo - ele analisa seu código e o reimprime com um estilo consistente
Ele suporta TypeScript, JSX, CSS, JSON, Markdown e mais nativamente
O arquivo .prettierrc controla as opções; a maioria das equipes muda apenas alguns padrões
--check sai com um código não zero quando os arquivos não estão formatados (use na CI)
--write formata os arquivos no local

Variações

Opções chave explicadas:

Opção	Padrão	Recomendado	O Que Faz
`semi`	`true`	`true`	Adiciona ponto e vírgula no final das declarações
`singleQuote`	`false`	`false` ou `true`	Usa aspas simples em vez de duplas
`tabWidth`	`2`	`2`	Número de espaços por nível de indentação
`trailingComma`	`"all"`	`"all"`	Adiciona vírgulas finais onde for válido
`printWidth`	`80`	`80`	Comprimento da linha antes de quebrar
`bracketSpacing`	`true`	`true`	Espaços em literais de objeto `{ foo }`
`arrowParens`	`"always"`	`"always"`	Parênteses em torno de parâmetros de função de seta única
`endOfLine`	`"lf"`	`"lf"`	Estilo de final de linha

Ordenação de classes do Tailwind CSS:

npm install --save-dev prettier-plugin-tailwindcss

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Este plugin ordena automaticamente as classes do Tailwind na ordem recomendada.

Formatos de arquivo de configuração suportados:

.prettierrc (JSON)
.prettierrc.json
.prettierrc.js ou .prettierrc.cjs
.prettierrc.mjs
prettier.config.js
Chave "prettier" em package.json

Notas sobre TypeScript

// Prettier lida com formatação TypeScript nativamente.
// Nenhum parser ou plugin adicional é necessário para arquivos .ts e .tsx.
 
// Ele formata anotações de tipo, genéricos, interfaces e
// uniões de tipo de forma consistente:
type Props = {
  name: string;
  age: number;
  onSubmit: (data: FormData) => void;
};

Armadilhas

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

Conflitos com ESLint - Prettier e ESLint querem controlar a formatação. Executar ambos sem coordenação produz um loop de correção infinito. Correção: Use eslint-config-prettier para desabilitar as regras de formatação do ESLint. Veja Integração ESLint + Prettier.
printWidth não é um limite rígido - Prettier trata printWidth como uma diretriz, não um máximo. Strings longas, imports e props JSX podem excedê-lo. Correção: Aceite esse comportamento; Prettier otimiza para legibilidade, não limites de coluna estritos.
Formatar ao salvar não está funcionando - O VS Code pode estar usando um formatador padrão diferente. Correção: Defina "editor.defaultFormatter": "esbenp.prettier-vscode" e certifique-se de que a extensão esteja instalada.
.prettierignore é necessário - Sem ele, o Prettier formata a saída de build, arquivos de lock e código gerado. Correção: Sempre crie um arquivo .prettierignore, ou o Prettier perderá tempo em arquivos com os quais você não se importa.
A ordem de carregamento dos plugins importa - Se você usar vários plugins do Prettier, eles podem entrar em conflito. Correção: prettier-plugin-tailwindcss deve sempre ser listado por último no array plugins.

Alternativas

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

Alternativa	Use Quando	Não Use Quando
Biome	Você quer uma única ferramenta para linting e formatação	Você precisa de plugins Prettier (ex: ordenação Tailwind)
`dprint`	Você quer um formatador rápido baseado em Rust com mais opções de configuração	Você quer formatação opinativa sem configuração
Formatação apenas no Editor	Projeto solo com apenas um editor	Projeto em equipe ou aplicação de CI é necessária

FAQs

Qual a diferença entre --check e --write?

--check sai com um código não zero se algum arquivo não estiver formatado (use na CI).
--write formata os arquivos no local (use localmente).
Nunca use --write na CI; isso modificaria arquivos sem commitá-los.

Por que um arquivo .prettierignore é necessário?

Sem ele, o Prettier formata a saída de build (.next/), arquivos de lock e código gerado.
Isso desperdiça tempo e pode produzir alterações indesejadas.
Sempre crie .prettierignore para pular arquivos com os quais você não se importa.

Armadilha: Por que o Prettier excede minha configuração de printWidth?

printWidth é uma diretriz, não um máximo rígido.
Prettier otimiza para legibilidade, então strings longas, imports e props JSX podem excedê-lo.
Aceite esse comportamento; impor limites de coluna estritos produziria uma formatação pior.

Como configuro a formatação ao salvar no VS Code?

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Defina o formatador padrão globalmente e por idioma.

Quais formatos de arquivo de configuração o Prettier suporta?

.prettierrc (JSON)
.prettierrc.json, .prettierrc.js, .prettierrc.cjs, .prettierrc.mjs
prettier.config.js
Chave "prettier" em package.json

Como adiciono a ordenação de classes do Tailwind CSS?

npm install --save-dev prettier-plugin-tailwindcss

{ "plugins": ["prettier-plugin-tailwindcss"] }

Este plugin deve ser listado por último no array plugins.

Armadilha: Por que a formatação ao salvar não funciona mesmo com o Prettier instalado?

O VS Code pode estar usando um formatador padrão diferente.
Múltiplas extensões de formatador instaladas causam ambiguidade.
Defina "editor.defaultFormatter": "esbenp.prettier-vscode" explicitamente por idioma.

O Prettier lida com arquivos TypeScript nativamente?

Sim. Nenhum parser ou plugin adicional é necessário para arquivos .ts e .tsx.
Prettier formata anotações de tipo, genéricos, interfaces e uniões de tipo.

Quais são as configurações recomendadas do Prettier para um projeto Next.js?

{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "endOfLine": "lf"
}

Como formatar apenas tipos de arquivo específicos?

npx prettier --write "src/**/*.{ts,tsx,css,json}"

Use padrões glob para direcionar extensões específicas.

O Prettier entra em conflito com o ESLint?

Sim, se ambos estiverem configurados para lidar com a formatação.
Use eslint-config-prettier para desabilitar as regras de formatação do ESLint.
Veja Integração ESLint + Prettier para a configuração completa.

Posso usar o Prettier para ordenar imports do TypeScript?

O Prettier não ordena imports por padrão.
Use prettier-plugin-organize-imports ou @ianvs/prettier-plugin-sort-imports para ordenação de imports.
Alternativamente, use a regra import/order do ESLint.

Relacionados

Integração ESLint + Prettier - faça ESLint e Prettier trabalharem juntos
Configurações do EditorConfig & VS Code - consistência entre editores
Husky & lint-staged - formatar ao commitar
Linting em CI/CD - impor formatação na CI

Configuração do Prettier

Buscar na documentação

Configuração do Prettier