镜像站点 · 本页由第三方 GitHub 只读镜像提供,非 GitHub 官方站点,不接受任何登录或凭据输入。前往 github.com
Skip to content

Sort import completions by distance from current module #41083

Description

The auto-import feature is amazing. Something I come across daily though is the import I want is nearly always the second or third choice.

In the screenshots below VS Code suggests to import db from ../../admin/helpers/db before ../helpers/db

I would propose that the ordering is sorted by distance from the current file. The following ESLint rule (that I use in most of my projects) does this correctly and presumably has code that can be reused: eslint-plugin-import/order (well, except we want the inverse of this — shortest distance first).

Screenshot 2020-10-13 at 14 14 46

Screenshot 2020-10-13 at 14 14 39

Activity

  1. dhoulb commented on Oct 13, 2020

    @dhoulb
    Author

    Here is an additional screenshot showing the problem suggestions too:

    Screenshot 2020-10-13 at 14 27 36

  2. removed their assignment
    on Oct 13, 2020
  3. changed the title [-]Auto-import sorting potential imports by distance[/-] [+]Sort import completions by distance from current module[/+] on Oct 14, 2020
  4. andrewbranch commented on Oct 14, 2020

    @andrewbranch
    Member

    So, we already do this sorting between different paths for the same symbol. This example must be three distinct dbs that just happen to share the same name, and it looks like they probably just come in the program order. The design question that remains here is what the sorting should be in a combination of these two scenarios:

    Import 'db' from module "../foo" ----------------
    Import 'db' from module "../foo/helpers"         | -- (aliases for same symbol)
    Import 'db' from module "../foo/helpers/index" --
    Import 'db' from module "../bar" ----------------
    Import 'db' from module "../bar/helpers"         | -- (aliases for same symbol)
    Import 'db' from module "../bar/helpers/index" --
    

    I would think we still want to keep aliases for the same symbol grouped together. So then, sort the groups by the closeness of their closest option?

  5. dhoulb commented on Oct 28, 2020

    @dhoulb
    Author

    This example must be three distinct dbs that just happen to share the same name

    That's correct, they're all different symbols with the same name. For context the project is a monorepo that contains multiple different apps (admin website, production app, backend serverless functions). Each has its own database code but they all have similar file layout. When I'm working on a file in the admin website I would never want the other db values.

    I use the ESLint import/no-restricted-paths rule to catch when I incorrectly import across an invalid boundary, but it'd be lovely if the auto import worked too.

    Regarding your design question: I think the distance sorting is the most likely requirement in nearly every case. The fact the developer has gone to the trouble of re-exporting higher up also implies they don't want highly specific imports. So I think ../foo and ../bar should be the top two suggestions, then ../foo/helpers/ and ../bar/helpers as they're further away and deeper (you're also intruding on the internal structure of the foo directory), and the two index options last (these are way too specific and unlikely to ever be wanted).

  6. 13 remaining items

  7. andrewbranch commented on Jul 6, 2021

    @andrewbranch
    Member

    This is now more or less possible since #44713 was merged, but takes quite a bit more work on top of that to implement. I’ll plan on taking a look for 4.5.

  8. added and removed
    Effort: ModerateRequires experience with the TypeScript codebase, but feasible. Harder than "Effort: Casual".
    Needs InvestigationThis issue needs a team member to investigate its status.
    on Jul 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

Type

No type

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions