microsoft / microsoft/TypeScript

Make JS/TS Import fix insert import in linter specified order

Open
#28,714 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Awaiting More Feedback Domain: LS: TSServer Suggestion
Dominant language
Go
Stars
111k
Forks
14.3k
Avg merge
2d 4h
Merged PRs (30d)
132

Description

Popular linting rules in the TypeScript community require imports to be in alphabetic order (see ordered-imports in tslint:recommended). This is generally useful for readability of imports.

In VS Code, when a developer references an external module that hasn't been imported, VS Code offers a useful fix, which adds the appropriate import:

image

This is extremely useful! Thanks you! 🎉

However, once automatically imported, the import is just added to the end of the import list, leading to a linter error (since it's not in alphabetic order)😕:

image

You can then auto-fix the import issue (VS Code is aware of the TSLint preferences):
image

Would it be possible to short-circuit these steps such that when a developer "fixes" a missing import, it automatically inserts it in the appropriate order based on linting rules? FWIW, this also applies to the JS community (eslint has import order rules as well).

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue describes VS Code's automatic missing-import fix and its interaction with TypeScript and ESLint or TSLint import-order rules, but names no source files or tests. Start by locating the automatic import code path and existing import-order handling. Done means newly inserted imports follow the applicable configured order for JavaScript and TypeScript.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
developer-experience, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.