Adaptação para o eslint v9

[KajiyamaVK]

O modelo do config como .eslintrc.json não é mais aceito. Agora temos o eslint.config.js, porém, no formato flat.

Na versão 8x o eslintrc ainda funcionava apesar de estar deprecated, mas agora ele não é mais reconhecido.

Sugiro que defina a versão 8.56 fixo nas dependências, ou, que seja efetuada a adaptação para o modelo flat.

Ou até mesmo deixe como 8.56 paliativamente até que seja efetuada a adaptação. Porém, do jeito que está, ele está baixando a versão 9.x e dando erros no output do eslint.

[brunaporato]

Aguardando a atualização também :D

[lucivaldo]

Aguardando atualização.

[lucianolopezz]

Aguardando atualização.

[diego3g]

Fala pessoal!

Muita coisa rolou desde as últimas atualizações do ESLint, basicamente a equipe do ESLint não recomenda mais a formatação através do ESLint e recomendam usar libs externas (como o Prettier) desacoplado do ESLint.

Vários plugins e configs não se atualizaram para o novo formato de Flat Config do ESLint gerando uma série de bugs.

A partir disso, percebi que existem dois pacotes legais de utilizarmos aqui no projeto:

1. O Neostandard que é uma continuação do projeto "standard" que usamos como padrão de regras pra linting (https://github.com/neostandard/neostandard);
2. E o Stylistic que é um pacote de formatação para o ESLint para substituir o Prettier como formatação já que o plugin do Prettier pra ESLint tem sofrido com alguns problemas chatos (https://eslint.style/);

Estou tentando criar uma versão 3.0.0 da config da Rocketseat com essas atualizações, mas infelizmente, pelo jeito, não vamos conseguir ter exatamente as mesmas funcionalidades de formatação (por exemplo, o Stylistic não suporta o fix automático em linhas maiores que 80 caracteres e, por isso, o fix precisa ser manual).

Apesar desses probleminhas, creio que valha uma nova versão e, por isso, estou trabalhando nela e devo liberar ainda essa semana uma versão de testes.

[diego3g]

@lucivaldo @lucianolopezz podem testar a versão BETA? https://github.com/Rocketseat/eslint-config-rocketseat/pull/26

Necessário ter o TypeScript na versão 5 ou mais e o ESLint na versão 9 ou mais.

[lucivaldo]

@lucivaldo @lucianolopezz podem testar a versão BETA? #26

Necessário ter o TypeScript na versão 5 ou mais e o ESLint na versão 9 ou mais.

Posso sim Diegão.

[lucivaldo]

@lucivaldo @lucianolopezz podem testar a versão BETA? #26

Necessário ter o TypeScript na versão 5 ou mais e o ESLint na versão 9 ou mais.

Eu tive esse problema ao executar npm run lint. Mas eu estou usando em um projeto Next.

my-project on  testando-plugin-rocketseat-eslint [!?] via  v20.12.2 via  v3.12.3 
❯ npm run lint

> my-project@0.1.0 lint
> next lint

Invalid Options:
- Unknown options: useEslintrc, extensions, resolvePluginsRelativeTo, rulePaths, ignorePath, reportUnusedDisableDirectives
- 'extensions' has been removed.
- 'resolvePluginsRelativeTo' has been removed.
- 'ignorePath' has been removed.
- 'rulePaths' has been removed. Please define your rules using plugins.
- 'reportUnusedDisableDirectives' has been removed. Please use the 'overrideConfig.linterOptions.reportUnusedDisableDirectives' option instead.

O arquivo .eslintrc.json eu não alterei também. Deixei do jeito que estava. Precisa alterar?

.eslintrc.json:

{
  "extends": [
    "@rocketseat/eslint-config/next",
    "plugin:@tanstack/eslint-plugin-query/recommended",
    "next/core-web-vitals"
  ],
  "plugins": ["simple-import-sort"],
  "rules": {
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "^_",
        "caughtErrorsIgnorePattern": "^_",
        "destructuredArrayIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}

[diego3g]

@lucivaldo Não roda pelo next lint e sim pelo eslint direto. O Next ainda não trouxe suporte ao ESLint 9 no plugin deles.

Sim, não pode deixar o .eslintrc.json da mesma forma, precisa deletar ele e criar da forma que eu mencionei na PR.

Cria um arquivo eslint.config.mjs e adiciona o conteúdo:

import config from '@rocketseat/eslint-config/react.mjs'

export default config

[lucivaldo]

Aqui deu certo!

/home/lucivaldo/dev/my-project/sentry.edge.config.ts
   1:1  warning  This line has a length of 108. Maximum allowed is 80  @stylistic/max-len
   2:1  warning  This line has a length of 84. Maximum allowed is 80   @stylistic/max-len
   3:1  warning  This line has a length of 107. Maximum allowed is 80  @stylistic/max-len
  18:1  warning  This line has a length of 109. Maximum allowed is 80  @stylistic/max-len

/home/lucivaldo/dev/my-project/sentry.server.config.ts
  17:1  warning  This line has a length of 109. Maximum allowed is 80  @stylistic/max-len

/home/lucivaldo/dev/my-project/src/app/(private)/people/components/Content.tsx
  21:31  error  'React' is not defined  no-undef

/home/lucivaldo/dev/my-project/src/app/(private)/people/components/modals/AcumulacaoDefensorModal.tsx
  31:27  error  'React' is not defined  no-undef

/home/lucivaldo/dev/my-project/src/app/(private)/people/components/modals/AtuacaoDefensorModal.tsx
  31:27  error  'React' is not defined  no-undef

/home/lucivaldo/dev/my-project/src/app/(private)/people/components/modals/SubstituicaoDefensorModal.tsx
  31:27  error  'React' is not defined  no-undef

/home/lucivaldo/dev/my-project/src/app/(private)/people/components/modals/TitularidadeDefensorModal.tsx
  31:27  error  'React' is not defined  no-undef

/home/lucivaldo/dev/my-project/src/app/(private)/people/components/tabs/DefensoresTabContent.tsx
  136:23  error  Unexpected newline before '}'  @stylistic/jsx-curly-newline

/home/lucivaldo/dev/my-project/src/app/(private)/people/hooks/useDefensoresQuery.ts
  26:32  warning  Unexpected trailing comma  @stylistic/comma-dangle

/home/lucivaldo/dev/my-project/src/app/(private)/people/hooks/useDefensoriasQuery.ts
  26:32  warning  Unexpected trailing comma  @stylistic/comma-dangle

/home/lucivaldo/dev/my-project/src/app/(private)/defensorias/[id]/editar/components/EditForm.tsx
   87:8   warning  Unexpected trailing comma          @stylistic/comma-dangle
   96:20  error    Curly braces are unnecessary here  @stylistic/jsx-curly-brace-presence
   96:40  error    Curly braces are unnecessary here  @stylistic/jsx-curly-brace-presence
  189:49  error    Curly braces are unnecessary here  @stylistic/jsx-curly-brace-presence
  193:26  error    Curly braces are unnecessary here  @stylistic/jsx-curly-brace-presence
  212:77  warning  Unexpected trailing comma          @stylistic/comma-dangle
  235:18  error    Curly braces are unnecessary here  @stylistic/jsx-curly-brace-presence

/home/lucivaldo/dev/my-project/src/app/(private)/defensorias/[id]/editar/hooks/useCoreTiposEvento.ts
  28:32  warning  Unexpected trailing comma     @stylistic/comma-dangle
  35:32  error    Strings must use singlequote  @stylistic/quotes

E a formatação no "save" do arquivo também está funcionando. Agora é só customizar as regras.

[lucivaldo]

@diego3g ☝️

[diego3g]

@lucivaldo Só cuidado que a customização de regras não é mais da mesma forma que antes, precisa dar uma boa olhada nas documentações.

Algumas coisas eu não customizaria, por exemplo, no teu erro de 'React' is not defined provavelmente importar o React seja melhor do que usar ele como global.

[lucivaldo]

@diego3g Sim. Vou deixar a importação de React explícita mesmo. Mas até agora estou gostando do stylistic. Muitas opções interessantes. Valeu aí Diego.

[lucianolopezz]

Aqui funcionou também

[JpRomao]

Testei a versão node e funcionou perfeitamente!

[JpRomao]

Encontrei um problema de no-unused-vars quando utilizado enum no typescript

[duhnunes]

Estava aqui testando, como eu poderia utilizar a nova configuração do eslint.config.mjs dada em #26 e eu cheguei ao código que me permite utilizar o simple-import-sort junto:

import config from '@rocketseat/eslint-config/react.mjs'
import simpleImportSort from 'eslint-plugin-simple-import-sort'

export default [
  ...config,
  {
    plugins: {
      'simple-import-sort': simpleImportSort,
    },
    rules: {
      'simple-import-sort/imports': 'error',
    },
  },
]

Dessa forma podemos adicionar mais plugins que já tem suporte para a versão flat config.

Também podemos utilizar a mesma lógica para o arquivo original que vem já instalado com o vite@latest eslint.config.js:

import js from '@eslint/js'
import globals from 'globals'
import reactRefresh from 'eslint-plugin-react-refresh'
import simpleImportSort from 'eslint-plugin-simple-import-sort'
import tseslint from 'typescript-eslint'
import reactHooks from 'eslint-plugin-react-hooks'

import rocketseatEslintConfig from '@rocketseat/eslint-config/react.mjs'

export default tseslint.config(
  ...rocketseatEslintConfig,
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      'simple-import-sort': simpleImportSort,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'simple-import-sort/imports': 'error',
    },
  },
)

Não sei se existiria algum problema com a repetição já instalada em @rocketseat/eslint-config de @eslint/js, typescript-eslint, globals.

Mas é uma maneira que encontrei de conseguir utilizar o eslint-config junto com outros plugins.

[tavareshenrique]

Vocês sabem como fazer para o VSCode formatar o arquivo automaticamente ao salva-lo com o Stylistic?

Lendo a doc, fiz o que foi pedido, e mesmo assim ao formatar ele não formata automaticamente.

[duhnunes]

Salve @tavareshenrique,

Eu comentei aqui: https://github.com/Rocketseat/eslint-config-rocketseat/pull/26#issuecomment-2303783903, que eu achei uma indentação um pouco parecida com a antiga, ainda não é 100%, mas já é alguma coisa.

EDIT: Se não for só isso ☝️, aqui está como fazer no seu VSCode: Em User Settings você coloca:

"editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit",
      },

isso vai fazer com que as correções sejam feitas quando você salvar.