Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

☂️ Import sorter revamping - custom order #3177

Open
1 task done
Conaclos opened this issue Jun 11, 2024 · 9 comments
Open
1 task done

☂️ Import sorter revamping - custom order #3177

Conaclos opened this issue Jun 11, 2024 · 9 comments
Assignees
Labels
A-Analyzer Area: analyzer Fund L-JavaScript Language: JavaScript and super languages S-Funding Status: open to funding and implemented by external contributors
Milestone

Comments

@Conaclos
Copy link
Member

Conaclos commented Jun 11, 2024

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.

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
Fund with Polar
@louisgv
Copy link

louisgv commented Sep 26, 2024

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
Copy link

stunaz commented Sep 26, 2024

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

@Conaclos
Copy link
Member Author

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

@Conaclos Conaclos self-assigned this Sep 26, 2024
@ematipico
Copy link
Member

@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
Copy link

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! 🙌

@Conaclos Conaclos changed the title 📎 Import sorter revamping - custom order ☂️ Import sorter revamping - custom order Oct 10, 2024
@Conaclos Conaclos added this to the Biome 2.0 milestone Oct 10, 2024
@artola
Copy link

artola commented Oct 11, 2024

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
Copy link

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
Copy link
Contributor

dyc3 commented Nov 14, 2024

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

@nhuesmann
Copy link

@dyc3 Awesome, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-Analyzer Area: analyzer Fund L-JavaScript Language: JavaScript and super languages S-Funding Status: open to funding and implemented by external contributors
Projects
None yet
Development

No branches or pull requests

7 participants