VSCode 加载插件失败找不到模块 'eslint-plugin-prettier'答案

【问题标题】：VSCode failed to load plugin cannot find module 'eslint-plugin-prettier'VSCode 加载插件失败找不到模块 'eslint-plugin-prettier'
【发布时间】：2020-05-20 16:56:57
【问题描述】：

我正在我的项目中安装eslint 和Prettier，并尝试通过VSCode 进行自动代码格式化。当我转到一个 React 文件时，我看到 ESLint 出错了，所以我打开了 ESLint 控制台，我看到了：

无法加载在“js/.eslintrc.js”中声明的插件“prettier”：找不到模块“eslint-plugin-prettier”

我相信我已经安装了所有必要的模块，这是我的 package.json 文件的一部分：

  "devDependencies": {
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.18.3",
    "prettier": "1.19.1"
  }

我唯一能想到的是，这是我的项目目录结构造成的，如下：

/
(some Java stuff out here)
js/
  node_modules/
  package.json
  package-lock.json
  .eslintrc.js
  .prettierrc

供参考，这是我的.eslintrc.js：

module.exports = {
    root: true,
    env: {
      browser: true,
      node: true
    },
    parserOptions: {
      parser: 'babel-eslint',
      ecmaVersion: 2015,
      sourceType: 'module'
    },
    extends: [
      'prettier',
      'plugin:prettier/recommended'
    ],
    plugins: [
        'react',
        'prettier'
    ],
    rules: {
    }
  }

为了进一步参考，这是我在 VSCode 中的settings.json：

{
    "terminal.integrated.shell.osx": "/bin/zsh",
    "editor.formatOnSave": false,
    // turn it off for JS and JSX, we will do this via eslint
    "[javascript]": {
        "editor.formatOnSave": false
    },
    "[javascriptreact]": {
        "editor.formatOnSave": false
    },
    // tell the ESLint plugin to run on save
    "eslint.validate": [ "vue", "html", "javascript", "javascriptreact"],
    "prettier.disableLanguages": [
        "javascript", "javascriptreact"
    ],
    "eslint.workingDirectories": [
        { "mode": "auto" }
    ],
    "liveServer.settings.donotShowInfoMsg": true,
    "workbench.startupEditor": "welcomePage",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "liveServer.settings.donotVerifyTags": true,
    "diffEditor.ignoreTrimWhitespace": false,
}

更新：这似乎是 VSCode 对子目录进行自动格式化的问题。一旦我在 VSCode 中将子目录作为“项目根目录”打开，它就开始在保存时为我进行所有格式化。我仍然很好奇如果没有这种解决方法我是否可以让它工作。

【问题讨论】：

对我来说同样的观察

标签： visual-studio-code eslint prettier eslintrc

【解决方案1】：

我有同样的问题。

在您的根工作区中，您有一个带有 settings.json 的 .vscode 文件夹。

添加以下内容：

{
  "eslint.workingDirectories": [
    "./{PATH_TO_CLIENT}" // replace {PATH_TO_CLIENT} with you own path
  ]
}

【讨论】：

太棒了。我的项目在一个子文件夹中，并且修复了它。
这为我修好了！我刚刚搜索了所有 github 问题以尝试各种解决方案，这是唯一有效的解决方案。我们在 /backend 和 /client 文件夹中有 eslint 用于上下文。
@Julez 是 {PATH_TO_CLIENT} 我们需要替换的东西，还是我们可以按原样使用的特殊变量？我的 monorepo 中有一堆包在 package/** 下我可以使用 glob 吗？
@mesqueeb 您需要根据项目进行更改。我只是展示它以供参考。
@Julez 我需要将 {} 保留在那里吗？

【解决方案2】：

升级到 eslint@7.32.0 为我解决了这个问题。以前在 ~7.10.0.使用时请务必重启 VSCode。

yarn upgrade eslint
# or
npm update eslint

【讨论】：