feat(eslint-plugin): add new imports config

Author: Matthieu Gicquel

example-app/.eslintrc

@@ -1,6 +1,10 @@
 {
   "root": true,
-  "extends": ["plugin:@bam.tech/recommended", "plugin:@bam.tech/a11y"],
+  "extends": [
+    "plugin:@bam.tech/recommended",
+    "plugin:@bam.tech/a11y",
+    "plugin:@bam.tech/imports"
+  ],
   "overrides": [
     {
       "files": ["*.test.tsx"],

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/imports.ts

@@ -0,0 +1,58 @@
+import { defineConfig } from "eslint-define-config";
+
+export const importsConfig = 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
+
+    /*
+     * The 3 rules below are duplicated with the recommended config -- deduplicate if we add this config to the recommended one
+     */
+    "@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",
+    "import/no-unresolved": "error", // especially useful for "asset imports" in React Native projects
+
+    "import/no-relative-parent-imports": "off",
+  },
+  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 { importsConfig } from "./imports";
 import { recommendedConfig } from "./recommended";
 import { testsConfig } from "./tests";
 
 export default {
   recommended: recommendedConfig,
   tests: testsConfig,
   a11y: a11yconfig,
+  imports: importsConfig,
 };

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",