使用package.json路径别名技巧时eslint-plugin-import报错的解决方法

我之前在项目里也用过这种在资源目录放迷你package.json的技巧，确实能让导入路径更简洁，但也碰到过和你一样的eslint报错问题。不用关闭规则的话，有几个实用的解决办法：

方法一：配置ESLint的模块解析路径 #

直接告诉eslint-plugin-import，images是你的本地目录模块，不是外部依赖。在你的ESLint配置文件（比如.eslintrc.js）里添加settings配置：

module.exports = {
  // 其他ESLint配置...
  settings: {
    'import/resolver': {
      node: {
        // 这里填images目录所在的父路径，比如如果images在项目根目录就写['./']
        paths: ['./'],
        // 把images目录加入模块搜索目录
        moduleDirectory: ['node_modules', './images']
      }
    }
  }
};

这个配置会让eslint在解析images/xxx时，优先去你的本地images目录找，而不是去node_modules里找依赖。

方法二：忽略特定路径的未解析检查 #

如果你不想改全局解析配置，可以针对images开头的路径单独忽略报错。在ESLint规则里添加：

module.exports = {
  // 其他ESLint配置...
  rules: {
    'import/no-unresolved': ['error', {
      ignore: ['^images/']
    }]
  }
};

这个规则会让eslint跳过对所有以images/开头的路径的未解析检查，既保留了对其他路径的校验，又解决了当前问题。

方法三：和构建工具的别名配置同步 #

如果你的项目用了Webpack、Vite这类构建工具，更推荐把images配置成别名，然后让ESLint读取构建工具的配置，保持两者一致：

以Webpack为例： #

1. 在webpack.config.js里配置别名：

const path = require('path');

module.exports = {
  // 其他Webpack配置...
  resolve: {
    alias: {
      'images': path.resolve(__dirname, './images')
    }
  }
};

2. 安装对应的resolver依赖：

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

3. 在ESLint配置里指定用Webpack resolver：

module.exports = {
  // 其他ESLint配置...
  settings: {
    'import/resolver': {
      webpack: {
        config: './webpack.config.js'
      }
    }
  }
};

这样ESLint会直接复用Webpack的别名配置，不仅解决了报错，还能保证ESLint的路径检查和实际构建行为一致。

我自己在项目里用的是第三种方法，体验最好，毕竟构建工具的别名本身也是常用配置，一举两得。

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