feat(eslint-plugin): add new imports config (#108)

Author: Matthieu Gicquel

example-app/.eslintrc

@@ -7,5 +7,7 @@
       "extends": "plugin:@bam.tech/tests"
     }
   ],
-  "rules": { "@bam.tech/require-named-effect": "error" }
+  "rules": {
+    "@bam.tech/require-named-effect": "error"
+  }
 }

example-app/eslint-breaking-examples/not-breaking-rules.tsx

@@ -1,3 +1,5 @@
+import "react";
+
 import { StyleSheet, Text, View } from "react-native";
 
 // This should not trigger a warning nor an error because explicit-function-return-type rule is off

example-app/package.json

@@ -16,14 +16,19 @@
     "@types/react": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "eslint": "^8.44.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-native": "^4.0.0",
     "eslint-plugin-react-native-a11y": "^3.3.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-testing-library": "^6.0.1",
+    "eslint-plugin-unused-imports": "^3.0.0",
     "jest": "^29.5.0",
     "prettier": "^3.0.0",
     "typescript": "^5.0.0"

packages/eslint-plugin/lib/configs/import.ts

@@ -0,0 +1,60 @@
+import { defineConfig } from "eslint-define-config";
+
+export const importConfig = defineConfig({
+  extends: ["plugin:import/typescript"],
+  plugins: ["simple-import-sort", "import", "unused-imports"],
+  settings: {
+    "import/resolver": {
+      typescript: true,
+      node: true,
+    },
+  },
+  rules: {
+    /*
+     * Standardized import syntax
+     */
+    "@typescript-eslint/consistent-type-imports": "error", // use "import type" for types. Optimize import readability, bundle size, avoid circular dependencies
+    "@typescript-eslint/no-require-imports": "error",
+    "@typescript-eslint/no-var-requires": "off", // it's mostly a duplicate of no-require-imports
+
+    /*
+     * Auto-remove unused imports
+     */
+    "@typescript-eslint/no-unused-vars": "off", // eslint-plugin-unused-imports replaces this rule
+    "unused-imports/no-unused-imports": "error", // Automatically remove unused imports on save
+    "unused-imports/no-unused-vars": "error",
+
+    /*
+     * Import sorting
+     */
+    "simple-import-sort/imports": [
+      "error",
+      {
+        groups: [
+          ["^\\u0000"], // side effect imports
+          ["^@?\\w"], // packages
+          ["^#"], // internal absolute imports
+          ["^[^.]"], // everything else
+          ["^\\."], // relative imports
+        ],
+      },
+    ],
+    "simple-import-sort/exports": "error",
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
+
+    /*
+     * Bug prevention
+     */
+    "import/no-unresolved": "error", // especially useful for "asset imports" in React Native projects
+  },
+  overrides: [
+    {
+      files: ["*.js"],
+      rules: {
+        "@typescript-eslint/no-require-imports": "off",
+      },
+    },
+  ],
+});

packages/eslint-plugin/lib/configs/index.ts

@@ -1,9 +1,11 @@
 import { a11yconfig } from "./a11y";
+import { importConfig } from "./import";
 import { recommendedConfig } from "./recommended";
 import { testsConfig } from "./tests";
 
 export default {
   recommended: recommendedConfig,
   tests: testsConfig,
   a11y: a11yconfig,
+  import: importConfig,
 };

packages/eslint-plugin/lib/configs/recommended.ts

@@ -19,9 +19,10 @@ export const recommendedConfig = defineConfig({
     "plugin:react/jsx-runtime", // Disables the rules that require importing react when using JSX
     "plugin:react-native/all",
     "plugin:react-hooks/recommended",
+    "plugin:@bam.tech/import",
     "plugin:prettier/recommended", // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
   ],
-  plugins: ["@bam.tech", "unused-imports"],
+  plugins: ["@bam.tech"],
   rules: {
     "@typescript-eslint/ban-ts-comment": "warn",
     "@typescript-eslint/explicit-function-return-type": "off",
@@ -38,9 +39,6 @@ export const recommendedConfig = defineConfig({
     "react/prop-types": "off",
     "react/no-unused-prop-types": "error",
     "react/jsx-no-useless-fragment": "error",
-    "@typescript-eslint/no-unused-vars": "off",
-    "unused-imports/no-unused-imports": "error",
-    "unused-imports/no-unused-vars": "error",
     // ☢️ Rules that require type information must be added to the `.ts` overrides section below
   },
   env: {

packages/eslint-plugin/package.json

@@ -21,21 +21,24 @@
     "build": "tsc",
     "lint": "npm-run-all \"lint:*\"",
     "lint:js": "eslint .",
-    "lint:eslint-docs": "npm-run-all \"update:eslint-docs -- --check\"",
+    "lint:eslint-docs": "npm-run-all \"update:eslint-docs --check\"",
     "test": "jest",
     "update:eslint-docs": "eslint-doc-generator --config-emoji tests,🧪"
   },
   "peerDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-native": "^4.0.0",
     "eslint-plugin-react-native-a11y": "^3.3.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-testing-library": "^6.0.1",
     "eslint-plugin-unused-imports": "^3.0.0",
     "prettier": "^3.0.0"
@@ -50,14 +53,17 @@
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-doc-generator": "^1.4.3",
+    "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-eslint-plugin": "^5.1.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-native": "^4.0.0",
     "eslint-plugin-react-native-a11y": "^3.3.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-testing-library": "6.0.1",
     "eslint-plugin-unused-imports": "^3.0.0",
     "jest": "^29.7.0",