feat: Migrating to @ianvs/prettier-plugin-sort-imports; update shared Prettier config

Author: mryechkin

.prettierrc

@@ -0,0 +1,22 @@
+{
+  "printWidth": 90,
+  "singleQuote": true,
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-packagejson",
+    "prettier-plugin-tailwindcss"
+  ],
+  "importOrder": [
+    "<TYPES>",
+    "<TYPES>^[.]",
+    "",
+    "<BUILT_IN_MODULES>",
+    "",
+    "^react$",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^(src|~)(/.*)$",
+    "",
+    "^[.]"
+  ]
+}

.prettierrc.json

@@ -31,10 +31,11 @@ This will install the shared config, as well as its peer dependencies:
 - [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier)
 - [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react)
 - [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/main/packages/eslint-plugin-react-hooks)
-- [eslint-plugin-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort)
 - [eslint-plugin-sort-destructure-keys](https://github.com/mthadley/eslint-plugin-sort-destructure-keys)
 - [eslint-plugin-tailwindcss](https://github.com/francoismassart/eslint-plugin-tailwindcss)
 - [prettier](https://github.com/prettier/prettier)
+- [@ianvs/prettier-plugin-sort-imports](https://github.com/IanVS/prettier-plugin-sort-imports)
+- [prettier-plugin-packagejson](https://github.com/matzkoh/prettier-plugin-packagejson)
 - [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)
 
 **NOTE:** if you are on NPM <7, you will need to install these manually:
@@ -114,6 +115,56 @@ This can also be overridden in your local `.eslintrc` file, if needed:
 }
 ```
 
+## Import Sorting
+
+Import statement sorting is enabled via [`@ianvs/prettier-plugin-sort-imports`](https://github.com/IanVS/prettier-plugin-sort-imports), with the following default `importOrder` set:
+
+```json
+{
+  "importOrder": [
+    "<TYPES>",
+    "<TYPES>^[.]",
+    "",
+    "<BUILT_IN_MODULES>",
+    "",
+    "^react$",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^(src|~)(/.*)$",
+    "",
+    "^[.]"
+  ]
+}
+```
+
+This will take import statements like these:
+
+```js
+import fs from 'node:fs';
+
+import { module } from 'package-name';
+
+import foo from 'src/foo';
+
+import main from '../index';
+import { bar } from './bar';
+```
+
+And turn them into this:
+
+```js
+import fs from 'node:fs';
+
+import { module } from 'package-name';
+
+import foo from 'src/foo';
+
+import main from '../index';
+import { bar } from './bar';
+```
+
+See the plugin [docs](https://github.com/IanVS/prettier-plugin-sort-imports#importorder) for more information on how to customize this option.
+
 ## Prettier
 
 This config supports Prettier integration out of the box. Rules that may conflict with ESLint are disabled via recommended configuration in [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier).
@@ -135,7 +186,45 @@ If you wish to override any [Prettier options](https://prettier.io/docs/en/optio
 }
 ```
 
-Make sure that these rules match the options specified in your `.prettierrc` file.
+Make sure that these rules match the options specified in your Prettier config file.
+
+### Shared Config
+
+This package provides a shared Prettier config for use alongside the ESLint one.
+
+To enable, create a Prettier config file (`.prettierrc`, `.prettierrc.js`, etc.), and import the shared Prettier config.
+
+**JSON:**
+
+```json
+// .prettierrc
+"eslint-config-acme/prettier"
+```
+
+**CommonJS:**
+
+```jsx
+// .prettierrc.js
+/** @type {import("prettier").Config} */
+const acme = require('eslint-config-acme/prettier');
+
+module.exports = acme;
+```
+
+If you'd like to override any of the default options, you can use the spread operator (`...`) to extend the default config:
+
+```jsx
+// .prettierrc.js
+/** @type {import("prettier").Config} */
+const acme = require('eslint-config-acme/prettier');
+
+const config = {
+  ...acme,
+  singleQuote: false,
+};
+
+module.exports = config;
+```
 
 ## Adding Scripts
 

README.md

@@ -22,7 +22,7 @@ module.exports = {
       jsx: true,
     },
   },
-  plugins: ['import', 'simple-import-sort', 'sort-destructure-keys', 'tailwindcss'],
+  plugins: ['import', 'sort-destructure-keys', 'tailwindcss'],
   rules: {
     ...base,
     ...react,

index.js

@@ -9,31 +9,6 @@ module.exports = {
   'import/first': 'error',
   'import/newline-after-import': 'error',
   'import/no-duplicates': 'error',
-  'simple-import-sort/imports': [
-    'error',
-    {
-      groups: [
-        // Node.js builtins
-        [
-          '^node:',
-          '^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)',
-        ],
-        // Packages. `react` related packages come first
-        ['^react', '^@?\\w'],
-        // Side effect imports
-        ['^\\u0000'],
-        // Internal packages
-        ['^(~|src|internals)(/.*|$)'],
-        // Parent imports. Put `..` last
-        ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
-        // Other relative imports. Put same-folder imports and `.` last
-        ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
-        // Style imports
-        ['^.+\\.s?css$'],
-      ],
-    },
-  ],
-  'simple-import-sort/exports': 'error',
   'sort-destructure-keys/sort-destructure-keys': 'warn',
   'tailwindcss/classnames-order': 'off',
   'no-console': 'warn',

lib/base.js

@@ -1,6 +1,6 @@
 {
   "name": "eslint-config-acme",
-  "version": "2.3.0",
+  "version": "3.0.1",
   "description": "ESLint + Prettier config for React",
   "keywords": [
     "eslint",
@@ -22,32 +22,42 @@
     "name": "Mykhaylo Ryechkin",
     "url": "https://github.com/mryechkin"
   },
+  "exports": {
+    ".": "./index.js",
+    "./prettier": "./.prettierrc.json"
+  },
   "main": "index.js",
   "files": [
     "LICENSE",
     "CHANGELOG.md",
     "README.md",
+    ".prettierrc.json",
     "index.js",
     "lib"
   ],
   "scripts": {
     "lint": "eslint --ignore-path .gitignore .",
     "lint:fix": "eslint --fix"
   },
+  "devDependencies": {
+    "prettier": "^3.0.3",
+    "prettier-plugin-packagejson": "^2.4.6"
+  },
   "peerDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.1",
     "eslint": "^8.46",
     "eslint-config-airbnb": "^19.0",
-    "eslint-config-prettier": "^8.10",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-custom-alias": "^1.3.2",
-    "eslint-plugin-import": "^2.26",
-    "eslint-plugin-jsx-a11y": "^6.6",
+    "eslint-plugin-import": "^2.28",
+    "eslint-plugin-jsx-a11y": "^6.7",
     "eslint-plugin-prettier": "^5.0",
     "eslint-plugin-react": "^7.33",
     "eslint-plugin-react-hooks": "^4.6",
-    "eslint-plugin-simple-import-sort": "^10.0",
     "eslint-plugin-sort-destructure-keys": "^1.5.0",
     "eslint-plugin-tailwindcss": "^3.13",
     "prettier": "^3",
+    "prettier-plugin-packagejson": "^2.4",
     "prettier-plugin-tailwindcss": "^0.5"
   },
   "engines": {