📎 organizeImports: node > npm > absolute > relative

[lcswillems]

Description

Right now organizeImports sorts are based on alphabetical order. That's already great, but I think it doesn't satisfy most of projects need.

In my case I would like:

• first, node imports (starting with "node:")
• then, npm imports
• then, absolute imports
• then, relative imports

This is the only thing retaining me from using Biome. I am still using ESLint because of this and everytime I setup a new project, setting up ESLint is a nightmare. I hope this could be fixed soon and I could start using Biome

[SuperchupuDev]

isn't it like that already?

[lcswillems]

Completely missed this! 😮

The only thing here is the absolute / relative imports.

How are they handled?

[lcswillems]

@Conaclos I see nothing about this in the documentation.

[Conaclos]

Not sure. I think absolute imports appear before relative imports, because / precedes ./. Try it out and lets us know if something is not handled.

[lcswillems]

By absolute, I mean that in the tsconfig.json, you can put "baseUrl": "./src" and then if you do:

import x from "myfolder";

It will import from "./src/myfolder".

I am trying on the playground. Absolute imports seems to come before relative imports. However, it seems that import from npm packages might not necessarily come before absolute imports?

[Conaclos]

By absolute, I mean that in the tsconfig.json, you can put "baseUrl": "./src"

Biome doesn't read tsconfig.json or package.json. And I think it is not a good idea to do so because the behavior could depend on these files.

However, it seems that import from npm packages might not necessarily come before absolute imports?

I think the order is as follows:

• node:
• npm:
• URLs
• bare names such as my-module
• Absolute and relative paths (absolute path start with / and come first)

[lcswillems]

And it makes sense the behavior depends on these files no?

It is important that import {} from "myfolder" comes after import {} from "next" to avoid mistakening myfolder for a true npm package.

[lcswillems]

This is my eslint config at the moment:

{
  "plugins": ["prettier"],
  "extends": ["next", "prettier"],
  "rules": {
    "import/no-duplicates": "error",
    "import/order": [
      "error",
      {
        "groups": [
          "builtin",
          "external",
          "internal",
          "parent",
          "sibling",
          "index"
        ],
        "pathGroups": [
          {
            "pattern": "~*/**",
            "group": "internal",
            "position": "before"
          },
          {
            "pattern": "$*/**",
            "group": "internal",
            "position": "before"
          }
        ],
        "alphabetize": {
          "order": "asc"
        }
      }
    ],
    "no-useless-rename": "error",
    "object-shorthand": "error",
    "prettier/prettier": "error",
    "react-hooks/exhaustive-deps": "off",
    "react/jsx-curly-brace-presence": "error",
    "react/no-unescaped-entities": "off"
  }
}

[ematipico]

It is important that import {} from "myfolder" comes after import {} from "next" to avoid mistakening myfolder for a true npm package

What if a folder clashes with the name of a package? Regardless, we can't provide this at the moment because Biome doesn't use the tsconfig.json yet.

I can't give you a timeline because we haven't published a roadmap yet, but I assure you that we plan to integrate Biome with some parts of TS.

I advise you to open a GitHub discussion and hopefully, other people will upvote it. We will consider it when we will start planning a roadmap.

[SuperchupuDev]

@lcswillems FYI the baseUrl option is not really recommended anymore in typescript unless you're using AMD module loaders in the browser, you might want to set something like paths with some prefix to distinguish those imports from library imports, for example in some of my projects I have set it to "#*": ["./src/*"]

[lcswillems]

@SuperchupuDev I didn't know, thanks! 🙏 @ematipico Are paths supported by Biome?

[ematipico]

@SuperchupuDev I didn't know, thanks! 🙏 @ematipico Are paths supported by Biome?

From #449 (comment)

Regardless, we can't provide this at the moment because Biome doesn't use the tsconfig.json yet.

[Conaclos]

We could place #import (the ones that start with #) just before local imports because it is recognized as a special import. @lcswillems Could this solve your issue?

[Conaclos]

We could place #import (the ones that start with #) just before local imports because it is recognized as a special import. @lcswillems Could this solve your issue?

@arendjr Any thoughts?

[arendjr]

Wasn't aware of the special import syntax. Seems good to add indeed 👍 Agreed they should go between the library imports and the relative imports.

[lcswillems]

In my codebase, I rather use "$import" and "~import", but I could rename to #import. Also, in eslint, I can say that "$import" and "~import" are special imports.

[lcswillems]

Thanks for the great work @Conaclos !! 🙏