feat: add ESLint rule for deterministic import order (#98)

Author: puehringer

config/eslintrc.template.js

@@ -1,4 +1,4 @@
-module.exports = ({ tsconfigRootDir }) => ({
+module.exports = ({ tsconfigRootDir, optimizeImports }) => ({
   root: true,
   extends: [
     'airbnb',
@@ -11,7 +11,7 @@ module.exports = ({ tsconfigRootDir }) => ({
     'plugin:prettier/recommended',
     // 'plugin:lodash/recommended',
   ],
-  plugins: ['react', '@typescript-eslint', 'react-compiler'],
+  plugins: ['react', '@typescript-eslint', 'react-compiler', ...(optimizeImports ? ['unused-imports'] : [])],
   ignorePatterns: ['*.js'],
   env: {
     browser: true,
@@ -68,7 +68,47 @@ module.exports = ({ tsconfigRootDir }) => ({
     'import/no-webpack-loader-syntax': 'off', // Disable to allow webpack file-loaders syntax
     'import/no-unresolved': 'off', // Disable to allow webpack file-loaders syntax
     'import/prefer-default-export': 'off',
-    'import/order': 'error',
+    ...(optimizeImports ? {
+      'import/order': [
+        1,
+        {
+          groups: [['builtin', 'external'], 'internal', ['sibling', 'parent']],
+          pathGroups: [
+            {
+              pattern: 'react*',
+              group: 'external',
+              position: 'before',
+            },
+            { pattern: 'src/**', group: 'internal', position: 'after' },
+          ],
+          pathGroupsExcludedImportTypes: ['internal', 'react'],
+          'newlines-between': 'always',
+          alphabetize: { order: 'asc' },
+        },
+      ],
+      'sort-imports': [
+        1,
+        {
+          ignoreCase: false,
+          ignoreDeclarationSort: true, // don't want to sort import lines, use eslint-plugin-import instead
+          ignoreMemberSort: false,
+          memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+          allowSeparatedGroups: true,
+        },
+      ],
+      'unused-imports/no-unused-imports': 'error',
+      'unused-imports/no-unused-vars': [
+        'warn',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+        },
+      ],
+    } : {
+      'import/order': 'error',
+    }),
     'prefer-destructuring': ['warn', { object: true, array: false }],
     'prefer-promise-reject-errors': 'warn',
     'prefer-spread': 'warn',

package.json

@@ -62,6 +62,7 @@
     "eslint-plugin-react": "^7.35.2",
     "eslint-plugin-react-compiler": "0.0.0-experimental-b8a7b48-20240830",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "fs-extra": "^11.2.0",
     "glob": "^11.0.0",

tests_fixtures/standalone_template/.eslintrc.js

@@ -1 +1 @@
-module.exports = require('visyn_scripts/config/eslintrc.template')({ tsconfigRootDir: __dirname });
+module.exports = require('visyn_scripts/config/eslintrc.template')({ tsconfigRootDir: __dirname, optimizeImports: true });

tests_fixtures/standalone_template/src/app/MainApp.stories.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { MainApp } from './MainApp';
 
 export default {

tests_fixtures/standalone_template/src/index.initialize.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
+
 import { createRoot } from 'react-dom/client';
+
 import { MainApp } from './app';
 
 // create a new instance of the app