Skip to content

feat: enforce consistent imports with import/order #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 23, 2024
Merged

feat: enforce consistent imports with import/order #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0d3e54
feat: enforce consistent imports with `import/order`
AriPerkkio Jul 18, 2024
50f31df
fix: code review, limit files by extension
AriPerkkio Jul 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"common-tags": "^1.8.2",
"eslint": "^9.5.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-import-x": "^3.0.1",
"eslint-plugin-jsonc": "^2.16.0",
"eslint-plugin-prettier": "^5.1.3",
"globals": "^15.6.0",
Expand Down
108 changes: 108 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 12 additions & 0 deletions src/configs/recommended.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import stylisticTS from '@stylistic/eslint-plugin-ts';
import * as tsParser from '@typescript-eslint/parser';
import type { FlatConfig } from '@typescript-eslint/utils/ts-eslint';
import pluginImport from 'eslint-plugin-import-x';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import tseslint from 'typescript-eslint';
import { rules as blitzRules } from '../rules';
Expand Down Expand Up @@ -56,5 +57,16 @@ export function recommended(extenions?: RuleExtensions): FlatConfig.ConfigArray
...tsRules(extenions?.ts),
},
},
{
name: 'blitz/import',
files: [...tsFileExtensions, ...jsFileExtensions],
plugins: {
import: pluginImport,
},
rules: {
// https://github.com/un-ts/eslint-plugin-import-x/blob/master/docs/rules/order.md
'import/order': ['error', { alphabetize: { order: 'asc' } }],
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we double check if it works correctly that it doesn't re-order imports that are separated by newlines? So that each block of imports is independently sorted and not all imports are sorted / grouped? There is often the use case to have say .css imports in a separate block to group them a bit by JS and styles for instance.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, this is allowed:

import fs from 'fs';
import { test } from 'vitest';
import messages from '../util/messages';
import json from './json';
import utils from './utils';

import './side-effects';
import './some.css';

Looks like this is nicely configurable: https://github.com/un-ts/eslint-plugin-import-x/blob/master/docs/rules/order.md#newlines-between-ignorealwaysalways-and-inside-groupsnever

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very cool!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only thing would be that I can prolly no longer use the "organize imports" in VSC since it doesn't match the ordering of this plugin. That's very unfortunate cause it's so easy but I guess the plugin provides a fixer?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, there's autofix! Just run ESLint autofixes on save and it provides similar experience.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I guess I can re-map maybe that shortcut to run eslint or something. I have to look into it unless you know if that's possible.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've used just ESLint and prettier plugins for sorting the imports. IDE's modifying code is not consistent across all developers so I try to avoid those. 😄

},
},
];
}