☂️ 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.

• 📎 Import sorter revamping - import source parser and order #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.