为何ESLint的no-relative-parent-imports规则将路径别名识别为相对导入？

你贴的这段配置不是ESLint的直接配置，它属于TypeScript配置文件（tsconfig.json）或者Webpack/Vite这类打包工具的路径别名配置——单独只加这个，ESLint根本识别不了这些@modules/*之类的别名，自然会报错要求你用相对路径或者封装包。

要让ESLint通过路径别名禁止相对导入，得做以下几步：

1. 先确保基础的别名配置生效 #

你贴的compilerOptions里的baseUrl和paths配置是对的，先把这个配置好（对应tsconfig.json或者打包工具的配置文件），保证代码能正常编译运行。

2. 给ESLint装必要的依赖 #

根据你的项目类型安装对应的解析器：

• TypeScript项目：装eslint-plugin-import和eslint-import-resolver-typescript
• Webpack项目：装eslint-plugin-import和eslint-import-resolver-webpack
• Vite项目：装eslint-plugin-import和eslint-import-resolver-vite

以TS项目为例，用npm安装：

npm install eslint-plugin-import eslint-import-resolver-typescript --save-dev

3. 配置ESLint让它识别别名并禁止相对导入 #

在你的ESLint配置文件（.eslintrc.json或.eslintrc.js）里添加以下配置：

TypeScript项目示例 #

{
  "plugins": ["import"],
  "rules": {
    // 禁止导入上级目录的模块，强制用别名
    "import/no-relative-parent-imports": "error",
    // 禁止对包级别的模块用相对导入
    "import/no-relative-packages": "error"
  },
  "settings": {
    "import/resolver": {
      // 让ESLint读取tsconfig里的别名配置
      "typescript": {
        "project": "./tsconfig.json"
      }
    }
  }
}

Webpack项目示例 #

{
  "plugins": ["import"],
  "rules": {
    "import/no-relative-parent-imports": "error"
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "./webpack.config.js"
      }
    }
  }
}

这样配置后，ESLint就能识别你的路径别名，同时强制你用别名代替相对导入，不会再弹出原来的错误提示。

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