Vue.js执行npm run serve时ESLint报错找不到babel-code-frame模块求助

问题成因 #

• Ubuntu系统通过apt源安装的全局ESLint版本为v5.0.1，安装路径为/usr/share/nodejs/eslint
• 项目本地通过Vue CLI 4.5.x安装的ESLint版本为^6.7.2，二者存在版本不兼容
• 全局ESLint v5内置的codeframe格式化器依赖已废弃的babel-code-frame包，项目本地未安装该包，因此加载格式化流程时报模块缺失错误
• 报错栈中加载模块的路径指向全局ESLint的源码文件，说明Vue CLI启动时优先加载了全局旧版本ESLint，而非项目本地的ESLint版本

分步修复操作 #

方案一（推荐，彻底解决版本冲突） #

1. 移除系统级apt安装的全局ESLint，避免和项目本地版本冲突
   执行命令：

   sudo apt remove node-eslint
   sudo apt autoremove
   

   验证：运行which eslint，若输出为空则代表系统级ESLint已完全移除，不会被项目扫描到。

2. 清理项目本地旧依赖，重新安装匹配版本的依赖包
   进入项目根目录执行：

   rm -rf node_modules package-lock.json
   npm install
   

   这一步会确保项目仅加载自身node_modules目录下的ESLint v6.7.2版本，不会再引用全局路径的旧版ESLint。

3. 启动项目验证
   执行命令：

   npm run serve
   

   正常即可启动开发服务。

方案二（临时兼容，无需移除全局ESLint） #

如果需要保留系统级ESLint，可直接修改ESLint的输出格式化器，跳过依赖babel-code-frame的codeframe格式化器：

1. 在项目根目录新建vue.config.js文件（若已存在则直接修改），写入以下配置：

   module.exports = {
     pluginOptions: {
       eslint: {
         formatter: 'stylish'
       }
     }
   }
   

2. 重新执行npm run serve启动项目即可。

内容的提问来源于stack exchange，提问作者DFX Nguyễn