配置eslint-plugin-module-resolver时import/no-unresolved规则报错求助

问题背景 #

已完成ESLint、Prettier、Babel的无冲突配置，尝试通过eslint-plugin-module-resolver在TypeScript项目中配置绝对路径。项目编译、转译及服务启动均正常，但执行npm run lint时触发ESLint报错，提示import/no-unresolved规则配置存在额外属性。

错误信息 #

npm run lint

> setup@1.0.0 lint
> eslint . --ext .ts .tsx


Oops! Something went wrong! :(

ESLint: 8.25.0

Error: .eslintrc.json:
        Configuration for rule "import/no-unresolved" is invalid:
        Value {"plugins":["module-resolver/use-alias",{"alias":{"@config":"./src/config","@controllers":"./src/controllers","@services":"./src/services","@models":"./src/models","@routes":"./src/routes","@pages":"./src/pages","@utils":"./src/utils","@middlewares":"./src/middlewares"}}],"caseSensitive":true,"caseSensitiveStrict":false} should NOT have additional properties.

问题原因 #

错误在于将eslint-plugin-module-resolver的别名配置放在了import/no-unresolved规则的参数中，不符合该规则的配置规范。正确的做法是将模块解析器的配置放在ESLint的settings字段下，而非规则内部。

解决方案 #

1. 修改.eslintrc.json配置 #

将别名配置移至settings字段，并调整import/no-unresolved规则的配置：

{
  "env": {
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["@typescript-eslint", "module-resolver", "prettier", "import"],
  "settings": {
    "import/resolver": {
      "module-resolver": {
        "alias": {
          "@config": "./src/config",
          "@controllers": "./src/controllers",
          "@services": "./src/services",
          "@models": "./src/models",
          "@routes": "./src/routes",
          "@pages": "./src/pages",
          "@utils": "./src/utils",
          "@middlewares": "./src/middlewares"
        },
        "extensions": [".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "indent": ["error", 2],
    "tabwidth": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "trailingComma": ["warn", "none"],
    "prettier/prettier": "error",
    "import/no-unresolved": "error"
  }
}

2. 确保tsconfig.json配置对应路径 #

TypeScript本身需要识别绝对路径，需在tsconfig.json的compilerOptions中添加paths配置：

{
  "compilerOptions": {
    // 其他原有配置...
    "baseUrl": ".",
    "paths": {
      "@config/*": ["src/config/*"],
      "@controllers/*": ["src/controllers/*"],
      "@services/*": ["src/services/*"],
      "@models/*": ["src/models/*"],
      "@routes/*": ["src/routes/*"],
      "@pages/*": ["src/pages/*"],
      "@utils/*": ["src/utils/*"],
      "@middlewares/*": ["src/middlewares/*"]
    }
  }
}

3. 验证修复 #

执行npm run lint，确认报错消失，ESLint可正常识别绝对路径导入。

内容的提问来源于stack exchange，提问作者Gonzalo Cugiani