Organize Imports feature sort order disagrees with eslint import/order

[nullromo]

🔍 Search Terms

organize
sort
import
imports
organizeimports
eslint

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

The organizeImports code action should accept a customizable sort order.

The eslint import plugin is very popular. It has this rule, which allows you to set the preferred ordering of imports.

The default example config for this rule is ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"]. However, the default ordering provided by tsserver does not follow this order.

Ideally, developers would be able to specify their import order in their .eslintrc file, and the organizeImports action would obey that order. I think the most reasonable implementation for this would be that the organizeImport command could take an extra argument that specifies a desired import ordering and editors could handle sending that order in with the organize import action LSP request.

📃 Motivating Example

Whenever I use the organizeImports action, I inevitably end up with linter errors saying 'foo' import should occur before import of 'bar' (eslint import/order).

Imagine starting with this file

import net from 'net';
import chalk from 'chalk';

net.createServer();
console.log(chalk.red('a'));

and your eslint is configured with this setting

"import/order": [
    "error",
    { "groups": ["builtin", "external", "parent", "sibling", "index"] }
]

Running the organizeImports action will mutate the file to this

import chalk from 'chalk';
import net from 'net';

net.createServer();
console.log(chalk.red('a'));

And there will now be an eslint error. The import sorter is doing an alphabetical sort without regard for the fact that net is builtin and chalk is external.

Now you need to either fix this manually or use the eslint auto-fix feature to fix the import order (something like npx eslint --no-eslintrc --parser @typescript-eslint/parser --plugin import --fix --rule '"import/order": [ "error", { "groups": ["builtin", "external", "parent", "sibling", "index"] } ]' <filename>).

💻 Use Cases

1. What do you want to use this for?

This is used for auto-organizing imports and not having to worry about lint errors resulting from import ordering that should have been fixed by organizeImports in the first place.

2. What shortcomings exist with current approaches?

The current organizeImports does not work properly with eslint, and it is not customizable.

3. What workarounds are you using in the meantime?

For now I just manually quick-fix all the import errors one by one after doing the organizeImports action.

Related Issues

neoclide/coc.nvim#5136
#30430

[RyanCavanaugh]

If you're using eslint to validate that your imports are correctly organized, you should use it to organize your imports too. There's no reason for TS to copy every linter's organization strategies.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

[jakebailey]

Note that Organize Imports will respect groups of imports separated by empty lines, so if you split them apart (like the defaults of eslint-plugin-simple-import-sort), TS will keep them. But, yeah, use the linter to apply anything more complicated than that...

[nullromo]

I have a workaround using my editor, but it's not ideal. But in any case, I think this issue should close.