VSCode无法加载插件，找不到模块“eslint-plugin-prettier”。

Question

我正在为我的项目安装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中将子目录作为“项目根目录”打开，它就开始在保存时为我执行所有格式化操作。我仍然很好奇是否可以在没有这种解决方法的情况下使其正常工作。

- Brady Dowling

---

对我来说也是同样的观察。 - Oscar6E

Answer 1

我有同样的问题。

在您的根工作区中，您有一个名为.vscode的文件夹，其中包含一个settings.json文件。

请添加以下内容：

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

相关问题：create-react-app子文件夹项目无法进行代码检查

- Julez

---

太棒了。我的项目在子文件夹中，这就解决了问题。 - slhck

@Julez，{PATH_TO_CLIENT}是我们需要替换的内容，还是可以直接使用的特殊变量？我在我的monorepo下有很多包在package/**中，我能使用glob吗？ - mesqueeb

@mesqueeb 这是你需要根据你的项目进行更改的内容。我只是为了参考而展示它。 - Julez

@Julez 我需要保留那些 {} 吗？ - mesqueeb

不，你需要用自己的路径替换 {PATH_TO_CLIENT}。 - Julez

在VSCode中，你需要“重新启动ESLint服务器”才能看到更改生效。 - undefined

Answer 2

VSCode/eslint无法检测到新安装的npm包在node_modules目录中。运行npm i eslint-plugin-prettier后，请重新启动VSCode工作区。每次我设置新的JavaScript/Node/React项目并添加eslint和prettier时，都会经常出现这种情况，按照此指南推荐的顺序。

- Brian Ogden

---

重启 vscode 对我也起作用了。 - Danny

重启 eslint 服务对我来说也起作用，而不是整个 VS CODE。 - Ricardo Silva

Answer 3

尝试运行以下命令可以解决您的问题：我也用过这个命令:) npm i eslint-plugin-prettier@latest -D

- Aman Jha

Answer 4

升级到 eslint@7.32.0 对我来说解决了这个问题。之前使用的是 ~7.10.0 版本。如果使用 VSCode，请确保重新启动。

yarn upgrade eslint
# or
npm update eslint

- Matt

Answer 5

这是可行的解决方案：

步骤：

1. 删除 node_modules 和 yarn.lock/npm.lock
2. 使用 yarn 或 npm 重新安装包。
3. 使用 npm i --save-dev eslint eslint-plugin-jest 或 yarn add --dev eslint eslint-plugin-jest 再次安装 eslint

- Kanishka Sahu

Answer 6

请确保您的包中没有重复的 eslint 安装，即 yarn list eslint 只应返回一个版本。否则，请检查您在 package.json 中列出的版本并确保 yarn.lock 文件没有干扰。

- clodal

Answer 7

ESLint在vscode中的输出提示了全局安装的软件包。这就是我的问题所在。

如果你不需要这些软件包全局安装（通常不需要），可以运行：

npm uninstall -g eslint
npm uninstall -g eslint-plugin-prettier

可以修复问题

我还建议在vscode中运行>ESLint: Restart ESLint Server（cmd+p）

- below9k