Next.js e Tailwind: Como Configurar o ESLint e Prettier

A busca por eficiência e consistência no desenvolvimento de aplicações é um objetivo comum entre desenvolvedores. Ferramentas como ESLint, Prettier e Tailwind CSS desempenham um papel fundamental nesse processo, promovendo padrões de código e facilitando a estilização de componentes. Neste artigo, vamos explorar como configurar um projeto Next.js incorporando essas ferramentas, garantindo um fluxo de trabalho mais ágil e padronizado.

O Next.js

O Next.js se estabeleceu como uma das principais frameworks para o desenvolvimento de aplicações React, oferecendo funcionalidades como renderização no lado do servidor e geração de sites estáticos. Ao integrar o ESLint e o Prettier, podemos automatizar e padronizar a formatação do código, enquanto o Tailwind CSS nos permite construir interfaces de forma eficiente com uma abordagem de design utility-first.

Se você ainda não está familiarizado com o Next.js, recomendamos a leitura desse conteúdo:

Configurando o Projeto Next.js

Passo 1: Criação do Projeto

Inicialmente, crie um novo projeto Next.js utilizando o comando:

npx create-next-app@latest nome-do-projeto --use-npm

Aqui a flag --use-npm é para optar pelo pnpm como seu gerenciador de pacotes, caso tenha mais de uma opção instalada.

No entanto, caso não tenha o Tailwind:

Adicionando Tailwind CSS

Tailwind CSS pode ser adicionado ao seu projeto Next.js para facilitar a construção de interfaces com uma abordagem utility-first:

npm install -D tailwindcss postcss autoprefixer

Gere os arquivos de configuração necessários:

npx tailwindcss init -p

Customize o tailwind.config.js conforme as necessidades do seu projeto para aproveitar ao máximo o Tailwind CSS.

Passo 2: Configuração do ESLint

O Next.js já vem pré-configurado com ESLint, facilitando a adoção de boas práticas de codificação desde o início do projeto. Para personalizar ou ampliar essas configurações, você pode inicializar o ESLint no seu projeto com:

npx eslint --init

Siga as instruções para adequar as regras do ESLint às necessidades do seu projeto.

Passo 3: Integração com a Configuração da Rocketseat

Para projetos que desejam adotar as configurações de ESLint padronizadas pela Rocketseat, basta adicionar o pacote eslint-config-rocketseat:

npm install eslint-config-rocketseat

Em seguida, atualize o arquivo .eslintrc.json para estender as regras da Rocketseat:

{
  "extends": ["next/core-web-vitals","rocketseat/eslint-config/react"]
}

Passo 4: Configurações do Editor (VS Code)

Para otimizar a experiência de desenvolvimento no VS Code, adicione a seguinte configuração ao settings.json para formatar automaticamente o código ao salvar:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Passo 5: Plugin do Tailwind para Prettier

O Prettier é uma ferramenta de formatação de código que ajuda a manter a consistência do estilo do código. E como vamos estar usando TailwindCSS no nosso projeto para integrá-lo ao ESLint, instalaremos um plugin, então utilize:

pnpm install -D prettier-plugin-tailwindcss

Após a instalação, crie o arquivo prettier.config.js na raiz do projeto e adicione a seguinte configuração no arquivo para harmonizar as regras de formatação:

module.exports = {
 plugins: [require('prettier-plugin-tailwindcss')],
 }

Assim você terá uma integração ainda mais profunda, garantindo que as classes do Tailwind no seu código sejam automaticamente formatadas e ordenadas.

Ao seguir este guia, seu projeto Next.js estará configurado com ESLint, Prettier e Tailwind CSS, estabelecendo um ambiente de desenvolvimento coerente e produtivo. Essas ferramentas não apenas melhoram a qualidade do código, mas também facilitam a colaboração em equipe, garantindo que todos sigam os mesmos padrões de codificação e design.

Esperamos que este Guia tenha sido útil para configurar seu projeto Next.js. Happy coding!