VSCode运行ESLint报错无法加载vue插件问题求助

安全阿岳

2026-9-26

解决方案

先清理并重新安装依赖：删除项目下的node_modules文件夹、package-lock.json（或yarn.lock）文件，在项目根目录执行npm install（或对应包管理工具的安装命令），确保所有依赖安装完整无缺失。
修正VSCode ESLint插件配置：如果你打开VSCode的工作区根目录是frontend文件夹的上层目录，原有auto模式的工作目录识别会出错，将.vscode/settings.json调整为如下内容：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.workingDirectories": ["./frontend"],
  "eslint.useLocalEsLint": true,
  "eslint.nodePath": "./node_modules"
}

补充ESLint配置：在eslintrc.js顶层新增vue专属解析器配置，原有配置保持不变即可：

module.exports = {
  root: true,
  // 新增vue文件解析器配置
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: "babel-eslint",
    sourceType: 'module'
  },
  // 其余原有配置保持不变
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "off" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "off" : "off",
  },
  overrides: [
    {
      files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
      env: {
        mocha: true,
      },
    },
  ],
};