question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItĀ collects links to all the places you might be looking at while hunting down a tough bug.

And, if youā€™re still stuck at the end, weā€™re happy to hop on a call to see how we can help out.

Auto-import in TypeScript suggests one outlandish choice, doesn't list reasonable ones

See original GitHub issue
  • VS Code Version: 1.54.3
  • OS Version: macOS 10.14.6

Does this issue occur when all extensions are disabled?: Yes

I have a monorepo with a directory structure like so:

@myscope/
  foo/
    package.json
    node_modules/
      ...
    MyClass.ts
    index.ts   <- exports MyClass
  bar/
    package.json   <- depends on @myscope/foo
    node_modules/
      ...
    index.ts   <- re-exports MyClass
  bar-demo/
    package.json   <- depends on @myscope/bar
    node_modules/
      ...
  baz/
    package.json   <- depends on @myscope/foo
    node_modules/
      ...
    currentFile.ts

Now, in a sane world, the sort of tough problem faced by VS Code would be how to prioritize the different reasonable ways to import MyClass. Suppose a package (not shown) depended on both @myscope/foo and @myscope/bar, then there would be three possible ways to import it:

import { MyClass } from "@myscope/foo";
import { MyClass } from "@myscope/foo/MyClass";
import { MyClass } from "@myscope/bar";

I would be coming here asking, for example, how to de-prioritize the second one, because Iā€™m using index.ts files with barrel exports.

However, that is not the world we live in, because when I am in currentFile.ts (above), and I type MyClass, I might be offered one choice like:

MyClass (@myscope/foo/MyClass)  >  Auto import from '../foo-demo/node_modules/@myscope/bar'

ā€¦with no other choices, when the correct and only reasonable place to auto-import from is (simply) '@myscope/foo'.

This is just the most bizarre thing.

  • Why would a convoluted path involving .. and descending into node_modules ever be given priority over a simple one?
  • Why isnā€™t the ā€œcorrectā€ module path (or any others) at least listed alongside the weird one as an option?
  • Why does the gray text next to MyClass (rendered in parentheses in the snippet above) disagree with the part that says ā€œAuto import fromā€¦ā€, with one referring to @myscope/foo and the other referring to @myscope/bar inside the foo-demo package?

Before VS Code, I used Emacs, for over a decade, and the auto-import features I encountered there were similarly terrible. Iā€™ve never had a good auto-import experience, at least in JS/TS. But, VS Codeā€™s feature does save me some typing, even if I have to constantly correct it, and I have hope it could one day serve me well.

Can extensions improve this experience? I have looked through the extension API a bit, but I canā€™t find anything about influencing auto-import suggestions, even though there are apparently extensions that do this, including a popular one called Auto Import (which doesnā€™t explain how it differs from or interacts with VS Codeā€™s built-in feature that does the same thing).

I would like to know what auto-import is expected to be able to do, or take into account, and what it simply doesnā€™t. I feel like there is some design limitation here, like maybe the different ways of importing MyClass are considered ā€œthe sameā€ because they ultimately come from the same original declaration? That doesnā€™t explain why the single path chosen among many is such a bad one, though.

If I were sitting down to write an auto-import feature from scratch that needed to come up with good suggestions for how to import a symbol, I would take factors into account like:

  • Is the symbol exported by a module that is already being imported from in this file?
  • How is this symbol usually imported in this workspace?
  • What is available in the nearest node_modules?

The first one seems like a no-brainer. The second one might require architectural changes or something, but an auto-import feature that only looked at existing import statements as source material might actually be more useful and accurate a lot of the time than what the current system is doing.

When this problem isnā€™t occurring, I actually do encounter the ā€œin a sane worldā€ problem mentioned above, where VS Code will not see and choose @myscope/foo over @myscope/foo/MyClass even though the former is shorter, even with ā€˜Import Module Specifierā€™ set to ā€˜shortest.ā€™

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
RyanCavanaughcommented, May 11, 2021

ā€œany monorepoā€ - there are about a thousand ways to configure a monorepo; this isnā€™t an actionable description. A pretty large share of people use monorepos in some configuration or another and weā€™d be hearing from them already if this affected all of them.

If you have a way to repro the multiple-import thing, yes, another bug on that too please. Thanks!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Auto-import priority rules Ā· Issue #51155 Ā· microsoft/TypeScript
Seems like a fairly reasonable priority would be: code found within the repo/module (preferring aliased paths if they exist, probably preferringĀ ...
Read more >
How to disable excess auto import suggestions in VS Code ...
In the first tsconfig, try setting outFile to index.d.ts. It should generate 1 declaration file only. Try removing this from the second tsconfig....
Read more >
Typing Is Hard - Hacker News
Eg TypeScript has convincingly shown to a large crowd that soundness isn't an important property for many key goals of static typing,Ā ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found