allow eslint --fix to sort and group all imports

.eslintrc.js

@@ -13,6 +13,8 @@ module.exports = {
 		'react-hooks',
 		'lodash',
 		'@calm/react-intl',
+		'simple-import-sort',
+		'import',
 	],
 	extends: [
 		'eslint:recommended',
@@ -51,13 +53,6 @@ module.exports = {
 			},
 		],
 		'@calm/react-intl/missing-values': 2,
-		'sort-imports': [
-			'error',
-			{
-				ignoreDeclarationSort: true,
-				ignoreCase: true,
-			},
-		],
 		'@typescript-eslint/no-unused-vars': [
 			'error',
 			{
@@ -75,6 +70,10 @@ module.exports = {
 		'react-hooks/rules-of-hooks': 'error',
 		'react-hooks/exhaustive-deps': 'warn',
 		'lodash/import-scope': ['error', 'method'],
+		'simple-import-sort/imports': 'error',
+		'import/first': 'error',
+		'import/newline-after-import': 'error',
+		'import/no-duplicates': 'error',
 	},
 	settings: {
 		react: {

.graphqlrc.yml

@@ -34,7 +34,7 @@ generates:
       - 'typescript-react-query'
       - 'graphql-plugin-getters.js'
     config:
-      fetcher: '@lib/api/graphqlFetcher#graphqlFetcher'
+      fetcher: '~lib/api/graphqlFetcher#graphqlFetcher'
       dedupeFragments: true
       avoidOptionals: true
       defaultScalarType: unknown

__mocks__/next/router.ts

@@ -1,6 +1,5 @@
-import { ParsedUrlQuery } from 'querystring';
-
 import Router_, { NextRouter } from 'next/router';
+import { ParsedUrlQuery } from 'querystring';
 
 const Router: typeof Router_ = {
 	events: {

graphql-plugin-getters.js

@@ -40,6 +40,6 @@ module.exports = {
 
 		if (!result) return '';
 
-		return `import { fetchApi } from '@lib/api/fetchApi' \n${result}`;
+		return `import { fetchApi } from '~lib/api/fetchApi' \n${result}`;
 	},
 };

jest.config.strict.ts

@@ -1,6 +1,7 @@
-import base from './jest.config';
 import type { Config } from '@jest/types';
 
+import base from './jest.config';
+
 const config: Config.InitialOptions = {
 	...base,
 	setupFilesAfterEnv: ['<rootDir>/testSetup.strict.ts'],

jest.config.ts

@@ -1,5 +1,5 @@
-import getJestMappersFromTSConfig from 'tsconfig-paths-jest-mapper';
 import type { Config } from '@jest/types';
+import getJestMappersFromTSConfig from 'tsconfig-paths-jest-mapper';
 
 const moduleNameMapper = getJestMappersFromTSConfig('');
 

package.json

@@ -11,8 +11,8 @@
     "audit": "audit-ci --config audit-ci.json",
     "checkTs": "tsc --noEmit",
     "format": "prettier --write .",
-    "lint": "eslint --max-warnings 0 --ext .ts --ext .tsx --ext .js --ext .jsx src/",
-    "lint:fix": "eslint --max-warnings 0 --fix --ext .ts --ext .tsx --ext .js --ext .jsx src/",
+    "lint": "eslint --max-warnings 0 .",
+    "lint:fix": "eslint --max-warnings 0 --fix .",
     "start": "NODE_ICU_DATA=node_modules/full-icu next start",
     "test": "TZ=UTC jest --maxWorkers=50%",
     "test:watch": "TZ=UTC jest --watch --maxWorkers=25%",
@@ -103,10 +103,12 @@
     "eslint": "^8.9.0",
     "eslint-config-next": "^13.0.3",
     "eslint-plugin-formatjs": "^3.0.0",
+    "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jest-dom": "^4.0.1",
     "eslint-plugin-lodash": "^7.4.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-testing-library": "^5.0.5",
     "graphql": "^16.3.0",
     "graphql-tag": "^2.12.6",

src/components/HOCs/withAuthGuard.spec.tsx

@@ -6,11 +6,12 @@ import { __loadRouter } from 'next/router';
 import React, { ReactElement } from 'react';
 import { QueryClient } from 'react-query';
 
-import withAuthGuard from '@components/HOCs/withAuthGuard';
-import { fetchApi } from '@lib/api/fetchApi';
-import renderWithProviders from '@lib/test/renderWithProviders';
+import withAuthGuard from '~components/HOCs/withAuthGuard';
+import { RegisterSocialDocument } from '~containers/account/__generated__/register';
+import { fetchApi } from '~lib/api/fetchApi';
+import renderWithProviders from '~lib/test/renderWithProviders';
+
 import { GetWithAuthGuardDataDocument } from './__generated__/withAuthGuard';
-import { RegisterSocialDocument } from '@containers/account/__generated__/register';
 
 function render() {
 	const Comp = withAuthGuard(() => <>hello world</>);

src/components/HOCs/withAuthGuard.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import Login from '@components/molecules/login';
-import { getCurrentRequest } from '@lib/api/storeRequest';
-import { getSessionToken } from '@lib/cookies';
+import Login from '~components/molecules/login';
+import { getCurrentRequest } from '~lib/api/storeRequest';
+import { getSessionToken } from '~lib/cookies';
+
 import { useGetWithAuthGuardDataQuery } from './__generated__/withAuthGuard';
 
 function withAuthGuard<P>(

src/components/HOCs/withFailStates.spec.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import withFailStates from '@components/HOCs/withFailStates';
+import withFailStates from '~components/HOCs/withFailStates';
 
 jest.mock('next/router');
 

src/components/HOCs/withFailStates.tsx

@@ -1,8 +1,8 @@
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import LoadingCards from '@components/molecules/loadingCards';
-import NotFoundBase from '@components/organisms/notFound';
+import LoadingCards from '~components/molecules/loadingCards';
+import NotFoundBase from '~components/organisms/notFound';
 
 type WithFailStateOptions<P> = {
 	useShould404?: (props: P) => boolean;