Introdução
Durante o processo de desenvolvimento, torna-se importante a definição de um padrão de projeto visando legibilidade, manutenção e aumento da qualidade de código. Para isso, esse artigo vai trazer duas libs que em conjunto permitem verificar o código na busca/solução de problemas e a formatação dele, dada as regras definidas.
Libs
prettier: é a lib responsável pela formatação de código
eslint: é a lib que vai analisar o código visando a busca e solução de problemas
Setup
Para adicionar o prettier:
yarn add prettier –dev
Para adicionar o eslint:
yarn add eslint@8.57.0 eslint-config-prettier –dev
eslint@8.57.0: vai adicionar a versão 8.57.0 (a mais recente abaixo da 9), dado a alguns problemas relacionados com o plugin de react a partir da versão 9, que estão sendo analisados
eslint-config-prettier: vai desativar as regras do eslint que conflitam com o prettier
Para adicionar os plugins do eslint:
yarn add eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks –dev
eslint-plugin-prettier: vai permitir rodar o prettier em conjunto com o eslint
eslint-plugin-react: vai trazer as regras de linting específicas para aplicações React
eslint-plugin-react-hooks: vai trazer as regras de linting para hooks em React
Para permitir executar o eslint para aplicação React que tem o Babel como compilador:
yarn add @babel/eslint-parser –dev
Após a instalação das libs, adicionar na raiz do projeto o arquivo .eslintrc.json para configurar a execução do eslint. Ele vai ser incrementado aos poucos a medida que vão sendo explicadas as configurações:
env
Traz variáveis globais predefinidas.
“browser”: true: referentes ao browser
“node”: true: referentes ao Node.js
“jest”: true: referentes ao Jest
“env“: {
“browser“: true,
“node“: true,
“jest“: true
},
}
Por exemplo, se tenho uma app que usa Jest para os testes e não defino a env “jest”: true, ao executar o eslint vai ser levantados erros do tipo: describe, it, expect não estão definidos.
Quando coloco a env “jest”: true, ao executar o eslint ele já saberá que são termos usados nos testes e não vai levantar erros por causa deles.
extends
Traz configurações adicionais para o eslint.
eslint:recommended: traz regras recomendadas do eslint
plugin:react/recommended: traz regras recomendadas para react (é possível usar devido a adição do plugin eslint-plugin-react)
plugin:react-hooks/recommended: traz regras recomendadas para hooks em React (é possível usar devido a adição do plugin eslint-plugin-react-hooks)
prettier: remove as regras do eslint que podem conflitar com o prettier (é possível usar devido a adição da lib eslint-config-prettier)
//…
“extends“: [
“eslint:recommended“,
“plugin:react/recommended“,
“plugin:react-hooks/recommended“,
“prettier“
],
}
parser
@babel/eslint-parser: permite executar o eslint para aplicações que usam o babel como compilador
//…
“parser“: “@babel/eslint-parser“,
}
parserOptions
ecmaVersion: especifica a ECMAScript syntax usada (latest corresponde a mais recente versão suportada)
sourceType: especifica se a aplicação está usando ESM: module ou se está usando CommonJS: script
ecmaFeatures – “jsx”: true: especifica se inclui syntax jsx
//…
“parserOptions“: {
“ecmaVersion“: “latest“,
“sourceType“: “module“,
“ecmaFeatures“: {
“jsx“: true
}
},
}
plugins
Permite adicionar plugins para extender o eslint, que podem adicionar regras de validação, configurações, envs.
prettier: plugin do prettier
react: plugin do React
react-hooks: plugin de hooks em React
//…
“plugins“: [
“prettier“,
“react“,
“react-hooks“
],
}
settings
react – “version”: “detect”: detecta automaticamente a versão do React da aplicação
//…
“settings“: {
“react“: {
“version“: “detect“
}
},
}
ignorePatterns
Arquivos que serão ignorados quando rodar o eslint.
*.stories.tsx: foi colocado no artigo somente como exemplo, nesse caso o eslint não iria olhar os arquivos que terminam com .stories.tsx
//…
“ignorePatterns“: [“*.stories.tsx“],
}
rules
Permite adicionar as regras do prettier para serem executadas em conjunto com o eslint:
//…
“rules“: {
“prettier/prettier“: [“error“]
}
}
prettier/prettier: adiciona as regras do prettier quando for executado o eslint
error: define que caso alguma regra do prettier não seja satisfeita, retorne erro. Além de error, é possível passar warn que levantaria um warning se alguma regra não fosse satisfeita. Ou off para desativar as regras
Permite customizar as regras do eslint:
//…
“rules“: {
“react/jsx-uses-react“: “off“,
“react/react-in-jsx-scope“: “off“,
“prettier/prettier“: [“error“]
}
}
“react/jsx-uses-react”: “off” e “react/react-in-jsx-scope”: “off”: desativa no eslint a regra que retorna erro se não é colocado o import React from ‘react’ nos arquivos. Bom para versões de React 17 para frente que não tem essa necessidade
Permite customizar as regras do prettier:
//…
“rules“: {
“react/jsx-uses-react“: “off“,
“react/react-in-jsx-scope“: “off“,
“prettier/prettier“: [
“error“,
{
“singleQuote“: true
}
]
}
}
singleQuote: define como regra de formatação as strings terem aspas simples
Após finalizar a definição do arquivo de configuração, adicionar em package.json os scripts:
//…
“lint“: “eslint .“,
“lint-files“: “eslint“,
“lint-fix“: “eslint . –fix“,
“lint-fix-files“: “eslint –fix“,
},
Por default seguindo essa configuração, o eslint vai olhar os arquivos .js. Para verificar outros tipos de arquivos é nos scripts acima adicionar depois de eslint –ext=js,{outro_tipo_de_arquivo}
eslint .: ao rodar yarn lint vai verificar em todos os arquivos se estão de acordo com as regras do eslint e prettier
eslint: ao rodar yarn lint-files {nome_do_arquivo ou nome_da_pasta} vai verificar o arquivo passado ou todos os arquivos da pasta passada, se estão de acordo com as regras do eslint e prettier
eslint . –fix: ao rodar yarn lint-fix vai formatar e corrigir o código seguindo as regras do eslint e prettier
eslint –fix: ao rodar yarn lint-fix-files {nome_do_arquivo ou nome_da_pasta} vai formatar e corrigir o código seguindo as regras do eslint e prettier, para o arquivo ou todos os arquivos da pasta passada
Sugestão: caso sempre é executado para uma pasta específica (por exemplo src), para facilitar pode trocar os . dos scripts para src.
Exemplo
Vamos partir do arquivo de configuração completo definido acima:
“env“: {
“browser“: true,
“node“: true,
“jest“: true
},
“extends“: [
“eslint:recommended“,
“plugin:react/recommended“,
“plugin:react-hooks/recommended“,
“prettier“
],
“parser“: “@babel/eslint-parser“,
“parserOptions“: {
“ecmaVersion“: “latest“,
“sourceType“: “module“,
“ecmaFeatures“: {
“jsx“: true
}
},
“plugins“: [
“prettier“,
“react“,
“react-hooks“
],
“settings“: {
“react“: {
“version“: “detect“
}
},
“ignorePatterns“: [“*.stories.tsx“],
“rules“: {
“react/jsx-uses-react“: “off“,
“react/react-in-jsx-scope“: “off“,
“prettier/prettier“: [
“error“,
{
“singleQuote“: true
}
]
}
}
Arquivo de exemplo:
const Example = () => <p>Eslint article</p>;
export default Example;
Ao executar yarn lint-files para esse arquivo:
Ele retorna 3 erros, 2 do prettier e 1 do eslint, informando que dois são corrigidos pelo –fix:
Primeiro erro: referente a regra do eslint que retorna erro para variável declarada mas não usada no código
Segundo erro: referente a regra customizada definida para usar aspas simples no prettier
Terceiro erro: referente a regra do prettier de espaçamento
Ao executar yarn lint-fix-files para esse arquivo:
Ele corrige dois dos erros que tinha levantado, e continua avisando do que não era auto corrigível. Ficando o arquivo dessa forma:
const Example = () => <p>Eslint article</p>;
export default Example;
Removendo o import que não é utilizado, não terá mais erros aparecendo na execução do eslint.
Conclusão
A ideia foi trazer as libs necessárias para configuração do eslint com o prettier, focando em como executar eles em conjunto e mostrar onde é possível customizar as regras referentes a ambos. Tentei trazer de forma geral o que representa os elementos do arquivo de config, dependendo da app pode ser que não seja necessário a adição de todos os elementos mostrados acima ou uma pequena alteração em um deles, segue a doc referente a versão 8.57.0 do eslint. No próximo artigo vou focar em trazer regras que são interessantes se customizar tanto para o prettier quanto ao eslint.