Código organizado, código bonito!

Quando temos o código organizado, com padrões facilmente identificáveis, fica mais fácil a sua legibilidade e por consequente um melhor entendimento, facilitando possíveis manutenções.

Dentro deste contexto, abordamos a seguir aquilo que pode vir a ser uma boa prática na organização dos imports, no React.

Padrões a serem adotados

• Agrupar por origem
  • Dividir em grupos, separadamente, mantendo uma linha vazia entre cada grupo, para identificação visual:
    • as bibliotecas do react, 
    • bibliotecas externas e 
    • importações de projetos
      
• Classificar dentro de cada grupo
  • Classificar, alfabeticamente, as declarações por sua origem.
    
• Classificar dentro de cada declaração
  • Classificar, alfabeticamente, as importações individuais, dentro de cada declaração.

Fazendo acontecer

Para atingirmos os dois primeiros padrões/estágios, podemos utilizar o eslint-plugin-import, que pode ser instalado, a nível de desenvolvimento, da seguinte forma:

  yarn add -D eslint-plugin-import

Para o terceiro padrão, podemos utilizar as rules do ESLint, o qual já deve estar instalado. Assim sendo, adicione a regra e referência ao plug-in, conforme abaixo, ao seu arquivo de configuração, denominado .eslintrc:

{ ...
"plugins": ["import", "node", "@typescript-eslint"],
...
"rules": {
...
// this is for sorting WITHIN an import
"sort-imports": ["error", {"ignoreCase": true, "ignoreDeclarationSort": true}],
// this is for sorting imports
"import/order": [
"error",
{
"groups": [
["external", "builtin"],
"internal",
["sibling", "parent"],
"index"
],
"pathGroups": [
{ "pattern": "@(react|react-native)",
"group": "external",
"position": "before"
},
{ "pattern": "@src/**",
"group": "internal" },
],
"pathGroupsExcludedImportTypes": ["internal", "react"],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"caseInsensitive": true
}
}
]
...
}
}

Conclusão

Com um pouco de zelo e cuidado, ao escrevermos o nosso código, pode deixá-lo mais bonito!

Espero que possa, de alguma forma, lhe serem úteis estas abordagens.

Fontes de referência

Post da Manu Rana, Medium

Projeto da lib, GitHub