Existem muitas ferramentas para automatizar nossas tarefas de código. Podemos verificar se há problemas de sintaxe com ESLint e formatar nosso código com Prettier.

Mas nem todos na equipe se lembrarão de executar esses comandos sempre que fizerem commit. Como podemos usar o Husky para adicionar ganchos Git para executá-los para nós?

O que são Git Hooks?

Git hooks são scripts que você pode configurar para correr em certos eventos no ciclo de vida do Git. Esses eventos incluem diferentes estágios de um commit, como antes de um commit (pré-commit) e depois de um commit (pós-commit).

Eles são úteis porque permitem que os desenvolvedores executem tarefas de código personalizado ou até mesmo imponham padrões ao automatizar outros scripts para executar essas tarefas.

O que é Husky?

Husky é uma ferramenta que nos permite manipular facilmente ganchos do Git e executar os scripts que queremos nesses estágios.

Ele funciona incluindo um objeto dentro de nosso package.json arquivo que configura o Husky para executar os scripts que especificamos. Depois disso, o Husky lida com o gerenciamento em que ponto do ciclo de vida do Git nossos scripts serão executados.

O que vamos construir?

Vamos configurar um projeto simples que podemos usar para testar os ganchos Git.

Embora você deva ser capaz de acompanhar qualquer projeto em que esteja trabalhando, vou usar Next.js como ponto de partida para este projeto, simplesmente pelo fato de podermos executar um único comando para iniciar um projeto.

Uma consideração sobre como acompanhar este projeto, porém, é que usaremos Mais bonita como um exemplo do que você pode fazer com ganchos Git.

Prettier é uma ferramenta que formatará automaticamente nosso código para nós, o que se você não espera que isso aconteça, pode causar muito estresse. Acompanhar-me usando o projeto Next.js permitirá que você teste isso sem fazer alterações não intencionais.

Para testar os ganchos do Git, começaremos adicionando uma instrução de linha de comando simples para ver o Husky funcionar. Mas também testaremos a adição de Prettier, que formatará automaticamente nosso código para nós.

Finalmente, no momento em que este artigo foi escrito, a Husky lançou um v5 Alpha versão de sua solução de gancho Git. Dado que ainda é apenas uma versão Alpha, vamos avançar com v4, o que nos permite instalar facilmente o Husky com npm.

Etapa 0: como configurar um novo projeto

Como mencionei, você pode realmente seguir as mesmas etapas aqui com qualquer projeto gerenciado com um package.json Arquivo.

Next.js é absolutamente exagero para este passo a passo, mas o objetivo é minimizar as etapas de configuração para realmente funcionar com o Husky.

Para começar a usar Next.js, navegue até o diretório em que deseja iniciar seu projeto e execute o seguinte:

yarn create next-app my-husky-project# ornpx create-next-app my-husky-project

Nota: sinta-se à vontade para substituir my-husky-project para o que você quiser nomear seu diretório.

Isso criará uma nova pasta, criará um novo projeto Next.js e instalará todas as dependências.

create next app

Quando terminar, navegue até a nova pasta e estaremos prontos para prosseguir!

Acompanhe o commit.

Etapa 1: como instalar o Husky em um projeto

Para instalar o Husky, podemos usar fios ou npm.

yarn add husky# ornpm install husky

Nota: se instalar o Husky neste momento instala a v5, isso significa que a v5 foi lançada oficialmente. por favor veja o documentação Husky atualizada ou você pode instalar a última versão v4 especificando [email protected] (ou qualquer que seja a última versão) ao instalar.

Assim que a instalação do pacote for concluída, devemos estar prontos para usar o Husky.

Acompanhe o commit.

Etapa 2: como configurar o Husky para executar ganchos Git

A seguir, vamos configurar o Husky para que possamos usá-lo em nossos ganchos Git.

Dentro do nosso package.json arquivo, crie uma nova propriedade chamada husky com um objeto vazio.

"husky": {},

Você pode adicionar isso realmente onde quiser no package.json arquivo, mas vou adicioná-lo logo abaixo do scripts propriedade para que eu possa gerenciá-los mais facilmente juntos.

Dentro disso, queremos adicionar outra propriedade chamada hooks que também especifica um objeto vazio:

"husky": {  "hooks": {}},

É aqui que vamos adicionar nossos ganchos Git. Husky suporta muito todos os ganchos Git definidos pelo Git, para que possamos ser tão flexíveis quanto quisermos em nosso fluxo de eventos Git.

Para testar isso, criei um novo ramo onde eu literalmente adicionei todos os ganchos Git daquela página, incluindo um script que simplesmente grava no terminal [Husky] event name.

Nota: não sinta que precisa fazer isso, a menos que esteja curioso. O objetivo é poder mostrar com meu exemplo como funciona.

“husky”: {  “hooks”: {    “applypatch-msg”: “echo ”[Husky] applypatch-msg””,    “pre-applypatch”: “echo ”[Husky] pre-applypatch””,    “post-applypatch”: “echo ”[Husky] post-applypatch””,    “pre-commit”: “echo ”[Husky] pre-commit””,

O que isso fará é dizer a Husky que, em cada estágio em que temos permissão para nos conectar ao Git, diga-nos!

Quando eu confirmo essa alteração, podemos ver imediatamente que o Husky dispara alguns de nossos scripts.

husky commit hooks

Esses são todos os eventos que o Git nos permite conectar que acontecem durante o processo de commit.

E da mesma forma, se eu enviar essas alterações para o Github, posso ver que o processo de push executa o pre-push gancho!

husky push hooks

Você nunca pode usar a maioria dos ganchos que o Husky e o Git fornecem (vimos apenas alguns entre esses dois comandos).

Mas é incrível poder ver como isso pode ser poderoso, seja executando código que formata nosso código, evita que as chaves de acesso secretas sejam confirmadas ou realmente qualquer outra coisa que possa ajudar a automatizar tarefas importantes para o seu fluxo de trabalho.

Agora podemos ver que podemos configurar o Husky especificando a configuração e os ganchos diretamente em nosso package.json.

Acompanhe o commit.

Nota: Se você quiser verificar meu branch que inclui todos os ganchos Git para testar, você pode encontrar no Github.

Etapa 3: como usar o Husky para formatar o código com o Prettier

Finalmente, para um caso de uso do mundo real, vamos testar usando o Prettier para formatar automaticamente nosso código.

Prettier é uma ferramenta opinativa de formatação de código que permite que você limpe facilmente seu código para que pareça que uma única pessoa o escreveu.

Por que ferramentas como o Prettier são importantes? Ao trabalhar com código, especialmente com uma equipe, é importante manter a consistência para que todos saibam o que esperar. Isso ajudará a evitar discussões sobre o ponto e vírgula em uma revisão de código, mas também ajudará a detectar erros de sintaxe e evitar bugs.

Aviso: a execução do Prettier formatará automaticamente todo o seu código. Enquanto vamos testar isso antes de enviar as alterações, uma vez que você aplique isso como um Git Hook, ele automatizará o processo.

Para começar a usar o Prettier, vamos instalá-lo com nosso gerenciador de pacotes:

yarn add prettier -D# ornpm install prettier --save-dev

Observação: estamos instalando o mais bonito como um devDependency pois nosso aplicativo não precisa disso para ser executado.

Em seguida, podemos adicionar um novo script em nosso package.json isso tornará mais fácil executar o Prettier para testar isso.

Dentro de scripts propriedade, adicione:

"lint": "prettier --check ."

Para este primeiro teste, vamos executá-lo como uma “verificação” que nos permitirá ver quais arquivos seriam alterados.

Execute o seguinte:

yarn lint# or npm run lint

E assim que o fizermos, podemos ver que Prettier está nos dizendo que mudaria os arquivos listados.

prettier check

Neste ponto, nosso código permanecerá inalterado. Mas se quisermos executar o Prettier de verdade para fazer essas alterações, podemos primeiro adicionar um script adicional:

"format": "prettier --write ."

E se executarmos esse script, ele atualizará todos os arquivos para formatar o código de acordo com as especificações de Prettier.

Aviso: apenas mais uma nota, executar Prettier para escrever as alterações fará as alterações em seus arquivos. Todas essas são alterações de estilo de código que não devem afetar a forma como o código é executado, mas sim a aparência do código. Antes de executar a formatação, você deve salvar qualquer alteração se comprometendo com o Git para que possa reverter facilmente as alterações se não estiver satisfeito com elas.

Agora você pode executar o script com:

yarn format

E podemos ver que Prettier atualizou nossos arquivos!

prettier write

Agora, a parte que é relevante para este passo a passo: podemos adicionar isso como um gancho Git. Dessa forma, quando alguém tenta submeter o código, o Prettier é executado antes que o código seja salvo. Isso significa que sempre manteremos o código consistente com o estilo de formatação de Prettier.

Dentro de nossa configuração de ganchos Husky, vamos adicionar:

"husky": {  "hooks": {    "pre-commit": "prettier --write . && git add -A ."  }},

Se você notar em nosso gancho de pré-confirmação, também estamos adicionando git add -A ..

Quando o Husky é executado, ele simplesmente executa o script fornecido. Ao executar nosso comando mais bonito, estamos apenas formatando o código, mas nunca salvamos essas alterações como parte do processo. Então usamos git add para armazenar todas essas mudanças e incluí-las no commit.

Para testar isso, reverti as alterações em todos os arquivos que foram formatados antes. Se estiver acompanhando o mesmo projeto, você pode executar:

git checkout pages

O que redefinirá todas as mudanças em pages até o último commit.

Agora, vamos tentar adicionar todos os nossos arquivos com o Git e enviar as alterações.

git commit husky precommit prettier

E uma vez que executamos nosso comando de confirmação, podemos ver que o gancho de pré-confirmação do Husky já entra em ação e formata nosso código!

Acompanhe o commit.

O que posso fazer a seguir?

Use lint-staged para executar formatação apenas em arquivos alterados

Estamos usando o Prettier bem em nosso gancho de pré-confirmação e especificando . o que significa que ele sempre será executado em todos os arquivos.

Podemos usar uma ferramenta chamada encenado, que nos permite ainda executar nossos ganchos Git com o Husky, mas ele só será executado em arquivos que são testados.

Por exemplo, se quiséssemos fazer isso com Husky e mais bonito, nossa configuração poderia ser assim:

"husky": {  "hooks": {    "pre-commit": "lint-staged"  }},"lint-staged": {  "*": "prettier --write"},

Como parte de como o lint é executado, ele anexará os arquivos alterados ao final de nossa declaração mais bonita automaticamente para nós.

Você também perceberá que não incluímos git add. O lint-staged também adicionará quaisquer alterações ao Git para nós automaticamente.

Defina uma configuração mais bonita para personalizar as regras de formatação

Mais bonito é muito opinativo. Existem algumas coisas que eu pessoalmente não prefiro e você pode sentir o mesmo.

Felizmente, o Prettier permite que você defina um arquivo de configuração que pode substituir alguns desses arquivos para deixar seu código do jeito que você e sua equipe desejam.

Diga a Prettier para ignorar arquivos com .prettierignore

Você provavelmente também não quer que o Prettier seja executado em “todas as coisas” (talvez você queira).

Mais bonito permite que você configure um .prettierignore arquivo dentro da raiz do projeto ao lado de package.json, igual a .gitignore, que permite que você diga ao Prettier em quais arquivos ele não deve ser executado.


Siga-me para mais Javascript, UX e outras coisas interessantes!





Fonte