ref: replace eslint-plugin-simple-import-sort with prettier-plugin-sort-imports (#97578)

Why?

- Formatting is a concern for the formatter, not the linter
- We always lint all files in CI, which can be slow, but we only format
what we touch

--> The more we move to the formatter, the faster things get.

This should save around 2% of lint execution time. Not too much but
still, this was one of the slower rules and I could turn off two
additional rules that are now covered by prettier.

I tried to keep the same ordering rules we have, but still, 559 files
are formatted differently now. There's two reasons for this:

1. We have a setting that says [nodeJs built-ins should come
first](https://github.com/getsentry/sentry/blob/6d867a00a2ba346378409c5cbe87a776d6e73854/eslint.config.mjs#L616-L617),
but it seems that it doesn't work. I've kept this for prettier and now,
node imports are actually moved to the top, leading to some diffs.
2. The prettier plugin always sorts type-imports lasts, and this isn't
really configurable. I think this is a good change, but leads to most
diffs looking something like this:

```
- import {CheckoutType, type Plan, ReservedBudgetCategoryType} from 'getsentry/types';
+ import {CheckoutType, ReservedBudgetCategoryType, type Plan} from 'getsentry/types';
```

I think the current order was purely alphabetical, disregarding type
modifiers. Oh and one more thing: The plugin never re-orders side-effect
imports, so they stay where they are.

Author: TkDodo

api-docs/index.ts

@@ -1,8 +1,9 @@
-import yaml from 'js-yaml';
-import JsonRefs from 'json-refs';
 import fs from 'node:fs';
 import path from 'node:path';
 
+import yaml from 'js-yaml';
+import JsonRefs from 'json-refs';
+
 function dictToString(dict) {
   const res: string[] = [];
   for (const [k, v] of Object.entries(dict)) {

api-docs/openapi-diff.ts

@@ -1,8 +1,9 @@
-import yaml from 'js-yaml';
-import jsonDiff from 'json-diff';
 import fs from 'node:fs';
 import https from 'node:https';
 
+import yaml from 'js-yaml';
+import jsonDiff from 'json-diff';
+
 async function main() {
   const openApiData = await new Promise((resolve, reject) =>
     https.get(

api-docs/watch.ts

@@ -1,6 +1,7 @@
 import {spawn} from 'node:child_process';
 import {join} from 'node:path';
 import {stderr, stdout} from 'node:process';
+
 import sane from 'sane';
 
 const watcherPy = sane(join(__dirname, '../src/sentry'));

build-utils/last-built-plugin.ts

@@ -1,7 +1,8 @@
-import type {Compiler, RspackPluginInstance} from '@rspack/core';
 import fs from 'node:fs';
 import path from 'node:path';
 
+import type {Compiler, RspackPluginInstance} from '@rspack/core';
+
 type Options = {
   basePath: string;
 };

build-utils/peggy-loader.ts

@@ -1,5 +1,5 @@
-import peggy from 'peggy';
 import type {LoaderDefinitionFunction} from '@rspack/core';
+import peggy from 'peggy';
 
 const peggyLoader: LoaderDefinitionFunction = source => {
   // https://peggyjs.org/documentation.html#generating-a-parser-javascript-api

build-utils/remark-unwrap-mdx-paragraphs.ts

@@ -1,5 +1,4 @@
-import type {Node, Literal, Parent} from 'hast';
-
+import type {Literal, Node, Parent} from 'hast';
 import {visit} from 'unist-util-visit';
 
 /**

build-utils/ts-extract-gettext.ts

@@ -1,12 +1,11 @@
 import fs from 'node:fs/promises';
-import path from 'node:path';
+import path, {resolve} from 'node:path'; // Added for module check
 import {fileURLToPath} from 'node:url';
-import {resolve} from 'node:path'; // Added for module check
 
-import {glob} from 'tinyglobby';
-import ts from 'typescript';
 import {po} from 'gettext-parser';
 import type {GetTextTranslation, GetTextTranslations} from 'gettext-parser';
+import {glob} from 'tinyglobby';
+import ts from 'typescript';
 
 const FUNCTION_NAMES: Record<string, string[]> = {
   gettext: ['msgid'],

config/build-chartcuterie.ts

@@ -1,11 +1,12 @@
 /* eslint-disable import/no-nodejs-modules, no-console */
 
-import * as esbuild from 'esbuild';
 import childProcess from 'node:child_process';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import {fileURLToPath} from 'node:url';
 
+import * as esbuild from 'esbuild';
+
 const scriptDir = path.dirname(fileURLToPath(import.meta.url));
 const workspaceRoot = path.resolve(scriptDir, '..');
 const packageJsonPath = path.join(workspaceRoot, 'package.json');

eslint.config.mjs

@@ -12,7 +12,6 @@
 import * as emotion from '@emotion/eslint-plugin';
 import eslint from '@eslint/js';
 import pluginQuery from '@tanstack/eslint-plugin-query';
-import {globalIgnores} from 'eslint/config';
 import prettier from 'eslint-config-prettier';
 // @ts-expect-error TS(7016): Could not find a declaration file
 import boundaries from 'eslint-plugin-boundaries';
@@ -25,14 +24,13 @@ import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 // @ts-expect-error TS(7016): Could not find a declaration file
 import sentry from 'eslint-plugin-sentry';
-import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import testingLibrary from 'eslint-plugin-testing-library';
 // @ts-expect-error TS (7016): Could not find a declaration file
 import typescriptSortKeys from 'eslint-plugin-typescript-sort-keys';
 import unicorn from 'eslint-plugin-unicorn';
+import {globalIgnores} from 'eslint/config';
 import globals from 'globals';
 import invariant from 'invariant';
-import {builtinModules} from 'node:module';
 import typescript from 'typescript-eslint';
 
 invariant(react.configs.flat, 'For typescript');
@@ -386,7 +384,6 @@ export default typescript.config([
     rules: {
       // https://github.com/import-js/eslint-plugin-import/blob/main/config/recommended.js
       ...importPlugin.flatConfigs.recommended.rules,
-      'import/newline-after-import': 'error', // https://prettier.io/docs/en/rationale.html#empty-lines
       'import/no-absolute-path': 'error',
       'import/no-amd': 'error',
       'import/no-anonymous-default-export': 'error',
@@ -600,52 +597,6 @@ export default typescript.config([
       ],
     },
   },
-  {
-    name: 'plugin/simple-import-sort',
-    // https://github.com/lydell/eslint-plugin-simple-import-sort
-    plugins: {'simple-import-sort': simpleImportSort},
-    rules: {
-      'import/order': 'off',
-      'sort-imports': 'off',
-      'simple-import-sort/imports': [
-        'error',
-        {
-          groups: [
-            // Side effect imports.
-            [String.raw`^\u0000`],
-
-            // Node.js builtins.
-            [`^(${builtinModules.join('|')})(/|$)`],
-
-            // Packages. `react` related packages come first.
-            ['^react', String.raw`^@?\w`],
-
-            // Test should be separate from the app
-            ['^(sentry-test|getsentry-test)(/.*|$)'],
-
-            // Internal packages.
-            ['^(sentry-locale|sentry-images)(/.*|$)'],
-
-            ['^ui(/.*|$)'],
-
-            ['^(app|sentry)(/.*|$)'],
-
-            // Getsentry packages.
-            ['^(admin|getsentry)(/.*|$)'],
-
-            // Style imports.
-            [String.raw`^.+\.less$`],
-
-            // Parent imports. Put `..` last.
-            [String.raw`^\.\.(?!/?$)`, String.raw`^\.\./?$`],
-
-            // Other relative imports. Put same-folder imports and `.` last.
-            [String.raw`^\./(?=.*/)(?!/?$)`, String.raw`^\.(?!/?$)`, String.raw`^\./?$`],
-          ],
-        },
-      ],
-    },
-  },
   {
     name: 'plugin/sentry',
     // https://github.com/getsentry/eslint-config-sentry/tree/master/packages/eslint-plugin-sentry/docs/rules
@@ -755,6 +706,14 @@ export default typescript.config([
   {
     name: 'plugin/prettier',
     ...prettier,
+    rules: {
+      // import sorting is handled with prettier-plugin-sort-imports
+      'import/order': 'off',
+      'sort-imports': 'off',
+      'import/newline-after-import': 'off',
+      // prettier-plugin-sort-imports always combines imports
+      'import/no-duplicates': 'off',
+    },
   },
   {
     name: 'files/*.config.*',

jest.config.ts

@@ -1,8 +1,9 @@
-import type {Config} from '@jest/types';
+import {execFileSync} from 'node:child_process';
 import path from 'node:path';
 import process from 'node:process';
-import {execFileSync} from 'node:child_process';
+
 import type {TransformOptions} from '@babel/core';
+import type {Config} from '@jest/types';
 
 const babelConfig: TransformOptions = {
   presets: [