关于eslint-plugin-vue无法检测CommonJS格式Vue单文件组件代码错误的技术咨询

刚好之前处理过类似的场景，eslint-plugin-vue默认确实更关注ESM格式的export default组件导出，但通过调整ESLint配置，完全可以让它支持检测CommonJS写法的Vue单文件组件。下面是具体的解决步骤：

1. 给单个规则开启CommonJS检测开关 #

大部分vue/*前缀的ESLint规则都自带了checkModuleExports配置选项，只要开启它，规则就会同时检测module.exports导出的组件选项。

比如你提到的vue/require-prop-types规则，直接修改项目的ESLint配置文件（比如.eslintrc.js）：

module.exports = {
  // 保留你原有的其他配置（plugins、extends等）
  rules: {
    "vue/require-prop-types": ["warn", {
      checkModuleExports: true // 开启对module.exports的检测
    }],
    // 如果你还需要其他规则支持CJS，照着这个格式加就行
    "vue/require-default-prop": ["warn", {
      checkModuleExports: true
    }],
    "vue/no-unused-props": ["error", {
      checkModuleExports: true
    }]
  }
}

2. 确保ESLint能正确解析CommonJS语法 #

如果你的项目用了自定义解析器（比如@babel/eslint-parser），得保证它能处理CommonJS代码。可以在babel配置文件（.babelrc或babel.config.js）里这么设置：

module.exports = {
  presets: [
    ["@babel/preset-env", {
      modules: "auto" // 自动适配ESM和CJS两种模块格式
    }]
  ]
}

要是用的是ESLint默认的espree解析器，那不用额外配置，它原生就支持CommonJS。

3. 全局配置（一次性搞定所有支持的规则，可选） #

如果你不想逐个规则去加配置，可以在ESLint的settings里全局开启插件对module.exports的识别：

module.exports = {
  settings: {
    vue: {
      moduleExportsAsDefault: true // 把module.exports的对象当作组件默认选项处理
    }
  }
}

这个配置会让插件自动把module.exports = {}导出的对象视为Vue组件的选项，所有支持的规则都会自动检测它。

验证配置是否生效 #

改完配置后，运行ESLint检测你的CommonJS格式组件试试：

npx eslint src/components/你的CJS组件.vue

这时候vue/require-prop-types应该会像检测ESM组件一样，触发未定义prop-types的警告了。

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