VSCode не удалось загрузить плагин не может найти модуль 'eslint-plugin-prettier'

Question

Я устанавливаю eslint и Prettier в своем проекте и пытаюсь заставить автоматическое c форматирование кода работать через VSCode. Когда я go в React-файл, я вижу, что ESLint находится в ошибке, поэтому я открываю консоль ESLint, где я вижу:

Не удалось загрузить плагин 'prettier', объявленный в 'js /. eslintr c. js ': не удается найти модуль' 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: {
    }
  }

Для дальнейшего ознакомления, вот мой settings.json в VSCode:

{
    "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 делать автоформатирование на подкаталогах. Как только я открыл только подкаталог «project root» в VSCode, он начал делать все форматирование для меня при сохранении. Мне все еще интересно, смогу ли я заставить это работать без этого обходного пути.

Answer 1

У меня была та же проблема.

В вашем рабочем пространстве root есть папка .vscode с settings.json.

Добавьте следующее:

{
  "eslint.workingDirectories": [
    "./{PATH_TO_CLIENT}"
  ]
}

связанная проблема: проекты подпапок create-реагировать-app не задерживаются