NextJS utilizando Prettier, ESLint e Husky

Fala pessoal, beleza? Hoje vamos criar um projeto NextJS, Configurar ele para iniciar o desenvolvimento e instalar o Prettier, ESLint e o Husky.

1. Primeiro vamos criar um projeto NextJS com TypeScript (Utilizarei comandos Yarn porém pode ser utilizado o NPM normalmente)

npx create-next-app@latest --typescript
# ou com YARN
yarn create next-app --typescript

1.1 Ele irá perguntar o nome do project, coloque o nome que quiser e tecle enter.

1.2 Espere finalizar e pronto, temos um novo projeto NextJS feito!

2. Agora vamos instalar as dependências do ESLint.

O ESLint é uma ferramenta que identifica problemas no Código de sintaxe, imports entre outros, a sua principal finalidade é manter o código no padrão correto.

instalando as dependências:

yarn add -D eslint
# ou com o NPM
npm install eslint --save-dev

2.1. Inicie o Wizard do ESLint com o comando abaixo:

npx eslint --init

2.2. Selecione a ultima opção para que o ESLint cheque se o código tem problemas de sintaxe entre outros.

2.3. Escolha JavaScript

2.4. Escolha React

2.5. Selecione que o projeto possui TypeScript

2.6. Marque que o projeto usa o Browser

2.7. Selecione para que seja escolhido um modelo popular de estilização

2.8. Escolha o Airbnb

2.9. Escolha o formado de configuração do ESLint para JSON

2.10. Agora ele irá perguntar se pode instalar as dependências mostrada em tela, deixe em YES e tecle enter

2.11. Pronto, o ESLint está configurado, vamos alterar o .eslintrc.json com as informações abaixo:

3.1. Configurando o Prettier!

O Prettier é uma ferramenta para formatação de código, ele vai sempre garantir que seu código está bem formatado assim deixando mais padronizado.

Instalando o Prettier:

yarn add -D prettier
# ou com o NPM
npm install --save-dev --save-exact prettier

3.2. Agora vamos instalar a extensão do ESLint que irá trabalhar em conjunto com o Prettier

yarn add -D eslint-config-prettier eslint-plugin-prettier
# ou com o NPM
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

3.3. Pronto! o Prettier está configurado.

4.4. Bonus: Configurando o VScode para salvar e formatar com o Prettier.

4.4.1. Instale a Extensão do VSCode procurando na sua loja

4.4.2. Abra o VScode, vá em File > Preference > Settings

4.4.3. Em Search Settings, pesquise por “Default formatter”

4.4.4. Selecione o Prettier

4.4.5. Pesquise também por “Format on save” e marque a opção, isso fará o Prettier já salvar quando for salvo usando o control + save

Pronto, o rodapé do VSCode ficará com o simbolo do Prettier e os dois checks

5.1. Por fim, vamos instalar o Husky:

yarn add -D husky
# ou usando o NPM
npm install husky --save-dev

5.2. Configurando o Husky, rode o comando abaixo:

npx husky-init

5.3. Altere o package.json e adicione esses scripts abaixo:

5.4. Agora vamos até a pasta criada pelo Husky de nome .husky e abra o arquivo .pre-commit, dentro dele adicione o código abaixo.

• check-types: Irá verificar se os arquivos possuem erro de tipagem.
• check-format: O Prettier irá checar se a formatação está certa.
• check-lint: O ESLint irá checar se os arquivos não possuem erros de sintaxe, importação entre outros problemas.
• format: Formata automaticamente todo o código.
• test-all: Verifica de uma vez todos os comandos citados.

6.1. Agora o grand finale, para que tudo isso funcione apenas digite “git add .” para dar um stage nos arquivos e “git commit” e o husk entrará em ação checando e te falando tudo, massa né?

🚀 Iniciando a checagem de formatação, problemas de sintaxe, tipagem e construção.
🎨 Checando a formatação...
> my-app@0.1.0 check-format
> prettier --check .
Checking formatting...
[warn] .next/build-manifest.json
[warn] .next/package.json
[warn] .next/react-loadable-manifest.json
[warn] .next/server/middleware-manifest.json
[warn] .next/server/pages-manifest.json
[warn] .next/server/pages/_app.js
[warn] .next/server/pages/_document.js
[warn] .next/server/pages/_error.js
[warn] .next/server/pages/index.js
[warn] .next/server/webpack-runtime.js
[warn] .next/static/chunks/amp.js
[warn] .next/static/chunks/main.js
[warn] .next/static/chunks/pages/_app.js
[warn] .next/static/chunks/pages/_error.js
[warn] .next/static/chunks/pages/index.js
[warn] .next/static/chunks/polyfills.js
[warn] .next/static/chunks/react-refresh.js
[warn] .next/static/chunks/webpack.js
[warn] .next/static/development/_buildManifest.js
[warn] .next/static/development/_middlewareManifest.js
[warn] .next/static/development/_ssgManifest.js
[warn] .next/static/webpack/a58c3f09ade683e8.webpack.hot-update.json
[warn] .next/static/webpack/webpack.a58c3f09ade683e8.hot-update.js
[warn] next.config.js
[warn] package.json
[warn] pages/_app.tsx
[warn] pages/api/hello.ts
[warn] pages/index.tsx
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
💥💥💥 Formatação está incorreta! 💥💥💥
      Talvez você não tenha rodado o comando "npm run format" então vamos fazer isso por você.
 
📝 Formatando o código...
> my-app@0.1.0 format
> prettier --write .
.eslintrc.json 13ms
.next/build-manifest.json 3ms
.next/package.json 1ms
.next/react-loadable-manifest.json 2ms
.next/server/middleware-manifest.json 2ms
.next/server/pages-manifest.json 2ms
.next/server/pages/_app.js 19ms
.next/server/pages/_document.js 28ms
.next/server/pages/_error.js 7ms
.next/server/pages/index.js 27ms
.next/server/webpack-runtime.js 62ms
.next/static/chunks/amp.js 75ms
.next/static/chunks/main.js 227ms
.next/static/chunks/pages/_app.js 12ms
.next/static/chunks/pages/_error.js 5ms
.next/static/chunks/pages/index.js 11ms
.next/static/chunks/polyfills.js 753ms
.next/static/chunks/react-refresh.js 37ms
.next/static/chunks/webpack.js 115ms
.next/static/development/_buildManifest.js 5ms
.next/static/development/_middlewareManifest.js 2ms
.next/static/development/_ssgManifest.js 2ms
.next/static/webpack/a58c3f09ade683e8.webpack.hot-update.json 1ms
.next/static/webpack/webpack.a58c3f09ade683e8.hot-update.js 3ms
next-env.d.ts 8ms
next.config.js 1ms
package.json 1ms
pages/_app.tsx 8ms
pages/api/hello.ts 5ms
pages/index.tsx 18ms
README.md 26ms
styles/globals.css 27ms
styles/Home.module.css 21ms
tsconfig.json 3ms
✅ Formatação realizada! Adicione as mudanças ao git e faça o commit novamente
husky - pre-commit hook exited with code 1 (error)

Perceba que o Prettier achou erros na formatação, depois disso ele fez as alterações, assim você necessita dar um “git add .” para colocar os arquivos formatados no stage e assim rodar o “git commit” novamente para o Husk analisar novamente se possui algum problema.

Se tudo ocorrer bem, o Husky irá retornar esta mensagem:

🚀 Iniciando a checagem de formatação, problemas de sintaxe, tipagem e construção.
🎨 Checando a formatação...
> my-app@0.1.0 check-format
> prettier --check .
Checking formatting...
All matched files use Prettier code style!
✅ Formatação sem problemas
🎨 Checando a Sintaxe...
> my-app@0.1.0 check-lint
> eslint . --ext ts --ext tsx --ext js
✅ Sintaxe sem problemas
✏️ Checando a tipagem...
> my-app@0.1.0 check-types
> tsc --pretty --noEmit
✅ Tipagem sem problemas
🔨 Inicializando a construção do projeto (Building)
> my-app@0.1.0 build
> next build
info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
info  - Generating static pages (3/3)
info  - Finalizing page optimization
Page                                       Size     First Load JS
┌ ○ /                                      5.56 kB        76.5 kB
├   └ css/149b18973e5508c7.css             655 B
├   /_app                                  0 B            70.9 kB
├ ○ /404                                   194 B          71.1 kB
└ λ /api/hello                             0 B            70.9 kB
+ First Load JS shared by all              70.9 kB
  ├ chunks/framework-e70c6273bfe3f237.js   42 kB
  ├ chunks/main-a054bbf31fb90f6a.js        27.6 kB
  ├ chunks/pages/_app-ca6aae25bc99a05f.js  491 B
  ├ chunks/webpack-69bfa6990bb9e155.js     769 B
  └ css/27d177a30947857b.css               194 B
λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
✅ Projeto contruído com sucesso!
✅ Codigo sem erros de formatação, tipagem, sintaxe e construção!
📦️ Commit realizado, faça o git push para enviar ao repositório remoto.
[main 1f455b6] Teste commit
 8 files changed, 460 insertions(+), 254 deletions(-)
 rewrite .eslintrc.json (90%)
 create mode 100755 .husky/pre-commit

Projeto completo para testes no Github (está em inglês o Husky)

GitHub - simeithander/nextjs-eslint-prettier-husky: Clean project NextJS with ESLint, Prettier and…

Até mais!