Notes

Sorted imports in TypeScript projects

Sort your import statements in React and TypeScript projects for consistency and lesser cognitive load

Edit on GitHub

Typescript
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}