Configuração Eslint Plugin Tailwind CSS para projetos Next.js 14 §

---

Abaixo está um passo a passo para instalar e configurar o plugin ESLint para Tailwind CSS em um projeto Next.js na versão 14:

1. Instalar Dependências §

Primeiro, você precisa instalar o ESLint e o plugin eslint-plugin-tailwindcss:

npm i -D eslint eslint-plugin-tailwindcss

2. Criar o Arquivo de Configuração do ESLint §

Busque pelo um arquivo .eslintrc.json na raiz do seu projeto.

{
  "extends": ["next/core-web-vitals"]
}

Adicione a configuração para o plugin Tailwind CSS.

{
  "root": true,
  "extends": ["next/core-web-vitals", "plugin:tailwindcss/recommended"],
}

3. Configurar os Parsers do ESLint §

Dependendo das linguagens usadas no seu projeto (JavaScript ou TypeScript), você deve configurar os parsers apropriados. Para TypeScript, instale o parser @typescript-eslint/parser:

npm i -D @typescript-eslint/parser

Adicione a configuração do parser no arquivo .eslintrc.json:

{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js"],
      "parser": "@typescript-eslint/parser"
    }
  ]
}

4. Adicionar Scripts ao package.json §

Adicione scripts no seu package.json para executar o ESLint:

"scripts": {
  "lint": "eslint ./src",
  "lint:debug": "eslint ./src --debug",
  "lint:fix": "eslint ./src --fix"
}

Observação

Esse script foi criado para projetos Next.js nos quais foram utilizado a ” na criação do mesmo. Se aplicável, mude o diretório ./src para ./app e demais diretórios do componentes.

5. Executar o Linter §

Ao final deste guia você deter ter o arquivo .eslintrc.json com a seguinte configuração;

{
  "root": true,
  "extends": ["next/core-web-vitals", "plugin:tailwindcss/recommended"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js"],
      "parser": "@typescript-eslint/parser"
    }
  ]
}

Para executar a tarefa de linting, você pode usar:

npm run lint

Para obter feedback em tempo real, você também pode usar a extensão ESLint do VS Code. Certifique-se de reiniciar o VS Code se necessário para que a extensão funcione corretamente.

Referências §

---

https://www.npmjs.com/package/eslint-plugin-tailwindcss