ESLint e Prettier

A padronização de código é um aspecto crucial no desenvolvimento de software, especialmente quando se trabalha em equipe. Código consistente melhora a legibilidade, reduz conflitos de merge e facilita a manutenção. Nesta aula, vamos explorar duas ferramentas essenciais do ecossistema JavaScript: ESLint e Prettier. O ESLint é um linter que analisa o código em busca de problemas de sintaxe, padrões de código e possíveis bugs, enquanto o Prettier é um formatador de código que aplica um estilo consistente automaticamente. Juntas, essas ferramentas garantem que seu código siga padrões definidos, tanto em termos de qualidade quanto de estilo.

Ao final desta aula, você será capaz de configurar o ESLint e o Prettier em um projeto JavaScript, integrá-los ao seu editor de código (com foco no VSCode) e entender como eles trabalham juntos para melhorar o fluxo de desenvolvimento. Vamos começar!

Padronização

Padronização de código refere-se à adoção de um conjunto de regras e convenções que todos os membros de uma equipe seguem ao escrever código. Isso inclui desde a indentação e o uso de aspas até a estruturação de funções e a nomenclatura de variáveis. A padronização traz diversos benefícios: reduz a carga cognitiva ao ler código de outros desenvolvedores, facilita a revisão de código, diminui erros e torna o processo de integração de novos membros mais rápido.

No JavaScript, a falta de padronização pode ser um problema sério, pois a linguagem é flexível e permite várias formas de escrever o mesmo código. Por exemplo, você pode usar aspas simples, duplas ou template literals; pode usar ponto e vírgula ou não; e pode escolher entre diferentes padrões de indentação. Sem uma ferramenta que imponha um padrão, cada desenvolvedor pode seguir seu próprio estilo, levando a um código inconsistente e difícil de manter.

O ESLint e o Prettier atacam esse problema de maneiras complementares. O ESLint foca na qualidade do código, detectando padrões problemáticos, como variáveis não utilizadas, uso de var em vez de let ou const, e comparações com == em vez de ===. O Prettier, por outro lado, cuida do estilo visual: ele reformata o código automaticamente para seguir regras de estilo definidas, como tamanho de indentação, largura máxima da linha e uso de aspas. Enquanto o ESLint pode ser configurado para corrigir alguns problemas automaticamente, o Prettier é especializado em formatação e é mais abrangente nesse aspecto.

Configuração básica

Para começar a usar ESLint e Prettier em um projeto JavaScript, precisamos instalá-los e configurá-los. Vamos assumir que você já tem um projeto Node.js com um arquivo package.json. Se não, você pode iniciar um com npm init -y. A instalação pode ser feita via npm, e é recomendável instalar as ferramentas como dependências de desenvolvimento, pois elas são usadas apenas durante o desenvolvimento.

Primeiro, vamos instalar o ESLint e o Prettier. Além disso, precisamos do pacote eslint-config-prettier para desativar regras de ESLint que conflitam com o Prettier, e do eslint-plugin-prettier para integrar o Prettier como uma regra do ESLint. Execute os seguintes comandos no terminal:

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

Após a instalação, vamos inicializar a configuração do ESLint. O ESLint fornece um comando interativo que gera um arquivo de configuração. Execute npx eslint --init e responda às perguntas de acordo com suas preferências. Por exemplo, você pode escolher "To check syntax and find problems" e "JavaScript modules (import/export)". Isso criará um arquivo .eslintrc.json (ou .eslintrc.js, dependendo da sua escolha).

Vamos criar um exemplo de configuração manualmente para entender melhor. Crie um arquivo .eslintrc.json na raiz do projeto com o seguinte conteúdo:

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

Aqui, definimos o ambiente (browser, node, ES2021) e estendemos as configurações recomendadas do ESLint, além da configuração do plugin Prettier. A regra prettier/prettier faz com que o ESLint trate problemas de formatação do Prettier como erros. Agora, vamos configurar o Prettier. Crie um arquivo .prettierrc na raiz do projeto com suas preferências de estilo. Por exemplo:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Essas opções definem que usaremos ponto e vírgula, aspas simples, indentação de 2 espaços e vírgula final em objetos e arrays (quando válido). Você pode ajustar conforme suas preferências. Agora, para testar, crie um arquivo JavaScript simples, como index.js, com um código que viole essas regras, por exemplo:

const nome = "João"
function saudacao() {
    return `Olá, ${nome}`
}
console.log(saudacao())

Execute npx eslint index.js no terminal. O ESLint deve reportar erros relacionados à formatação (por exemplo, aspas duplas em vez de simples, indentação incorreta). Para corrigir automaticamente, execute npx eslint index.js --fix. Isso aplicará as correções do Prettier via plugin, deixando o código formatado corretamente.

Integração com o editor

Embora seja possível executar o ESLint e o Prettier via linha de comando, a integração com o editor de código é onde eles realmente brilham. O Visual Studio Code (VSCode) é um dos editores mais populares e oferece extensões oficiais para ambas as ferramentas. Vamos configurar o VSCode para formatar automaticamente o código ao salvar e destacar problemas de lint em tempo real.

Primeiro, instale as extensões "ESLint" (dbaeumer.vscode-eslint) e "Prettier - Code formatter" (esbenp.prettier-vscode) no VSCode. Após a instalação, você precisa configurar o VSCode para usar o Prettier como formatador padrão e ativar a formatação ao salvar. Isso pode ser feito nas configurações do usuário ou do workspace. No arquivo settings.json, adicione:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.format.enable": true
}

Com essas configurações, ao salvar um arquivo JavaScript, o VSCode chamará o Prettier para formatar o código. O ESLint também pode fornecer ações de correção rápida, que podem ser aplicadas com um atalho (Ctrl+. ou Cmd+.). Além disso, o ESLint mostrará sublinhados em problemas de lint, e você pode ver o problema ao passar o mouse.

É importante garantir que as configurações do Prettier no VSCode estejam alinhadas com as do seu projeto. O VSCode pode ler o arquivo .prettierrc automaticamente, então as configurações do projeto serão usadas. Se você quiser que o ESLint também formate o código, a extensão ESLint pode executar o --fix ao salvar se configurado. Para isso, adicione em settings.json:

"eslint.codeActionsOnSave": {
  "source.fixAll": true
}

Isso fará com que o VSCode execute as correções automáticas do ESLint (incluindo as do Prettier) ao salvar. No entanto, é comum usar apenas o Prettier para formatação e o ESLint para linting, evitando conflitos. A configuração eslint.format.enable pode ser desabilitada se você preferir que apenas o Prettier formate.

Outra integração útil é a configuração para trabalhar com arquivos de configuração compartilhados. Em projetos com vários desenvolvedores, é comum ter um arquivo .eslintrc.json e .prettierrc no repositório, garantindo que todos usem as mesmas regras. Além disso, você pode adicionar scripts no package.json para rodar o lint e a formatação em todo o projeto, por exemplo:

"scripts": {
  "lint": "eslint .",
  "format": "prettier --write ."
}

Assim, você pode executar npm run lint para verificar problemas e npm run format para formatar todos os arquivos. Isso é especialmente útil em pipelines de CI/CD para garantir que o código siga os padrões antes de ser integrado.

Boas práticas e observações finais

Ao usar ESLint e Prettier, é importante seguir algumas boas práticas para obter o máximo de benefícios:

• Use configurações compartilháveis: Em vez de duplicar configurações em cada projeto, você pode criar um pacote de configuração (como eslint-config-meu-estilo) e reutilizá-lo em vários projetos.
• Integre com Git hooks: Use ferramentas como husky e lint-staged para executar o ESLint e o Prettier apenas nos arquivos alterados antes de cada commit, garantindo que o código commitado esteja sempre limpo.
• Evite conflitos: Use o eslint-config-prettier para desativar regras de estilo do ESLint que conflitam com o Prettier. O plugin eslint-plugin-prettier integra o Prettier como uma regra, mas muitos preferem rodar o Prettier separadamente para evitar sobreposição.
• Documente suas regras: Se você personalizar regras, documente-as para que os desenvolvedores entendam o motivo. Isso ajuda na adoção e evita discussões futuras.

Em resumo, a combinação de ESLint e Prettier é uma prática recomendada para qualquer projeto JavaScript moderno. Eles garantem qualidade e consistência, economizando tempo em revisões e reduzindo erros. Com a configuração adequada e a integração com o editor, o processo se torna transparente e automático.

Referências

• Documentação oficial do ESLint
• Documentação oficial do Prettier
• eslint-config-prettier no GitHub
• eslint-plugin-prettier no GitHub
• Extensão ESLint para VSCode
• Extensão Prettier para VSCode
• Husky - Git hooks
• lint-staged no GitHub

Exercícios

1. Instale o ESLint e o Prettier em um projeto Node.js vazio e crie um arquivo .eslintrc.json com configurações básicas (env, extends, rules).

Ver resposta

✓ Resposta: Execute npm init -y e depois npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier. Crie o arquivo .eslintrc.json com conteúdo similar ao mostrado na aula, incluindo as extensões recomendadas e a regra prettier/prettier.
2. Configure o Prettier com as seguintes opções: sem ponto e vírgula, aspas duplas, indentação de 4 espaços e sem vírgula final. Crie um arquivo .prettierrc com essas configurações e teste em um arquivo JavaScript.

Ver resposta

✓ Resposta: Crie um arquivo .prettierrc com:
{
  "semi": false,
  "singleQuote": false,
  "tabWidth": 4,
  "trailingComma": "none"
}
Depois, rode npx prettier --write . para formatar todos os arquivos do projeto.
3. Integre o ESLint e o Prettier ao VSCode, configurando a formatação automática ao salvar e a correção de lint.

Ver resposta

✓ Resposta: Instale as extensões ESLint e Prettier no VSCode. No settings.json, adicione:
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "eslint.codeActionsOnSave": {
    "source.fixAll": true
  }
}
Isso fará com que o código seja formatado e corrigido automaticamente ao salvar.
4. Crie um script no package.json para rodar o lint e a formatação em todo o projeto, e execute-os.

Ver resposta

✓ Resposta: No package.json, adicione:
"scripts": {
  "lint": "eslint .",
  "format": "prettier --write ."
}
Depois, execute npm run lint e npm run format no terminal.
5. Configure o husky e o lint-staged para executar o ESLint e o Prettier apenas nos arquivos alterados antes de cada commit.

Ver resposta

✓ Resposta: Instale as dependências: npm install --save-dev husky lint-staged. No package.json, adicione:
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.js": ["eslint --fix", "prettier --write"]
}
Isso executará o ESLint e o Prettier nos arquivos JS modificados antes de cada commit.