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:
Rocketseat
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!
