如何在ESLint新扁平化配置中配置导入别名？

方法一：修正eslint-import-resolver-alias配置 #

首先确保已安装依赖：

npm install eslint-import-resolver-alias --save-dev

你的配置可能存在路径解析问题，尝试添加root字段指定项目根目录，确保别名映射的路径正确：

export default [
  // 其他ESLint配置项
  {
    settings: {
      "import/resolver": {
        alias: {
          extensions: ['.js', '.ts', '.tsx'],
          root: [process.cwd()], // 绑定当前项目根目录
          map: [
            ['components', './packages/some-package/src/components']
          ],
        },
      },
    },
  }
  // 其他ESLint配置项
];

如果相对路径仍有问题，可直接使用绝对路径：

map: [
  ['components', `${process.cwd()}/packages/some-package/src/components`]
]

方法二：修复eslint-import-resolver-webpack配置 #

先安装依赖：

npm install eslint-import-resolver-webpack --save-dev

注意事项： #

1. 确保webpack配置正确导出：如果你的webpack配置用ES模块（export default）导出，ESLint的resolver可能无法识别，建议改成CommonJS格式：

// packages/some-package/webpack.config.dev.js
module.exports = {
  resolve: {
    alias: {
      'components': './packages/some-package/src/components'
    },
    extensions: ['.js', '.ts', '.tsx']
  },
  // 其他webpack配置
};

2. 验证路径正确性：从ESLint配置文件所在目录，执行终端命令检查webpack配置路径是否存在：

ls ./packages/some-package/webpack.config.dev.js

3. 最终ESLint配置：

export default [
  // 其他ESLint配置项
  {
    settings: {
      "import/resolver": {
        webpack: {
          config: './packages/some-package/webpack.config.dev.js'
        }
      },
    },
  }
  // 其他ESLint配置项
];

通用排查步骤 #

• 清除ESLint缓存：执行npx eslint --clear-cache，避免缓存导致配置不生效
• 检查版本兼容性：确保eslint-plugin-import、对应的resolver插件版本与ESLint主版本匹配
• 排查配置覆盖：如果你的扁平化配置中有多个对象，确认后面的配置没有覆盖前面的settings字段

内容的提问来源于stack exchange，提问作者Peter S.