Automatizando a Formatação de Código com Husky em Projetos React

O Husky é uma ferramenta que permite automatizar a execução de scripts antes de certos eventos do Git, como commits. Isso é útil para garantir que o código esteja formatado corretamente antes de ser confirmado. Aqui está um guia passo a passo sobre como integrar o Husky em qualquer projeto React.

Primeiro passo:
Para começar, instalei o Prettier para formatação de código e adicionei scripts para formatar e verificar.

npm install prettier -D

"scripts": {
  "format": "prettier --write \"**/*.{ts,tsx,js,jsx,md,mdx,css,yaml,yml}\"",
  "check": "prettier --check \"**/*.{ts,tsx,js,jsx,md,mdx,css,yaml,yml}\""
}

Agora siga os passos abaixo para configurar o Husky.

Instalação:

Adicionamos o Husky como uma dependência de desenvolvimento usando a versão mais recente 9.0.1.

    npm install husky@latest -D

Inicialização do Husky:

Inicializamos o Husky usando o comando npx husky init. Esse comando cria uma pasta .husky com todos os hooks de cliente necessários presentes na pasta _. Além disso, adiciona um script de preparação ao package.json.

Adicionando um hook do Git:

Agora vamos adicionar um hook do Git. Aqui estamos adicionando um hook pré-commit. (O arquivo de hook pré-commit está presente por padrão.) Podemos criar manualmente um arquivo na pasta .husky ou criá-lo junto com um comando echo.

Em seguida, adicionamos os comandos necessários no arquivo.

    echo “npm run format” > .husky/pre-commit

E é isso!

Configuramos o Husky no projeto. Agora, faça qualquer alteração e a confirme. O script pré-commit é executado antes do commit e garante que todo o código esteja formatado.