chore: Add prettier plugin for sorting imports (#41608)

* Add prettier plugin for sorting imports. * Migrate the prettier config to a js file. Make the sort imports conditional which will work only in code editors. * Remove unneeded commands for running prettier. * Fix the regex to be more specific. * Another fix for the import regex.
2026-05-06 22:18:00 +08:00 · 2026-01-27 10:55:59 +01:00
parent 6aa59ffe29
commit 07b9702be3
6 changed files with 94 additions and 34 deletions
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,16 +0,0 @@
-{
-  "trailingComma": "es5",
-  "tabWidth": 2,
-  "semi": false,
-  "singleQuote": true,
-  "printWidth": 100,
-  "endOfLine": "lf",
-  "sqlKeywordCase": "lower",
-  "plugins": ["prettier-plugin-sql-cst"],
-  "overrides": [
-    {
-      "files": "**/*.json",
-      "options": { "parser": "json" }
-    }
-  ]
-}
--- a/apps/studio/package.json
+++ b/apps/studio/package.json
@@ -19,8 +19,6 @@
    "deploy:staging": "VERCEL_ORG_ID=team_E6KJ1W561hMTjon1QSwOh0WO VERCEL_PROJECT_ID=QmcmhbiAtCMFTAHCuGgQscNbke4TzgWULECctNcKmxWCoT vercel --prod -A .vercel/staging.json",
    "pretypecheck": "next typegen",
    "typecheck": "tsc --noEmit",
-    "prettier:check": "prettier --cache --check .",
-    "prettier:write": "prettier --cache --write .",
    "build:deno-types": "tsx scripts/deno-types.ts",
    "build:graphql-types": "tsx scripts/download-graphql-schema.mts && pnpm graphql-codegen --config scripts/codegen.ts",
    "build:graphql-types:watch": "pnpm graphql-codegen --config scripts/codegen.ts --watch",
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -14,7 +14,6 @@
    "pretypecheck": "next typegen",
    "typecheck": "pnpm run content:build && tsc --noEmit",
    "content:build": "node scripts/generateStaticContent.mjs",
-    "prettier": "prettier --cache --write \"./{pages,components,lib,stores,styles,tests}/**/*.{ts,tsx,md,js,jsx,json}\"",
    "postbuild": "node ./internals/generate-sitemap.mjs && ./../../scripts/upload-static-assets.sh"
  },
  "dependencies": {
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
    "dev:design-system": "turbo run dev --filter=design-system --parallel",
    "lint": "turbo run lint",
    "typecheck": "turbo --continue typecheck",
-    "test:prettier": "prettier --cache --check '{apps,packages}/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'",
-    "format": "prettier --cache --write '{apps,packages}/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'",
+    "test:prettier": "SORT_IMPORTS=false prettier --cache --check '{apps,packages}/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'",
+    "format": "SORT_IMPORTS=false prettier --cache --write '{apps,packages}/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'",
    "test:docs": "turbo run test --filter=docs",
    "test:ui": "turbo run test --filter=ui",
    "test:ui-patterns": "turbo run test --filter=ui-patterns",
@@ -44,6 +44,7 @@
  },
  "devDependencies": {
    "@aws-sdk/client-secrets-manager": "^3.823.0",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.0",
    "@types/node": "catalog:",
    "eslint": "^9.0.0",
    "prettier": "3.2.4",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,8 @@ overrides:
  '@smithy/config-resolver': ^4.4.0
  esbuild: ^0.25.2
  nodemailer: ^7.0.11
+  lodash-es: ^4.17.23
+  lodash: ^4.17.23
  payload>undici: ^7.18.2
  preact: 10.26.10
  refractor>prismjs: ^1.30.0
@@ -85,8 +87,6 @@ overrides:
  tmp: ^0.2.4
  vinxi>vite: ^7.1.11
  vinxi>h3: ^1.15.5
-  lodash-es: ^4.17.23
-  lodash: ^4.17.23

 importers:

@@ -95,6 +95,9 @@ importers:
      '@aws-sdk/client-secrets-manager':
        specifier: ^3.823.0
        version: 3.823.0
+      '@trivago/prettier-plugin-sort-imports':
+        specifier: ^6.0.0
+        version: 6.0.0(@vue/compiler-sfc@3.5.21)(prettier@3.2.4)(supports-color@8.1.1)
      '@types/node':
        specifier: 'catalog:'
        version: 22.13.14
@@ -557,7 +560,7 @@ importers:
        version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      nuqs:
        specifier: ^1.19.1
-        version: 1.19.1(next@15.5.10(@babel/core@7.28.4(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))
+        version: 1.19.1(next@15.5.10(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4))
      openai:
        specifier: ^4.75.1
        version: 4.104.0(encoding@0.1.13)(ws@8.18.3)(zod@3.25.76)
@@ -9299,6 +9302,25 @@ packages:
    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
    engines: {node: '>= 10'}

+  '@trivago/prettier-plugin-sort-imports@6.0.0':
+    resolution: {integrity: sha512-Xarx55ow0R8oC7ViL5fPmDsg1EBa1dVhyZFVbFXNtPPJyW2w9bJADIla8YFSaNG9N06XfcklA9O9vmw4noNxkQ==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      '@vue/compiler-sfc': 3.x
+      prettier: 2.x - 3.x
+      prettier-plugin-ember-template-tag: '>= 2.0.0'
+      prettier-plugin-svelte: 3.x
+      svelte: 4.x || 5.x
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+      prettier-plugin-ember-template-tag:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      svelte:
+        optional: true
+
  '@ts-morph/common@0.23.0':
    resolution: {integrity: sha512-m7Lllj9n/S6sOkCkRftpM7L24uvmfXQFedlW/4hENcuJH1HHm9u5EgxZb9uVjQSCGrbBWBkOGgcTxNg36r6ywA==}

@@ -14088,6 +14110,9 @@ packages:
    engines: {node: '>=10'}
    hasBin: true

+  javascript-natural-sort@0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+
  jest-diff@29.7.0:
    resolution: {integrity: sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw==}
    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -15160,10 +15185,6 @@ packages:
    resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
    hasBin: true

-  minimatch@10.0.1:
-    resolution: {integrity: sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==}
-    engines: {node: 20 || >=22}
-
  minimatch@10.1.1:
    resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
    engines: {node: 20 || >=22}
@@ -16030,6 +16051,9 @@ packages:
    resolution: {integrity: sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==}
    engines: {node: '>=0.8'}

+  parse-imports-exports@0.2.4:
+    resolution: {integrity: sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==}
+
  parse-json@4.0.0:
    resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
    engines: {node: '>=4'}
@@ -16056,6 +16080,9 @@ packages:
  parse-path@7.1.0:
    resolution: {integrity: sha512-EuCycjZtfPcjWk7KTksnJ5xPMvWGA/6i4zrLYhRG0hGvC3GPU/jGUj3Cy+ZR0v30duV3e23R95T1lE2+lsndSw==}

+  parse-statements@1.0.11:
+    resolution: {integrity: sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==}
+
  parse-url@9.2.0:
    resolution: {integrity: sha512-bCgsFI+GeGWPAvAiUv63ZorMeif3/U0zaXABGJbOWt5OH2KCaPHF6S+0ok4aqM9RuIPGyZdx9tR9l13PsW4AYQ==}
    engines: {node: '>=14.13.0'}
@@ -28788,6 +28815,22 @@ snapshots:
  '@tootallnate/once@2.0.0':
    optional: true

+  '@trivago/prettier-plugin-sort-imports@6.0.0(@vue/compiler-sfc@3.5.21)(prettier@3.2.4)(supports-color@8.1.1)':
+    dependencies:
+      '@babel/generator': 7.28.3
+      '@babel/parser': 7.28.4
+      '@babel/traverse': 7.28.4(supports-color@8.1.1)
+      '@babel/types': 7.28.4
+      javascript-natural-sort: 0.7.1
+      lodash-es: 4.17.23
+      minimatch: 9.0.5
+      parse-imports-exports: 0.2.4
+      prettier: 3.2.4
+    optionalDependencies:
+      '@vue/compiler-sfc': 3.5.21
+    transitivePeerDependencies:
+      - supports-color
+
  '@ts-morph/common@0.23.0':
    dependencies:
      fast-glob: 3.3.3
@@ -33295,7 +33338,7 @@ snapshots:
      cosmiconfig: 9.0.0(typescript@5.9.2)
      graphql: 16.11.0
      jiti: 2.5.1
-      minimatch: 10.0.1
+      minimatch: 10.1.1
      string-env-interpolation: 1.0.1
      tslib: 2.8.1
    transitivePeerDependencies:
@@ -34333,6 +34376,8 @@ snapshots:
      filelist: 1.0.4
      minimatch: 3.1.2

+  javascript-natural-sort@0.7.1: {}
+
  jest-diff@29.7.0:
    dependencies:
      chalk: 4.1.2
@@ -36066,10 +36111,6 @@ snapshots:

  mini-svg-data-uri@1.4.4: {}

-  minimatch@10.0.1:
-    dependencies:
-      brace-expansion: 2.0.2
-
  minimatch@10.1.1:
    dependencies:
      '@isaacs/brace-expansion': 5.0.0
@@ -36733,7 +36774,7 @@ snapshots:

  number-flow@0.3.7: {}

-  nuqs@1.19.1(next@15.5.10(@babel/core@7.28.4(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)):
+  nuqs@1.19.1(next@15.5.10(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)):
    dependencies:
      mitt: 3.0.1
      next: 15.5.10(@babel/core@7.28.4(supports-color@8.1.1))(@opentelemetry/api@1.9.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.4)
@@ -37264,6 +37305,10 @@ snapshots:
      map-cache: 0.2.2
      path-root: 0.1.1

+  parse-imports-exports@0.2.4:
+    dependencies:
+      parse-statements: 1.0.11
+
  parse-json@4.0.0:
    dependencies:
      error-ex: 1.3.2
@@ -37292,6 +37337,8 @@ snapshots:
    dependencies:
      protocols: 2.0.2

+  parse-statements@1.0.11: {}
+
  parse-url@9.2.0:
    dependencies:
      '@types/parse-path': 7.1.0
--- a/prettier.config.mjs
+++ b/prettier.config.mjs
@@ -0,0 +1,31 @@
+let options = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  printWidth: 100,
+  endOfLine: 'lf',
+  sqlKeywordCase: 'lower',
+  plugins: ['prettier-plugin-sql-cst'],
+  overrides: [
+    {
+      files: '**/*.json',
+      options: { parser: 'json' },
+    },
+  ],
+}
+
+// Disable sorting imports when running a prettier command in CI. This is to make the sorting work in editors 
+// for easier migration. 
+if (process.env.SORT_IMPORTS !== 'false') {
+  options = {
+    ...options,
+    plugins: [...options.plugins, '@trivago/prettier-plugin-sort-imports'],
+    importOrder: ['<THIRD_PARTY_MODULES>', '^(@|\.{1,2})\/(.*)$'],
+    importOrderSeparation: true,
+    importOrderSortSpecifiers: true,
+    importOrderSideEffects: false,
+  }
+}
+
+export default options