0Pricing
Frontend Academy · Aula

Configuração do Prettier e do ESLint

Adicione o Prettier para formatação automática e o ESLint para detectar erros, configure ambas as ferramentas e integre-as a um fluxo de trabalho que formata ao salvar.

Configuração do Prettier e do ESLint é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Por que automatizar o estilo do código?

Discussões sobre formatação manual desperdiçam o tempo da equipe. O Prettier formata o código automaticamente com um estilo consistente. O ESLint detecta bugs e impõe boas práticas. Juntos, eles eliminam categorias inteiras de comentários em revisões de código.

Instalando o Prettier

Instale o Prettier como uma dependência de desenvolvimento, crie um arquivo de config e adicione um script de formatação ao package.json. O Prettier não precisa de config para funcionar — os padrões são adequados —, mas você pode personalizá-los.

npm install --save-dev prettier

# .prettierrc (optional config)
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

Integração do Prettier com o VSCode

Instale a extensão Prettier - Code Formatter. Em seguida, defina-a como o formatador padrão e ative formatOnSave nas configurações. Agora o Prettier será executado sempre que você salvar um arquivo.

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Instalando o ESLint

Instale o ESLint e inicialize-o com npm init @eslint/config. Este assistente ajuda você a escolher seu ambiente (navegador/node), sistema de módulos e suporte a TypeScript. Ele gera um arquivo eslint.config.js.

npm install --save-dev eslint
npx eslint --init

# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.js

Exemplo de config do ESLint

Uma config simples e plana do ESLint para um projeto JavaScript de navegador. As regras podem ser 'error', 'warn' ou 'off'. Estenda configs compartilhadas, como a recomendada em @eslint/js, para obter uma base sólida.

// eslint.config.js
import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      'eqeqeq': 'error'
    }
  }
];

ESLint para TypeScript

Em projetos TypeScript, adicione typescript-eslint para detectar problemas específicos do TypeScript: uso inseguro de any, tipos de retorno ausentes e Promises usadas incorretamente.

npm install --save-dev typescript-eslint

// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
  ...tseslint.configs.recommended
);

Prettier e ESLint juntos

O ESLint tem algumas regras de formatação que entram em conflito com o Prettier. Use eslint-config-prettier para desativá-las, permitindo que o Prettier cuide de toda a formatação e que o ESLint cuide apenas da qualidade do código.

npm install --save-dev eslint-config-prettier

// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
  js.configs.recommended,
  prettierConfig  // disables ESLint formatting rules
];

.eslintignore e .prettierignore

Informe às ferramentas quais arquivos devem ser ignorados. O arquivo .eslintignore usa a sintaxe do gitignore. Normalmente, você deve ignorar node_modules, dist e arquivos gerados.

# .eslintignore
node_modules
dist
.next
coverage

Scripts do npm para verificação de código

Adicione scripts de verificação e formatação ao package.json para que a integração contínua e os colegas possam executá-los de maneira consistente.

{
  "scripts": {
    "lint": "eslint src --ext .js,.ts,.tsx",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write src",
    "format:check": "prettier --check src"
  }
}

lint-staged e husky para ganchos de pré-commit

Use husky + lint-staged para verificar e formatar automaticamente apenas os arquivos preparados antes de cada commit do Git. Isso impede que código sem formatação ou com problemas chegue ao repositório.

npm install --save-dev husky lint-staged
npx husky init

# package.json:
"lint-staged": {
  "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{css,json,md}": "prettier --write"
}

EditorConfig para consistência básica

Um arquivo .editorconfig impõe configurações básicas do editor (estilo de indentação e finais de linha) em todos os editores e IDEs, independentemente dos plug-ins. Adicione-o junto ao Prettier.

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

Verificação rápida

Por que eslint-config-prettier deve ser adicionado a uma config do ESLint que também usa o Prettier?

Recapitulação: Prettier e ESLint

O Prettier formata o código automaticamente ao salvar, por meio da extensão do VSCode. O ESLint detecta bugs e violações de estilo. Use eslint-config-prettier para evitar conflitos. Adicione lint-staged + husky para aplicar as regras antes do commit. Ferramentas consistentes eliminam discussões sobre formatação e detectam bugs antes que cheguem à produção.

Perguntas Frequentes

A aula “Configuração do Prettier e do ESLint” é grátis?

Sim — o texto completo de “Configuração do Prettier e do ESLint” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Configuração do Prettier e do ESLint”?

Adicione o Prettier para formatação automática e o ESLint para detectar erros, configure ambas as ferramentas e integre-as a um fluxo de trabalho que formata ao salvar. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Configuração do Prettier e do ESLint”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Chrome DevTools: Elements, Console e Network
  2. VSCode: extensões, Emmet e atalhos
  3. Configuração do Prettier e do ESLint
  4. Compatibilidade de navegadores e caniuse.com
← Voltar para Frontend Academy