☂️ Import sorter revamping - custom order

[Conaclos]

Description

We recently published an RFC to improve the Biome import sorter.

This issue tracks the implementation of the RFC. The main goal of this implementation is to:

• Allow specifying a custom order based on groups
• Allow adding blank lines between some groups.
• Allow merging imports
• Allow sorting export from statements

We will provide a legacy configuration to enable the old way of sorting imports. By disabling this configuration, the new system will be used.

• [x] #4239

Upvote & Fund

• It will be done by a core contributor to Biome.
• To support this effort, please consider funding the issue through Polar.sh or sponsoring Biome.
• All funds raised on Polar.sh will be redirected to the Biome Open Collective once the task completed.
• Use 👍 to upvote the issue

[louisgv]

Would love to have this improved such that we can replace the following prettier config:

import { fileURLToPath } from 'url';

/** @typedef {import("prettier").Config} PrettierConfig */
/** @typedef {import("prettier-plugin-tailwindcss").PluginOptions} TailwindConfig */
/** @typedef {import("@ianvs/prettier-plugin-sort-imports").PluginConfig} SortImportsConfig */

/** @satisfies { PrettierConfig | SortImportsConfig | TailwindConfig } */
const config = {
  arrowParens: 'always',
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  singleAttributePerLine: true,
  jsxSingleQuote: true,
  plugins: [
    '@ianvs/prettier-plugin-sort-imports',
    'prettier-plugin-tailwindcss',
  ],
  tailwindConfig: fileURLToPath(
    new URL('../../packages/theme/tailwind.web.ts', import.meta.url),
  ),
  tailwindFunctions: ['cn', 'cva', 'tw'],
  importOrder: [
    '<TYPES>',
    '<TYPES>^@org-monorepo',
    '<TYPES>^[@/]',
    '<TYPES>^[./|../]',
    '',

    '^(react/(.*)$)|^(react$)|^(react-native(.*)$)',
    '^(next/(.*)$)|^(next$)',
    '^(expo(.*)$)|^(expo$)',
    '<BUILTIN_MODULES>', // Node.js built-in modules
    '<THIRD_PARTY_MODULES>', // Imports not matched by other special words or groups.
    '',

    '^@org-monorepo/enums/(.*)$',
    '',
    '^@org-monorepo/(.*)-utils/(.*)$',
    '',
    '^@org-monorepo/components/(.*)$',
    '',
    '^@org-monorepo/(.*)$',
    '',
    '^@/types(.*)$',
    '',
    '^@/utils/(.*)$',
    '',
    '^@/components/(.*)$',
    '',
    '^@/(.*)$',
    '',

    '^[../]',
    '^[./]',
  ],
  importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
};

export default config;

[stunaz]

yeah.... give us a way to do the grouping automatically

[Conaclos]

The issue has been funded! I will start work in a week.

[ematipico]

@MatheusRoichman based on @Conaclos 'last message, he started to work on the feature today.

Please refrain from asking "whens" or for ETAs. The feature will be ready when it's ready. You may not realise this, but these kinds of messages put pressure on the person, which is something I want to avoid here.

Thank you for understanding ☺️

[nhuesmann]

I pledged support for this feature several months ago so I come back to check it periodically. I am SO excited to see we've met the funding goal! Best of luck @Conaclos, you've got this! 🙌

[artola]

I use a plugin forked from original Trivago and we setup a simple grouping for: company, team, root folder, that goes below the node/external packages.

  plugins: [require.resolve('@ianvs/prettier-plugin-sort-imports')],
  importOrder: [
    '',
    '^@company/(.*)$',
    '',
    '^@team/(.*)$',
    '',
    '^@/(.*)$',
    '',
    '^[./]',
  ],

I am glad to hear that development of this feature has started. Thanks.

[nhuesmann]

Hi @Conaclos! Just wanted to confirm, has this been released? I see that the related task was completed a few weeks ago, but this issue is still open. Just wanted to know the status to see if I can start migrating my setup to Biome. Thanks!

[dyc3]

@nhuesmann Nope, not yet. We'll post about it here when we have updates.

[nhuesmann]

@dyc3 Awesome, thank you!