ESLint with Prettier issues on Yarn global install

Question

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:

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

Answer 1

I just ran into the same issue myself. It appears to be an issue with the newest version of eslint, mine was 4.2.0. To fix this I:

    run: Yarn remove eslint
or
    run: npm uninstall eslint

this will remove it locally, then

    run: yarn add [email protected] 
or  run: npm install [email protected]

    run: eslint **/*.{js,jsx} --quiet

my paths may be set up different so do this in conjunction with "Daydream Nation" answer you should get it working. I'm not sure what version os eslint Brian is using and I'm sure if you pull down one of his most recent repo's it will tell you but hopefully this will guide you in the right direction.