style/imports sort

[imattferreira]

Salve galera!!

Esse PR faz a reimplementação do #552 e que foi levandado novamente pelo @aprendendofelipe em #1494.

Nesse PR foi adicionado um novo plugin do prettier, o @trivago/prettier-plugin-sort-imports, e, em 5dfb0df aproveitei e transformei alguns imports que estavam no padrão commonJS para ESModules.

[vercel]

@MattFerreira18 is attempting to deploy a commit to the TabNews Team on Vercel.

A member of the Team first needs to authorize it.

[aprendendofelipe]

Fala @MattFerreira18, muito obrigado pelo PR! 💪💪💪

Analisando seu PR anterior (#552), gostei mais da sua primeira proposta que era usando só o ESLint. Só que faltavam alguns ajustes nela, além de fazer funcionar corretamente o script lint:fix, já que faltava o "ponto" (.) no package.json. Só pela falta desse ponto é que não funcionou a correção automática na sua primeira sugestão, mas é um problema que já estava presente antes da sua proposta, e ainda está presente no código 😅

Fora isso, tem duas coisas presentes nas duas versões (com eslint ou prettier) que me incomodam um pouco:

1. A configuração necessária para separar as importações internas e externar. Especificamente o fato de precisar listar as principais pastas do projeto no arquivo de configuração, pois isso não é intuitivo para qualquer um contribuidor que adicionar novas pastas no projeto futuramente. Inclusive no PR faltou adicionar o alias @/, pois senão o import from '@/TabNewsUI' fica agrupado com as importações externas.

2. A ordem de classificação em boa parte dos arquivos não está compatível com a organização automática do VS Code, ou seja, dependendo da configuração do editor, por exemplo se estiver organizando automaticamente ao salvar, muitos arquivos vão dar trabalho desnecessário para os contribuidores.

Vendo como ajustar essas coisas, percebi que não precisamos adicionar nenhuma nova biblioteca, mas apenas configurar adequadamente o sort-imports do ESLint e o plugin eslint-plugin-import que já está presente por causa do eslint-config-next e também pelo eslint-plugin-primer-react.

Como seriam muitas mudanças para sugerir nesse PR, preferi abrir o #1499, mas como você também já dedicou tempo para resolver esses problemas, seria muito bom ter sua revisão por lá, pelo menos no primeiro commit (01cbb3a), onde o arquivo .eslintrc é a única modificação relevante fora a correção do script no package.json. O restante são só as adequações dos demais arquivos para as novas regras. 💪💪💪

O problema 1 foi resolvido configurando o path no resolver e adicionando @/** em pathGroups:

"settings": {
  "import/resolver": {
    "node": {
      "paths": ["."]
    }
  }
}

e

"pathGroups": [
  {
   "pattern": "@/**",
   "group": "internal"
  }
]

Já o problema 2 foi resolvido para quase todos os arquivos com o restante das configurações. A exceção são dois arquivos (pages/[username] e TabCoinsButtons) que possuem essas duas linhas:

import { ... } from 'next/router';
import { ... } from 'next-swr';

Onde o ESLint deixa na ordem acima, pois considera next antes de next-swr, mas o VS Code leva em consideração next/router com a barra sendo um caractere e não um divisor, o que inverte a ordem de classificação.

Nos últimos commits eu aproveitei para ajustar outras configurações do ESLint, mas não tem relação com os imports.

[imattferreira]

Fala @MattFerreira18, muito obrigado pelo PR! 💪💪💪

Analisando seu PR anterior (#552), gostei mais da sua primeira proposta que era usando só o ESLint. Só que faltavam alguns ajustes nela, além de fazer funcionar corretamente o script lint:fix, já que faltava o "ponto" (.) no package.json. Só pela falta desse ponto é que não funcionou a correção automática na sua primeira sugestão, mas é um problema que já estava presente antes da sua proposta, e ainda está presente no código 😅

Fora isso, tem duas coisas presentes nas duas versões (com eslint ou prettier) que me incomodam um pouco:

1. A configuração necessária para separar as importações internas e externar. Especificamente o fato de precisar listar as principais pastas do projeto no arquivo de configuração, pois isso não é intuitivo para qualquer um contribuidor que adicionar novas pastas no projeto futuramente. Inclusive no PR faltou adicionar o alias `@/`, pois senão o `import from '@/TabNewsUI'` fica agrupado com as importações externas.

2. A ordem de classificação em boa parte dos arquivos não está compatível com a organização automática do VS Code, ou seja, dependendo da configuração do editor, por exemplo se estiver organizando automaticamente ao salvar, muitos arquivos vão dar trabalho desnecessário para os contribuidores.

Vendo como ajustar essas coisas, percebi que não precisamos adicionar nenhuma nova biblioteca, mas apenas configurar adequadamente o sort-imports do ESLint e o plugin eslint-plugin-import que já está presente por causa do eslint-config-next e também pelo eslint-plugin-primer-react.

Como seriam muitas mudanças para sugerir nesse PR, preferi abrir o #1499, mas como você também já dedicou tempo para resolver esses problemas, seria muito bom ter sua revisão por lá, pelo menos no primeiro commit (01cbb3a), onde o arquivo .eslintrc é a única modificação relevante fora a correção do script no package.json. O restante são só as adequações dos demais arquivos para as novas regras. 💪💪💪

O problema 1 foi resolvido configurando o path no resolver e adicionando @/** em pathGroups:

"settings": {
  "import/resolver": {
    "node": {
      "paths": ["."]
    }
  }
}

e

"pathGroups": [
  {
   "pattern": "@/**",
   "group": "internal"
  }
]

Já o problema 2 foi resolvido para quase todos os arquivos com o restante das configurações. A exceção são dois arquivos (pages/[username] e TabCoinsButtons) que possuem essas duas linhas:

import { ... } from 'next/router';
import { ... } from 'next-swr';

Onde o ESLint deixa na ordem acima, pois considera next antes de next-swr, mas o VS Code leva em consideração next/router com a barra sendo um caractere e não um divisor, o que inverte a ordem de classificação.

Nos últimos commits eu aproveitei para ajustar outras configurações do ESLint, mas não tem relação com os imports.

(mals pela demora, fiquei enrolado com algumas coisas da facul e do job) showw, vou dar uma olhada no seu PR sim. Vou aproveitar e fechar esse daqui tbm

[aprendendofelipe]

@imattferreira, você foi citado no post comemorativo:

https://www.tabnews.com.br/FelipeBarso/parabens-tabnews-aniversario-de-lancamento-e-mais-melhorias 🎉