[sugestão]: configurar eslint para organizar a ordem das importações de módulos

[imattferreira]

Salve galera!

Nesse PR trago uma sugestão para podermos organizar e padronizar a ordem das importações de módulos. Para fazer essa padronização, fiz a implementação de dois plugins para o eslint, sendo eles:

• eslint-plugin-import: responsável por fazer toda a ordenação dos imports
• eslint-import-resolver-alias: trabalha em conjunto com o outro plugin, sendo responsável por resolver possíveis conflitos com importações feitas a partir de alias.

Com a configuração desses plugins, a ordem dos imports ficaria nessa ordem:

<import de libs do node>

<import de libs>

<import por alias>

<import sem atribuição de variável>

OBS:

• dentro de cada seção de imports, é feita uma organização de forma alfabética e case insensitive.
• Algo que notei mas acabei não encontrando uma solução, foi que na seção dos import por alias, o eslint-plugin-import acaba fazendo uma subordenação por cada alias seguida de uma ordenação em ordem alfabética, ao invés de ordenar por ordem alfabética apenas. Exemplo (tirado do arquivo models/activation.js):

import { ForbiddenError, NotFoundError } from 'errors/index.js';
import database from 'infra/database.js';
import email from 'infra/email.js';
import authorization from 'models/authorization.js';
import user from 'models/user.js';

OBS 2:

• durante a implementação encontrei alguns imports de módulos node sem utilizar aquele prefixo node:<nome_modulo>, assim aproveitei e já arrumei eles.

[filipedeschamps]

@MattFerreira18 SENSACIONAL! Eu não sabia que isso existia e mentalmente tentava fazer uma certa organização assim, que obviamente fazer isso manualmente fica uma loucura.

Vou resolver o conflito e vamos seguir com esse PR 🤝

[filipedeschamps]

Hmm eu consigo fazer o lint funcionar, mas não consigo por nada fazer o lint ser aplicado automaticamente. @MattFerreira18 como você fez? Estou estressando alguns cenários que obviamente estão errados, mas o eslint --fix não conserta.

[imattferreira]

Hmm eu consigo fazer o lint funcionar, mas não consigo por nada fazer o lint ser aplicado automaticamente. @MattFerreira18 como você fez? Estou estressando alguns cenários que obviamente estão errados, mas o eslint --fix não conserta.

@filipedeschamps para mim a organização automática dos imports tinha funcionado certinho usando o npm run lint (q já roda o eslint junto com o prettier), mas posso dar uma verificada.

[filipedeschamps]

@MattFerreira18 show!

Eu instalei as dependências e no npm run lint ele de fato reclama (e acaba reclamando de várias coisas), mas no npm run lint:fix que roda por trás o eslint não faz nada. Talvez o script lint:fix esteja com algum problema.

[vercel]

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

To accomplish this, @MattFerreira18 needs to request access to the Team.

Afterwards, an owner of the Team is required to accept their membership request.

If you're already a member of the respective Vercel Team, make sure that your Personal Vercel Account is connected to your GitHub account.

[imattferreira]

@filipedeschamps De alguma forma q n consegui entender ainda, o fix dos imports funcionou só daquela vez comigo, sendo q pela doc do plugin nem era para ter funcionado esse comportamento de autofix (link da issue).

De qualquer forma, dando uma pesquisada, achei um outro plugin, só q para o prettier ao invés do eslint, (link do plugin) que faz a msm função dos dois outros plugins q eu tinha instalado anteriormente e mais um pouco (ele tbm organiza os imports nameados q estão entre { }), só q com ele n é possível deixar os side-effects imports (aqueles q apenas importam o arquivo) no topo do arquivo, assim eles acabam ficando no final do agrupamento de imports de pacotes de terceiros.

[filipedeschamps]

O do prettier parece massa heim! E daí já rodaria no auto-save!

[imattferreira]

Sim! E ainda é a galera do Trivago q está dando manutenção para esse plugin do Prettier, aí acredito eu que a gente n vai ter problema do plugin ficar defassado/deprecated por um longo tempo.

[filipedeschamps]

Massa! Então uma sugestão: o que acha de fazermos essa grande refatoração no final da Milestone? Digo isso, pois é um período em que a codebase está mais parada e vai caber melhor fazer grandes movimentações assim. O que acha? 🤝

[imattferreira]

Acho uma boaa! Para ninguém confundir q esse PR está aguardando pelo final da milestone, você acha bom add alguma label, tipo a de waiting?

[filipedeschamps]

@MattFerreira18 nesse caso sugiro fechar o PR para abrirmos um com a main atualizada, vai dar menos merge conflict 👍

[imattferreira]

Ahh entendi, então já vou fechar o PR e quando a milestone tiver no finalzin crio um novo.