Sort your import statements in React and TypeScript projects for consistency and lesser cognitive load
1npm install --save-dev \
2 @typescript-eslint/parser \
3 eslint-plugin-import \
4 eslint-import-resolver-typescript \
5 eslint-plugin-simple-import-sort
1// .eslintrc.cjs
2module.exports = {
3 extends: [
4 'eslint:recommended',
5 // ...
6 'plugin:import/recommended',
7 'plugin:import/typescript',
8 ],
9 parser: '@typescript-eslint/parser',
10 parserOptions: {
11 // ...
12 sourceType: 'module',
13 },
14 plugins: [
15 // ...
16 'simple-import-sort',
17 'import'
18 ],
19 rules: {
20 // ...
21 'simple-import-sort/imports': 'error',
22 'simple-import-sort/exports': 'error',
23 'import/first': 'error',
24 'import/newline-after-import': 'error',
25 'import/no-duplicates': 'error',
26 },
27 settings: {
28 // ...
29 'import/resolver': {
30 typescript: true,
31 node: true,
32 },
33 },
34}