A princípio parece fácil: use o create-react-app e em seguida rode
npm install --save-dev eslint-config-airbnb. Finalmente, edite seu arquivo
.eslintrc.json e coloque algo assim nele:
{
"extends": ["airbnb"]
}
Seria fácil, se o CRA não pensasse tão diferente do Airbnb. Logo de cara, eu
quis rodar npx eslint ./src e encontrei meu primeiro desafio:
react/jsx-filename-extension é uma regra que exige que arquivos JSX tenham a
extensão correspondente (.jsx). Fácil de corrigir pra maioria dos arquivos,
mas o CRA exige que o arquivo de entrada se chame index.js. Deixei um
comentário /* eslint-disable-line react/jsx-filename-extension */ nele.
O primeiro de muitos comentários de “exceções” pro Eslint.
Em seguida percebi alguns erros de variáveis não definidas: it e document.
A primeira é coisa de teste e a melhor solução foi usar regras de Eslint que
suportam o Jest corretamente: npm install --save-dev eslint-plugin-jest. Já
pro document podemos usar o suporte pra variáveis globais nativas do browser.
O arquivo .eslintrc.json ficou assim:
{
"env": { "browser": true },
"extends": ["airbnb", "plugin:jest/recommended"]
}
Agora pra lidar com o resto dos erros reportados: no src/App.jsx é preciso
transformar o componente em uma função (moleza). E o src/serviceWorker.js tem
um monte de console.log, um par de use-before-define que são fáceis de
corrigir e um erro que eu queria [corrigir no CRA][1] que é a modificação de um
parâmetro de função. Na função registerValidSW, um callback comete o seguinte
deslize:
.then((registration) => registration.onupdatefound = () => {...})
A solução é usar o método .addEventListener. Fica assim:
.then((registration) => registration.addEventListener('updatefound', () => {...}))
Agora sim, prontos pra trabalhar… Exceto se vc for usar Enzyme pros seus
testes. Aí vc precisa criar um arquivo src/setupTests.js e configurar o Enzyme
nele e, se vc instalou esse módulo corretamente como uma dependência de
desenvolvimento, vc vai começar a ver o erro import/no-extraneous-dependencies
porque na opinião do Airbnb, dependências de desenvolviment não deveriam ser
requeridas por arquivos na pasta src. ¯\_(ツ)_/¯
A melhor solução que eu achei foi adicionar uma exceção no .eslintrc.json, que
ficou assim:
{
"env": { "browser": true },
"extends": ["airbnb", "plugin:jest/recommended"],
"overrides": [
{
"files": "src/setupTests.js",
"rules": {
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": true,
"optionalDependencies": false
}
]
}
}
]
}
Por enquanto é isso. Vamos ver de quantos jeitos mais esse par CRA/Airbnb vai me enrolar.