如何修改ESLint的resolve配置？解决大小写索引文件解析报错

看起来你已经搞定了Webpack的配置，让它能同时解析index和Index开头的入口文件，但ESLint的import插件还没同步这个规则对吧？别担心，咱们调整下ESLint的配置就能解决import/no-unresolved和import/extensions这两个错误：

1. 安装必要的ESLint插件 #

首先确保你装了eslint-import-resolver-webpack，这个插件能让ESLint复用Webpack的解析规则，不用重复写配置：

npm install eslint-import-resolver-webpack --save-dev
# 或者用yarn
yarn add eslint-import-resolver-webpack --dev

2. 修改.eslintrc配置 #

在你的ESLint配置文件里，添加settings字段，告诉ESLint用Webpack的解析器，并且明确指定要识别的主文件名（包括大小写的index/Index）：

{
  "extends": "airbnb",
  "env": {
    "browser": true
  },
  "rules": {
    "no-restricted-syntax": "off",
    "no-continue": "off",
    // 其他你已有的规则...
    // 配置扩展名规则，和Webpack行为保持一致
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "webpack.config.js" // 指向你的Webpack配置文件路径
      },
      // 明确指定要解析的主文件名
      "mainFiles": ["index", "Index"]
    }
  }
}

3. 关键配置说明 #

• eslint-import-resolver-webpack：让ESLint直接读取Webpack的解析规则，如果你已经在Webpack里配置了resolve.mainFiles: ['index', 'Index']，ESLint会自动复用这个设置，手动加上mainFiles是双重保险。
• import/extensions规则：Airbnb的默认规则会强制检查文件扩展名，我们设置"never"可以让ESLint允许省略.js/.jsx扩展名，和Webpack的解析逻辑对齐。

4. 验证配置 #

保存配置后，重启ESLint服务（或者重新运行lint命令），应该就不会再报那两个错误了。如果还有问题，可以检查下Webpack的resolve配置是否正确，比如你的webpack.config.js里应该有类似这样的代码：

module.exports = {
  // ...其他配置
  resolve: {
    mainFiles: ['index', 'Index'],
    extensions: ['.js', '.jsx']
  }
};

这样Webpack和ESLint的解析规则就完全同步啦，项目运行和代码检查都能正常工作~

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