fix: A new dependency "@jsenv/eslint-import-resolver" was added to tackle the issue of "import/no-useless-path-segments", "import/no-unused-modules" and some other import rules not working correctly.

Signed-off-by: prisis <d.bannert@anolilab.de>

Author: prisis

package.json

@@ -77,9 +77,9 @@
         "test:coverage:lint-staged-config": "pnpm --filter \"lint-staged-config\" run test:coverage",
         "test:coverage:package-json-utils": "pnpm --filter \"package-json-utils\" run test:coverage",
         "test:coverage:stylelint-config": "pnpm --filter \"stylelint-config\" run test:coverage",
+        "test:eslint-config": "pnpm --filter \"eslint-config\" run test",
         "test:lint-staged-config": "pnpm --filter \"lint-staged-config\" run test",
         "test:package-json-utils": "pnpm --filter \"package-json-utils\" run test",
-        "test:eslint-config": "pnpm --filter \"eslint-config\" run test",
         "test:stylelint": "node scripts/isNotWindows || stylelint --formatter verbose --config packages/stylelint-config/index.js ./packages/stylelint-config/__tests__/css/**/*.css",
         "test:stylelint-config": "pnpm --filter \"stylelint-config\" run test"
     },
@@ -107,9 +107,9 @@
         "cross-env": "^7.0.3",
         "cz-conventional-changelog": "^3.3.0",
         "eslint": "^8.50.0",
+        "eslint-plugin-editorconfig": "^4.0.3",
         "eslint-plugin-etc": "^2.0.3",
         "eslint-plugin-vitest": "^0.3.1",
-        "eslint-plugin-editorconfig": "^4.0.3",
         "eslint-plugin-vitest-globals": "^1.4.0",
         "husky": "^8.0.3",
         "is-ci": "^3.0.1",

packages/eslint-config/README.md

@@ -52,15 +52,15 @@ To install this config, run the following command.
 > Note: `eslint-plugin-import@npm:eslint-plugin-i` is needed to use the correct package.
 
 ```bash
-npm install --save-dev eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugin-i@latest
+npm install --save-dev eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugin-i@latest @babel/core
 ```
 
 ```sh
-pnpm add -D eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugin-i@latest
+pnpm add -D eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugin-i@latest @babel/core
 ```
 
 ```sh
-yarn add -D eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugin-i@latest
+yarn add -D eslint @anolilab/eslint-config eslint-plugin-import@npm:eslint-plugin-i@latest @babel/core
 ```
 
 ## Usage
@@ -112,7 +112,7 @@ For more advanced use cases see the example configurations for Node, TypeScript,
 ### TypeScript
 
 ```bash
-npm install --save-dev eslint typescript @anolilab/eslint-config
+npm install --save-dev typescript
 ```
 
 Please extend the `.eslintrc.js` file with the correct `tsconfig.js` path if you have a custom path.
@@ -167,7 +167,11 @@ module.exports = defineConfig({
 You need to have "react" and "react-dom" installed.
 
 ```bash
-  npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks @anolilab/eslint-config
+npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks
+
+yarn add -D eslint-plugin-react eslint-plugin-react-hooks
+
+pnpm add -D eslint-plugin-react eslint-plugin-react-hooks
 ```
 
 Or for the use of `TypeScript` in react install "typescript" as a dev dependency.
@@ -182,10 +186,38 @@ module.exports = {
 };
 ```
 
+Or for the use of `.jsx` files install "@babel/plugin-syntax-jsx" as a dev dependency.
+
+```bash
+npm install --save-dev babel @babel/plugin-syntax-jsx
+
+yarn add -D babel @babel/plugin-syntax-jsx
+
+pnpm add -D babel @babel/plugin-syntax-jsx
+```
+
+In your `babel.config.js` file add the plugin.
+
+```js
+const babelPluginSyntaxJSX = require("@babel/plugin-syntax-jsx");
+
+module.exports = {
+  plugins: [
+    [
+      babelPluginSyntaxJSX,
+      {
+        pragma: "React.createElement",
+        pragmaFrag: "React.Fragment",
+      },
+    ],
+  ],
+};
+```
+
 ### MDX
 
 ```bash
-npm install --save-dev eslint eslint-plugin-mdx @anolilab/eslint-config
+npm install --save-dev eslint eslint-plugin-mdx
 ```
 
 For more information about `missing` or `optional` to install rules see the `eslint` console output.
@@ -359,7 +391,7 @@ Of course, we also provide a recommended Prettier [configuration](../prettier-co
 If you are using experimental features such as class fields with JavaScript files you should install `@babel/eslint-parser`.
 
 ```bash
-npm install --save-dev @babel/core @babel/eslint-parser
+npm install --save-dev @babel/core
 ```
 
 ## Plugins

packages/eslint-config/bin/generate-eslint-cofig.js

@@ -1,2 +1,3 @@
 #!/usr/bin/env node
+// eslint-disable-next-line import/extensions
 require("../dist/postinstall");

packages/eslint-config/package.json

@@ -175,6 +175,7 @@
     "devDependencies": {
         "@anolilab/semantic-release-preset": "7.0.3",
         "@arthurgeron/eslint-plugin-react-usememo": "^2.0.1",
+        "@jsenv/eslint-import-resolver": "^8.0.2",
         "@testing-library/dom": "^9.3.3",
         "@total-typescript/ts-reset": "^0.5.1",
         "@types/confusing-browser-globals": "^1.0.1",

packages/eslint-config/src/config/plugins/html.ts

@@ -36,6 +36,10 @@ const config: Linter.Config = {
             globals: {
                 sourceCode: true,
             },
+            env: {
+                browser: true,
+                node: false,
+            },
             parser: "@html-eslint/parser",
             plugins: ["html", "@html-eslint"],
             rules: {

packages/eslint-config/src/config/plugins/import.ts

@@ -1,4 +1,4 @@
-import { fromRoot, hasTypescript, packageIsTypeModule } from "@anolilab/package-json-utils";
+import { fromRoot, packageIsTypeModule, projectPath } from "@anolilab/package-json-utils";
 import type { Linter } from "eslint";
 
 import { createConfigs } from "../../utils/create-config";
@@ -62,12 +62,14 @@ const config: Linter.Config = createConfigs([
                             js: "always",
                             jsx: "always",
                             mjs: "always",
+                            json: "always",
                         }
                         : {
                             cjs: "never",
                             js: "never",
                             jsx: "never",
                             mjs: "never",
+                            json: "always",
                         },
                 ],
 
@@ -86,7 +88,11 @@ const config: Linter.Config = createConfigs([
                 // deprecated: use `import/first`
                 "import/imports-first": "off",
 
-                // Forbid modules to have too many dependencies
+                // "import/max-dependencies" is not super useful
+                // Either you will disable the eslint rule because it's "normal"
+                // to have a lot of dependencies or feel compelled to reduce the number of imports.
+                // It's already visible that a file has many imports and that ideally they should be
+                // less imports, no need for ESLint, let's keep ESLint for more valuable things.
                 // https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/max-dependencies.md
                 "import/max-dependencies": ["off", { max: 10 }],
 
@@ -283,8 +289,10 @@ const config: Linter.Config = createConfigs([
                 "import/no-relative-packages": "error",
 
                 // Ensures that there are no useless path segments
+                // TODO: Create a PR to fix commonjs option, when eslint --fix is run, it throws an error on the no-useless-path-segments.js:118
+                // @see https://github.com/import-js/eslint-plugin-import/pull/2886
                 // https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-useless-path-segments.md
-                "import/no-useless-path-segments": ["error", { commonjs: !packageIsTypeModule, noUselessIndex: true }],
+                "import/no-useless-path-segments": ["error", { commonjs: false, noUselessIndex: true }],
 
                 // Forbid Webpack loader syntax in imports
                 // https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-webpack-loader-syntax.md
@@ -312,22 +320,22 @@ const config: Linter.Config = createConfigs([
                 "import/extensions": [".js", ".cjs", ".mjs", ".jsx"],
                 // Ensure consistent use of file extension within the import path
                 "import/ignore": ["\\.(coffee|scss|css|less|hbs|svg|json)$"],
+            },
+        },
+        type: "all",
+    },
+    {
+        config: {
+            settings: {
                 "import/resolver": {
-                    node: {
-                        extensions: [".mjs", ".js", ".json", ".cjs", ".jsx"],
+                    "@jsenv/eslint-import-resolver": {
+                        rootDirectoryUrl: projectPath,
+                        packageConditions: ["node", "import"],
                     },
-                    ...(hasTypescript
-                        ? {
-                            typescript: {
-                                alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
-                                project: fromRoot("tsconfig.json"),
-                            },
-                        }
-                        : {}),
                 },
             },
         },
-        type: "all",
+        type: "javascript",
     },
     {
         config: {
@@ -347,8 +355,11 @@ const config: Linter.Config = createConfigs([
                         js: "never",
                         jsx: "never",
                         mjs: "never",
+                        cjs: "never",
                         ts: "never",
                         tsx: "never",
+                        json: "always",
+                        svg: "always",
                     },
                 ],
 
@@ -372,10 +383,10 @@ const config: Linter.Config = createConfigs([
 
                 // Append 'ts' extensions to 'import/resolver' setting
                 "import/resolver": {
-                    node: {
-                        extensions: [".mjs", ".cjs", ".js", ".json", ".ts", ".d.ts"],
+                    typescript: {
+                        alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
+                        project: fromRoot("tsconfig.json"),
                     },
-                    typescript: true,
                 },
             },
         },

packages/eslint-config/src/config/plugins/react.ts

@@ -649,11 +649,6 @@ const config: Linter.Config = {
 
             // View link below for react rules documentation
             settings: {
-                "import/resolver": {
-                    node: {
-                        extensions: [".js", ".jsx", ".json", ".cjs", ".mjs"],
-                    },
-                },
                 propWrapperFunctions: [
                     "forbidExtraProps", // https://www.npmjs.com/package/airbnb-prop-types
                     "exact", // https://www.npmjs.com/package/prop-types-exact
@@ -669,6 +664,15 @@ const config: Linter.Config = {
         },
         {
             files: ["*.jsx"],
+            parser: "@babel/eslint-parser",
+            parserOptions: {
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+            settings: {
+                extensions: [".jsx"],
+            },
             rules: {
                 // only .jsx files may have JSX
                 // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md

packages/eslint-config/src/config/plugins/unicorn.ts

@@ -1,6 +1,6 @@
 import { hasDependency, hasDevDependency, packageIsTypeModule } from "@anolilab/package-json-utils";
 import type { Linter } from "eslint";
-import semver from "semver";
+import { gte } from "semver";
 
 import indent from "../../utils/indent";
 
@@ -67,7 +67,7 @@ const config: Linter.Config = {
 
         "unicorn/prefer-module": packageIsTypeModule ? "error" : "off",
 
-        "unicorn/prefer-node-protocol": semver.gte(process.version, "v16.0.0") ? "error" : "off",
+        "unicorn/prefer-node-protocol": gte(process.version, "v16.0.0") ? "error" : "off",
 
         // We only enforce it for single-line statements to not be too opinionated.
         "unicorn/prefer-ternary": ["error", "only-single-line"],

packages/eslint-config/src/index.ts

@@ -17,7 +17,7 @@ import { join } from "node:path";
 import { hasDependency, hasDevDependency, packageIsTypeModule, pkg } from "@anolilab/package-json-utils";
 import type { Linter } from "eslint";
 import globals from "globals";
-import semver from "semver";
+import { intersects, rcompare } from "semver";
 
 import { internalPluginConfig, pluginRules, possiblePluginRules, rules } from "./config";
 import engineRules from "./engine-node-overwrite";
@@ -77,6 +77,7 @@ if (!global.hasAnolilabEsLintConfigLoaded) {
 }
 
 const configRules: Linter.RulesRecord = {};
+
 let nodeVersion: string | undefined;
 
 if (pkg?.engines?.["node"]) {
@@ -85,9 +86,9 @@ if (pkg?.engines?.["node"]) {
 
 Object.entries(engineRules).forEach(([rule, ruleConfig]) => {
     Object.keys(ruleConfig)
-        .sort(semver.rcompare)
+        .sort(rcompare)
         .forEach((minVersion) => {
-            if (nodeVersion && semver.intersects(nodeVersion, `<${minVersion}`)) {
+            if (nodeVersion && intersects(nodeVersion, `<${minVersion}`)) {
                 // eslint-disable-next-line security/detect-object-injection
                 configRules[rule] = ruleConfig[minVersion as keyof typeof ruleConfig] as Linter.RuleEntry;
             }
@@ -118,6 +119,14 @@ const config: Linter.Config = {
     globals: {
         ...globals.browser,
         ...globals.nodeBuiltin,
+        ...(packageIsTypeModule
+            ? {
+                __dirname: "off",
+                __filename: "off",
+                exports: "off",
+                require: "off",
+            }
+            : { __dirname: true, __filename: true, exports: true, require: true }),
     },
     ignorePatterns: [
         "!.*",
@@ -173,7 +182,7 @@ const config: Linter.Config = {
         },
         // Fixes https://github.com/eslint/eslint/discussions/15305
         {
-            files: packageIsTypeModule ? ["*.js", "*.mjs"] : ["*.mjs"],
+            files: packageIsTypeModule ? ["**/*.js", "**/*.mjs"] : ["**/*.mjs"],
             parser: "@babel/eslint-parser",
             parserOptions: {
                 babelOptions: {
@@ -182,6 +191,31 @@ const config: Linter.Config = {
                 requireConfigFile: false,
             },
         },
+        {
+            env: {
+                commonjs: true,
+            },
+            files: ["**/*.cjs"],
+            // inside *.cjs files. restore commonJS "globals"
+            globals: {
+                __dirname: true,
+                __filename: true,
+                exports: true,
+                require: true,
+            },
+        },
+        {
+            env: {
+                commonjs: false,
+            },
+            files: ["**/*.mjs"],
+            globals: {
+                __dirname: "off",
+                __filename: "off",
+                exports: "off",
+                require: "off",
+            },
+        },
     ],
     // Disable the parser by default
     parser: "",