Adicione Husky + Lint-staged ao React (datilografado)

Suponho que você já tenha pelo menos o conhecimento básico de ReactJs e Git .

Observação: este artigo foi escrito em agosto de 2021. Essa sintaxe pode não funcionar mais tarde devido à alteração da versão.

Primeiro passo

Vamos configurar o projeto React com Typescript usando o comando create-react-app

npx create-react-app automate-prettier-eslint-with-husky --template typescript

Agora podemos adicionar git ao nosso projeto. Aqui eu uso o GitHub para este projeto.

Crie um repositório vazio no Github, então você será mostrado assim.

Em seguida, você pode adicionar git e enviar o primeiro commit para o repositório usando o comando abaixo,

git remote add origin https://github.com/cheulong/automate-prettier-eslint-with-husky.git
git branch -M main
git push -u origin main

Terceiro passo

Adicionar dependências

yarn add -D husky lint-staged prettier

• lint-staged— para executar o comando antes de confirmar .
• prettier— para formatar o código.

Criar .prettierignorepara adicionar a pasta ignorada

Adicione o comando Eslint e Prettier ao script

• eslint srcpara verificar o aviso e o erro do código.
• prettier --writepara formatar o código.
• prettier --check .para verificar o formato do código.

Último passo

Por fim, habilitamos o git hook

npx husky install

npx husky add .husky/pre-commit "yarn lint-staged"

Nota: Você também pode editar o arquivo pré-commit

Agora vamos testar

git add .
git commit -m"add husky lint-staged"

      

    
      

Parabéns, você adicionou com sucesso husky e lint-staged ao seu projeto ReactJs.

O repositório para este artigohttps://github.com/cheulong/automate-prettier-eslint-with-husky