如何修复ESLint对TypeScript路径别名的校验报错问题

1. ESLint的eslint-plugin-import插件默认使用Node原生路径解析逻辑，你仅在Babel的module-resolver插件中配置了@开头的路径别名，ESLint无法同步识别这些别名配置，因此触发import/no-unresolved的路径找不到报错。
2. 你未对ESLint的import/extensions规则做适配配置，该规则默认要求导入模块时显式声明文件后缀，因此触发缺失后缀的报错。

步骤1：安装依赖 #

安装ESLint的Babel模块解析器，让ESLint可以直接读取你在Babel中配置的别名规则：

npm install eslint-import-resolver-babel-module --save-dev
# 若使用yarn
yarn add eslint-import-resolver-babel-module --dev
# 若使用pnpm
pnpm add eslint-import-resolver-babel-module -D

步骤2：修改ESLint配置 #

调整你的.eslintrc.js配置，新增解析器、适配导入后缀规则：

module.exports = {
  // 你原有的其他ESLint配置保持不变
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.svg'],
      },
      // 新增babel-module解析器，自动同步Babel内的别名配置
      'babel-module': {}
    },
  },
  rules: {
    // 你原有的其他规则保持不变
    // 配置导入后缀规则，允许省略指定类型文件的后缀声明
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
        svg: 'never'
      }
    ]
  }
}

可选：同步TypeScript配置 #

如果你的项目使用TypeScript，还需要同步配置tsconfig.json中的路径别名，避免TS编译时报错：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/svg/*": ["./src/svg/*"],
      "@/utils/*": ["./src/utils/*"],
      "@/hooks/*": ["./src/hooks/*"],
      "@/doc/*": ["./src/doc/*"],
      "@/config/*": ["./config/*"],
      "@/styles/*": ["./src/styles/*"],
      "@/fonts/*": ["./src/assets/fonts/*"],
      "@/components/*": ["./src/components/*"],
      "@/SVGIcons/*": ["./src/SVGIcons/*"],
      "@/base/*": ["./src/*"],
      "@/assets/*": ["./src/assets/*"]
    }
  }
}

配置完成后重启ESLint服务即可生效。

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