ESLint配置中extends使用require.resolve与不使用的差异及必要性

两种写法的核心差异 #

直接字符串写法（JSON配置） #

{
  "extends": [
    "plugin:react/recommended",
    "plugin:prettier/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended"
  ]
}

require.resolve写法（JS配置） #

module.exports = {
  extends: [
    require.resolve('@vercel/style-guide/eslint/browser'),
    require.resolve('@vercel/style-guide/eslint/react'),
    require.resolve('@vercel/style-guide/eslint/next'),
  ],
};

两者的核心差异体现在以下几点：

• 解析逻辑不同：
  • 直接字符串写法：由ESLint自身按照内置规则解析路径。比如plugin:react/recommended会被ESLint识别为「eslint-plugin-react插件中的recommended配置集」，自动去node_modules中查找对应插件并加载配置。对于共享配置（如eslint-config-airbnb），可以直接简写为airbnb，ESLint会自动补全前缀。
  • require.resolve写法：由Node.js的模块解析机制先找到配置文件的绝对路径，再将该路径传递给ESLint。ESLint不需要做额外解析，直接加载该路径对应的文件。
• 适用场景不同：
  • 直接字符串：适用于符合ESLint官方命名规范的插件或共享配置，写法简洁直观，是日常开发的首选。
  • require.resolve：适用于非标准命名的共享配置（如@vercel/style-guide这类不以eslint-config-为前缀的包），或者需要加载包内特定子路径配置文件的场景。此外在monorepo项目中，它能避免路径解析歧义，确保配置文件被正确找到。
• 配置文件格式限制：
  • 直接字符串可以用JSON、YAML等静态配置文件；
  • require.resolve只能在JS格式的ESLint配置文件中使用，因为需要执行JavaScript函数。

require.resolve的具体作用 #

require.resolve是Node.js的内置方法，作用是查找模块文件的绝对路径。它会按照Node的模块解析规则（优先查找当前项目的node_modules，逐层向上遍历父目录），找到你指定的模块或文件，返回其完整的绝对路径（例如/Users/username/project/node_modules/@vercel/style-guide/eslint/browser.js）。

对于ESLint配置来说，这个方法的价值在于：绕开ESLint的内置路径解析规则，直接指定配置文件的精确位置，避免因命名不规范或路径歧义导致的配置加载失败。

是否有必要使用require.resolve？ #

分情况判断：

• 不需要用的场景：如果你使用的是ESLint官方插件（如eslint-plugin-react）、标准共享配置（如eslint-config-prettier），直接写字符串即可，完全没必要用require.resolve，写法更简洁。
• 需要用的场景：
  1. 使用的共享配置不符合ESLint默认命名规范（比如包名不以eslint-config-开头）；
  2. 需要加载包内部的特定子配置文件（如@vercel/style-guide中的browser/react/next子配置）；
  3. 项目结构复杂（如monorepo），ESLint无法自动正确解析配置路径时。

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