Configuração Eslint Plugin Simple Import Sort para projetos Next.js 14 §

---

Para configurar o plugin eslint-plugin-simple-import-sort em um projeto Next.js 14 para organizar e ordenar as importações de forma automática, siga os passos abaixo.

1. Instalar o Plugin §

Primeiro, você precisa instalar o plugin eslint-plugin-simple-import-sort como uma dependência de desenvolvimento.

npm install --save-dev eslint-plugin-simple-import-sort

Isso adiciona o plugin ao seu projeto para que o ESLint possa usá-lo durante o processo de linting.

2. Configurar o Plugin §

Dependendo de como você configurou o ESLint em seu projeto Next.js, você deve adicionar o plugin e as regras de ordenação em um dos arquivos de configuração do ESLint. Vou mostrar como fazer isso usando os dois formatos de configuração comuns: .eslintrc e eslint.config.js (configuração plana).

Se você estiver usando um arquivo de configuração .eslintrc (JSON ou JS), faça o seguinte:

1. Abra ou crie um arquivo .eslintrc.json (ou .eslintrc.js dependendo do formato que você estiver usando).
2. Adicione o plugin "simple-import-sort" à lista de plugins.
3. Defina as regras para simple-import-sort/imports e simple-import-sort/exports.

Exemplo de .eslintrc.json:

{
 "plugins": ["simple-import-sort"],
 "rules": {
   "simple-import-sort/imports": "error",
   "simple-import-sort/exports": "error"
 },
 "parserOptions": {
   "sourceType": "module",
   "ecmaVersion": "latest"
 }
}

Aqui, sourceType: "module" e ecmaVersion: "latest" são especificados para garantir que o ESLint entenda a sintaxe de importação e as versões mais recentes do ECMAScript.

3. Evitar Conflitos com Outras Regras de Ordenação §

Certifique-se de não usar outras regras de ordenação de importações ao mesmo tempo, como:

• sort-imports
• import/order

Essas regras podem entrar em conflito com simple-import-sort e causar problemas ou inconsistências na ordenação das importações.

Referências §

---

https://github.com/lydell/eslint-plugin-simple-import-sort?tab=readme-ov-file