How to alphabetize your import statements in React files and package.json

Add the following to package.json and run bun install:

"eslint-config-next": "15.3.2",
"eslint-plugin-package-json": "^0.29.1",
"eslint-plugin-simple-import-sort": "^12.1.1",

// eslint.config.mjs
import { FlatCompat } from '@eslint/eslintrc';
import packageJson from "eslint-plugin-package-json";
import simpleImportSort from 'eslint-plugin-simple-import-sort';
import { dirname } from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends('next/core-web-vitals', 'next/typescript'),
  {
    plugins: {
      'simple-import-sort': simpleImportSort,
    },
    rules: {
      'simple-import-sort/imports': 'error',
      'simple-import-sort/exports': 'error',
    },
  },
  packageJson.configs.recommended,
];

export default eslintConfig;