PC & Mobile

Importations absolues avec l'application Create React – Hacker Midi

Importations absolues avec l'application Create React - Hacker Midi


(Remarque: en mai 2019, WebStorm est toujours meilleur que VS Code IMO. Il possède des outils git nettement supérieurs - en particulier pour la résolution des conflits - et mieux pour la refactorisation. Mais VS Code rattrape son retard vite, et ouvre dans un dixième du temps.)

Lettres majuscules par convention

Les chemins absolus sont possibles depuis longtemps avec Webpack et il est devenu courant d’utiliser PascalCase pour vos racines d’importation avec alias (c’est ce que font les exemples de la documentation Webpack).

C'est intelligent, et je recommanderais de faire de même dans votre base de code en renommant tous vos répertoires de niveau supérieur en PascalCase.

Quand des choses comme Composants et Utils Commencez par les majuscules, il sera facile de voir quelles importations sont des paquets npm et lesquels sont votre propre code source. De plus, vous ne rencontrerez jamais de conflit avec un package npm.

Pour des raisons similaires, évitez les fichiers stockés à la racine de src que vous allez importer. Par exemple, si vous aviez src / constants.js, tu devrais faire importer des constantes à partir de 'constantes'; ce qui est juste étrange.

ESLint

L'ARC a un ensemble de règles très minime dans sa configuration ESLint et des opinions bien arrêtées sur la raison pour laquelle c'est le cas. Si vous êtes aussi malin que moi, vous ignorerez les conseils de Facebook (que savent-ils au sujet de React?) Et vous utiliserez quelque chose comme la configuration ESLint d’Airbnb.

Si vous le faites, vous apprendrez bientôt qu'Airbnb utilise eslint-plugin-import, qui recherche les importations non définies et vous renvoie des erreurs telles que:

Vous pouvez résoudre ce problème avec un réglages prop dans votre configuration ESLint pour lui dire que vos chemins peuvent être relatifs à src:

Notez que vous n’avez pas besoin d’installer de paquet npm pour cela, cela réglages morceau est suffisant.

Remarque secondaire, puisque nous parlons d’ESLint: utilisez-vous Prettier? Vous devriez. Je pense que certaines personnes sont attirées par les promesses faites par leur nom, mais elles sont désactivées quand elles réalisent qu’un nom plus approprié aurait été "Uglier".

Oui, parfois cela se comporte comme un fou qui déchire Monet pour l’envoyer par la poste, en grognant de manière maniaque: Must. En forme. Dans. Enveloppe. Mais une fois que vous acceptez le fait que votre joli code aura une apparence assez dégoûtante par endroit, vous pouvez construire un pont, le surmonter et passer à autre chose: ne discutez pas du style de code avec les autres développeurs.

Restaurer la clarté

Les importations absolues sont un peu de magie qui pourrait embrouiller un nouveau développeur pour un moment, donc je suggère de mettre quelques lignes dans votre readme sur ce qui se passe, y compris des notes sur la configuration de l'IDE. Vous pouvez même créer un lien vers ce message et je vous promets que je ne changerai pas le contenu dans un an pour ne plus être que des images de canards, classées par âge.

Il convient également de définir quand un développeur doit toujours utiliser les importations relatives. Je pense qu’il est raisonnable de dire que les fichiers frères doivent être importés avec un chemin relatif, mais pas n'importe quel endroit où il faut monter dans l’arbre. Et je suggèrerais d’utiliser des importations relatives pour des composants enfants étroitement liés. Si tu as un avec un composant enfant, il est probablement excessif d’utiliser un chemin absolu complet pour importer DropdownItem.

Show More

SupportIvy

SupportIvy.com : Un lieu pour partager le savoir et mieux comprendre le monde. Meilleure plate-forme de support gratuit pour vous, Documentation &Tutoriels par les experts.

Related Articles

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Close
Close