ESLint with Prettier issues on Yarn global install

user_613605 0
Viewed 17809

I'm in the process of setting up my ReactJS environment, and I'm following the FrontendMasters course on the topic.

After having installed eslint and prettier globally via Yarn, the author runs this command eslint js\**\*.{js,jsx} and on his machine, all is good, but I get the following:

Oops! Something went wrong! :(

ESLint couldn't find the plugin "eslint-plugin-prettier". This can happen for a couple different reasons:

  1. If ESLint is installed globally, then make sure eslint-plugin-prettier is also installed globally. A globally-installed ESLint cannot find a locally-installed plugin.

  2. If ESLint is installed locally, then it's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm i eslint-plugin-prettier@latest --save-dev

If you still can't figure out the problem, please stop by https://gitter.im/eslint/eslint to chat with the team.

I tried Google, but couldn't find anything relevant. Why is this happening? I am on Windows 10, using the latest version of Yarn (v0.24.6) and my eslintrc.json looks like this:

{
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["prettier"],
  "parserOptions": {
    "ecmaVersion": 2016,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}

UPDATE

I followed Daydream's advice below, though I do not have nvm installed. But I did delete the node_modules folder, and after a chat in ESLint's Gitter, I went ahead and uninstalled ESLint, and Prettier globally. I then made ESLint and Prettier devDependencies. Finally I ran yarn command to reinstall everything, and now I get this:

Image

Note: The project is open source, and is on GitHub if you want to see for yourself.

prettier yarnpkg eslint
7 Answers

I was missing several packages. Here is how I fixed it.

npm i eslint-config-prettier -save-dev
npm i eslint-config-standard -save-dev
npm i eslint-plugin-node -save-dev
npm i eslint-plugin-promise -save-dev

Here is my package.json

{
  "name": "rpp-react",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "babel-runtime": "^6.20.0",
    "meteor-node-stubs": "~0.2.4",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-addons-pure-render-mixin": "^15.6.0",
    "react-dom": "^15.6.1",
    "react-tap-event-plugin": "^2.0.1"
  },
  "devDependencies": {
    "babel-eslint": "^8.0.0",
    "eslint": "^4.7.2",
    "eslint-config-prettier": "^2.5.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-plugin-flowtype": "^2.35.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-prettier": "^2.3.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^7.3.0",
    "eslint-plugin-standard": "^3.0.1",
    "prettier": "^1.7.0"
  }
}

Here is my .eslintrc.json

{
  "extends": [
    "standard",
    "plugin:flowtype/recommended",
    "plugin:react/recommended",
    "prettier",
    "prettier/flowtype",
    "prettier/react",
    "prettier/standard"
  ],
  "plugins": [
    "flowtype",
    "react",
    "prettier",
    "standard"
  ],
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "node": true
  },
  "rules": {
    "prettier/prettier": "error"
  }
}
user_11000770

I got the same error ("cannot find module eslint-config-prettier/react") while following the steps from the Frontend Masters course you mention and was able to resolve it by installing eslint-config-prettier, as shown below, before running the lint script:

npm install --save-dev eslint-config-prettier

or, if using yarn:

yarn add --dev eslint-config-prettier

Note that eslint-config-prettier "turns off all rules that are unnecessary or might conflict with prettier".

user_33688180

For me it happened after I (intentionally) uninstalled "eslint-plugin-prettier", and forgot to remove "prettier" from the "plugins" array in my eslint config, like so:

package.json:

{
  // ...
  "eslintConfig": {
    // ...
    "plugins": [
      // ...
      // This needed to be removed
      "prettier"
    ]
  }
}
user_28842910

Add the dependency to .pre-commit-config.yaml file as additional dependency

user_51373080
Related