Ter configurado o ESLint e ter integrado o Prettier com o ESLint, se ainda não fez segue o link da postagem:

• Configurando o ESLint
• Integrando o Prettier com o ESLint

A utilização do Husky + Lint-Staged servirá para quando efetuarmos algum commit esses comites serão avaliados para validar se o código está seguindo um padrão definido, que no nosso caso foi definido pela configuração do ESLint, se não viu esta etapa de configuração por favor clique aqui

Para instalar o Husky, apenas rode o comando:

Com NPM

• Com NPM npm install husky –save-dev
• Rodar o Husky com NPM npm exec husky init

Com Yarn

• Com Yarn yarn add husky –dev
• Rodar o Husky com Yarn yarn husky install

Após a instalação será criado uma pasta com o nome husky e alguns arquivos dentro, veja a imagem abaixo:

Após esta verificação dentro da pasta husky, crie o arquivo com o nome pre-commit, ficará assim:

Por enquanto é isso

Para instalar o Lint-Staged bata que a gente rode o comando yarn add lint-staged –dev

Após a instalação vá no arquivo package.json e logo acima das depedências insira o código abaixo:

Agora precisamos ir na pasta husky e inserir alguns comandos no arquivo pre-commit, lembra que criamos ele e não colocamos nada, chegou a hora, deixe dessa forma abaixo:

Explicando um poucodo que foi feito acima, estamos informando que toda vez que commitarmos algo o husky vai rodar o lint-staged e o lint-staged vai chamar o ESLint que por sua vez pode encontrar algum erro no código e caso ele encontre ele barra o commit.

Só vou pedir que você adicione mais uma coisa para assegurar que tudo vai funcionar como o esperado, vá no seu package.json e adicione esta linha de código “lint”: “eslint src –max-warnings=0” veja a imagem abaixo para facilitar:

Parabéns você chegou ao fim deste tutorial, espero que esteja tudo funcionando.

Basta você ir em algum arquivo seu e ocasionar um erro, tipo criar uma variável e não utilizar ela, isso ocasionará um erro no ESLint, em seguida você tenta comitar o código, se der erro está funcionando se não der erro, revise os passos pois não funcionou.

A dinâmica é a seguinte aqui ao comitar o husky através da configuração do arquivo pre-commit executa o comando lint-staged que foi configurado no package.json, o lint-staged vasculha tudo dentro da src e se encontrar algum erro ele tenta fixar com lint –fix e caso não consiga ele exibe um erro no commit mesmo que este erro seja leve, pois ainda no arquivo package.json lembra que nós configuramos um comando em scripts que é assim “lint”: “eslint src –max-warnings=0”, esse comando por menor que seja o erro encontrado pelo ESLint ele quebra a aplicação.