Skip to content

Allow ambient module names to be filtered out of auto-imports or somethingย #55092

Closed

Description

@ReneZeidler

Suggestion

๐Ÿ” Search Terms

autoImportFileExcludePatterns, exclude auto import suggestions

โœ… Viability Checklist

My suggestion meets these guidelines:

  • 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 feature would agree with the rest of TypeScript's Design Goals.

โญ Suggestion

The option autoImportFileExcludePatterns currently works on the package/module (?) level. I can prevent a whole package from being suggested in auto-imports, but I can't exclude only some of the imports in certain subdirectories of that package. This was already mentioned as a caveat in the original implementation of the option (#49578 (comment)).

๐Ÿ“ƒ Motivating Example

As in the comment mentioned above, my issue also comes from date-fns, but for a slightly different reason. The package has a locale module that includes exports for many different two-letter country codes. Those names also happen to conflict with variable names quite often. When typing one of the country codes, I get tons of suggestions from date-fns which appear before the one I actually want:

image

It's a minor annoyance, but I'd like to exclude those suggestions.

๐Ÿ’ป Use Cases

Currently, I can add "**/node_modules/date-fns" or "date-fns" to the autoImportFileExcludePatterns option, which completely removes date-fns suggestions. But then I also lose the suggestions I actually want from the library.

I tried adding "date-fns/locale", "date-fns/locale/**", "date-fns/locale/*.*", but none of those work and result in no suggestions being excluded at all.

Activity

  1. NazmusSayad commented on Jan 16, 2024

    @NazmusSayad
  2. added
    Needs InvestigationThis issue needs a team member to investigate its status.
    and removed
    SuggestionAn idea for TypeScript
    Awaiting More FeedbackThis means we'd like to hear from more people who would be helped by this feature
    on Jan 16, 2024
  3. andrewbranch commented on Feb 13, 2024

    @andrewbranch
    Member

    The option autoImportFileExcludePatterns currently works on the package/module (?) level. I can prevent a whole package from being suggested in auto-imports, but I can't exclude only some of the imports in certain subdirectories of that package.

    Itโ€™s the exact opposite of this. autoImportFileExcludePatterns matches against the file name where stuff is declared. The problem is that the exports of date-fns/locale arenโ€™t declared in the directory date-fns/locale. Theyโ€™re declared in date-fns/typings.d.ts, as is every other submodule in this package:

    image

    Because this package declares everything in one file, excluding it is all-or-nothing.

  4. changed the title [-]Allow autoImportFileExcludePatterns to work on the file or directory level[/-] [+]Allow ambient module names to be filtered out of auto-imports or something[/+] on Feb 13, 2024
  5. added
    SuggestionAn idea for TypeScript
    Needs ProposalThis issue needs a plan that clarifies the finer details of how it could be implemented.
    and removed
    Needs InvestigationThis issue needs a team member to investigate its status.
    on Feb 13, 2024
  6. andrewbranch commented on Feb 20, 2024

    @andrewbranch
    Member

    We discussed adding an autoImportModuleExcludePatterns setting that would work on module names as opposed to file names, and there was general support for something like that, but it was pointed out that a glob pattern is probably not the best format for that.

  7. eps1lon commented on Apr 30, 2024

    @eps1lon
    Contributor

    Ideally these affordances are given to libraries not just consumers. Libraries can have way more impact than having to teach everybody about custom VSCode settings. Especially since paths may change between versions.

    In React, we have react/jsx-runtime, react/jsx-dev-runtime and possibly react/compiler-runtime. None of these files are meant for manual consumption. They only exist for compilers to use. However, there types may now appear in editor suggestions and auto-import. This is especially bad for Fragment which shouldn't come from different modules.

    I tried @private, @ignore and @internal to exclude these types from suggestions but none seem to work.

  8. ssalbdivad commented on Jun 12, 2024

    @ssalbdivad

    Wanted to add here that having the ability to exclude auto imports by module name would be a huge help for setups using tsconfig paths or customConditions to allow importing TS source across packages in a monorepo.

    Specifically, it would (hopefully) allow import suggestions across packages in a repo like this without also suggesting imports from the package's primary entrypoint, which is a barrel file and should be avoided internally.

    I've struggled against this one for a year or so. Any possible solution would be a huge DX improvement!

  9. RyanCavanaugh commented on Jun 14, 2024

    @RyanCavanaugh
    Member

    David Blass (@ssalbdivad) / Sebastian "Sebbie" Silbermann (@eps1lon) interesting feedback, thanks. If I'm understanding it right, it sounds like you have sort of opposite use cases, which makes a good case for some kind of configuration on either end.

    Specifically, it would (hopefully) allow import suggestions across packages in a repo like this without also suggesting imports from the package's primary entrypoint

    Why isn't a file exclusion of ./packages/**/dist/index.d.ts a working fix here? A specifier exclusion seems hard to manage in this setup; you'd be forced to individually list all the top-level packages in your monorepo

  10. andrewbranch commented on Jun 14, 2024

    @andrewbranch
    Member

    Thereโ€™s a lot more discussion of David Blass (@ssalbdivad)โ€™s issue in #51418, and we were able to figure out a pretty good workaround and some other potential future improvements there. In short, David wanted to exclude ./packages/foo/dist/index.d.ts when editing other files inside foo, but prefers to import from that file when editing files in other packages, and the repo-wide autoImportFileExcludePatterns doesnโ€™t allow for that. One way to achieve the desired behavior would be to exclude specifiers having the pattern foo/.* while enabling a setting to prefer deep import paths whenever possibleโ€”both features that donโ€™t currently exist but are under consideration.

    The trick was that Davidโ€™s foo/dist/index.d.ts was actually named api.d.ts, and there is currently a heuristic about files named index that prevents the local-project auto imports from importing from e.g. "../../../index.js", so the workaround was just to rename api to index.

    That said, I still think thatโ€™s a good example of how filtering module specifiers would pair well with something like preferDeepImportSpecifiers, since you might generally prefer to import from deep subpaths, but want to make an exception for ^lodash/.*$, for example.

  11. ssalbdivad commented on Jun 15, 2024

    @ssalbdivad

    The api.ts => index.ts fix Andrew Branch (@andrewbranch) mentioned was a huge help in this case, but as mentioned on the other issue, that was definitely not something I would have thought to try without his suggestion, so it likely won't help others stuck in the same situation.

    Also just to clarify, the purpose of the setup I'm using (similar to those in Colin McDonnell (@colinhacks) recent post) is to have types and runtime imports resolve to .ts files in dev, so the aforementioned .d.ts files are just .ts files as far as the editor is concerned.

  12. gybau commented on Jul 16, 2024

    @gybau

    Would it be possible to also take into consideration excluding a modules exported functions? My specific case is that I have a wrapper on the useImmer library for react which we use exclusively instead of Reacts useState. Therefore to simplify the dx we export this wrapper as useState. We always have two suggestions and the one from react will always be imported by the auto-import feature. Would it be possible to exclude the original useState from @types/react/index.d.ts but keep all the other imports like useEffect etc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

Domain: LS: Auto-importNeeds ProposalThis issue needs a plan that clarifies the finer details of how it could be implemented.SuggestionAn idea for TypeScript

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions