Auto-import prioritizes files alphabetically before index.ts inside a folder, ignoring the barrel

[alexicum]

🔎 Search Terms

auto-import index label:"Domain: LS: Auto-import"

🕗 Version & Regression Information

This changed between versions 6.0.3 and 7.0.2

VSCode version: 1.134.0
Windows 11

⏯ Playground Link

https://github.com/alexicum/autoimport-index-ignore/blob/main/src/index.ts

💻 Code

Project structure:

src/
  components/
    Product/
      index.ts          // re‑exports from product.tsx and ProductList.tsx
      product.tsx       // exports Product (lowercase 'p')
      ProductList.tsx   // exports ProductList (uppercase 'P')
  utils/
    double/
      double.ts         // exports double (lowercase 'd')
      index.ts          // re‑exports from double.ts
    triple/
      index.ts          // re‑exports from triple.ts
      triple.ts         // exports triple (lowercase 't')
  index.ts              // root file where imports are tested

Code example (src/index.ts):

// Product is exported from `product.tsx` (lowercase 'p', ASCII 112)
// Since 'p' > 'i' (105), index.ts comes alphabetically first,
// so the import is correctly suggested from `./components/Product`
import { Product } from "./components/Product/index.js";

// ProductList is exported from `ProductList.tsx` (uppercase 'P', ASCII 80)
// Since 'P' < 'i' (105), ProductList.tsx comes before index.ts,
// so the language service suggests direct path `./components/Product/ProductList.js`
import { ProductList } from "./components/Product/ProductList.js";

// double is exported from `double.ts` (lowercase 'd', ASCII 100)
// Since 'd' < 'i' (105), double.ts comes before index.ts → direct path `./utils/double/double.js`
import { double } from "./utils/double/double.js";

// triple is exported from `triple.ts` (lowercase 't', ASCII 116)
// Since 't' > 'i' (105), index.ts comes first → barrel path `./utils/triple/index.js`
import { triple } from "./utils/triple/index.js";

console.log(Product, ProductList, double, triple);

🙁 Actual behavior

In the example above, the auto‑import suggestions (or the inserted imports) depend on the alphabetical order of the file names relative to index.ts.
When a file name starts with a character that has a lower ASCII code than i, the language service chooses that file instead of the barrel.
When the character has a higher code, the barrel is chosen.
This behaviour may be unexpected, since index.ts is typically intended to serve as the public entry point for the folder.

🙂 Expected behavior

Regardless of alphabetical order, if index.(ts/tsx) exists and exports the symbol, the auto‑import should always suggest the folder import (e.g., './components/Product' or './utils/double') rather than a direct path to an internal file.

Additional information about the issue

In 6.0.3 barrel files are always ignored.

The code example for this issue is located in the same repository as the example for:
"Auto-import ignores barrel (index.ts) when the imported folder name is a prefix of the importing file name" (#64029)

[andrewbranch]

Aleksey Shestakov (@alexicum) can you restate your actual, expected, and 6.0 behavior more specifically? Your src/index.ts file already contains every import so I'm not sure what steps I need to take to observe the actual behavior. Your expected behavior says

the auto‑import should always suggest the folder import (e.g., './components/Product' or './utils/double')

but directory imports are not a feature of ESM resolution in --moduleResolution nodenext, which is how your example is set up.

[alexicum]

Andrew Branch (@andrewbranch) Thank you for the clarification. You're right: with --moduleResolution nodenext, directory imports are not valid under ESM resolution.
Steps to observe actual behavior:

• remove all imports from src/index.ts
• select line: console.log(Product, ProductList, double, triple)
• open AutoFix... (Shift + Alt + .) or QuickFix... (Ctrl + .)

The idea is consistency between suggestions. The expected behavior is:

import { ProductList } from "./components/ProductList/index.js"
import { double } from "./utils/double/index.js"

That is, analogous to Product and triple:

import { Product } from "./components/Product/index.js"
import { triple } from "./utils/triple/index.js"