Chore: Configure ESLint import order rules#7
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| "import/order": [ | ||
| "warn", | ||
| { | ||
| "groups": ["builtin", "external", "internal", "type"], |
There was a problem hiding this comment.
In order:
builtin: any built in JS modules like fs
external: installed packages
internal: local code
type: TS type declarations
Everything else not classified under these groups will be put last. You can read more about the config here. There are some other options but I don't think we're currently using them so I want to wait until we do before we configure them.
| "warn", | ||
| { | ||
| "groups": ["builtin", "external", "internal", "type"], | ||
| "newlines-between": "always", |
There was a problem hiding this comment.
Make sure there's a newline between import groups
| "alphabetize": { | ||
| "order": "asc", | ||
| "caseInsensitive": true | ||
| } |
There was a problem hiding this comment.
Sort imports within each group. This make sure for example that @src imports always come after @public
Personally don't see a compelling need to be opinionated on sorting within each group so alphabet order seems the best choice to me.
gvjacob
changed the title
gvjacob
changed the title
joshpensky
left a comment
joshpensky
left a comment
There was a problem hiding this comment.
Thanks for adding it! 🏁 Just a few non-blocking comments (based on other projects I've used this with)
| "global-require": 0, | ||
| "import/prefer-default-export": 0, | ||
| "import/order": [ | ||
| "warn", |
There was a problem hiding this comment.
personally wouldn't mind this being an error 😉
| "rules": { | ||
| "global-require": 0, | ||
| "import/prefer-default-export": 0, | ||
| "import/order": [ |
There was a problem hiding this comment.
Suggestion for another rule (take it or leave it!) that ensures react and next are always the first import for the external group
"pathGroups": [
{
"pattern": "react",
"group": "external",
"position": "before"
},
{
"pattern": "next",
"group": "external",
"position": "before"
},
{
"pattern": "next/**",
"group": "external",
"position": "before"
}
],
There was a problem hiding this comment.
I don't mind this, although unsure why it's not working at all when I added this 🤔 It was also clashing with type imports from next/app. I'm going to table this for now but good note nonetheless!
3 participants
What This Does
eslint-plugin-importand its Typescript resolverimport/orderrule based on our common use cases (more details in threads below!)typeHow to Test