Create-react-app: Error when installing eslint globally

[kasperpeulen]

I got the following error when trying to install eslint globally (as suggested in the user guide):

Kasper@Kaspers-MacBook-Pro:~/Code/playground/firebase-react|
⇒  npm install -g eslint-config-react-app eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype
npm WARN deprecated [email protected]: This package is deprecated. Use Object.assign.
/Users/Kasper/.nvm/versions/node/v6.6.0/bin/eslint -> /Users/Kasper/.nvm/versions/node/v6.6.0/lib/node_modules/eslint/bin/eslint.js
/Users/Kasper/.nvm/versions/node/v6.6.0/lib
├── [email protected] 
├─┬ UNMET PEER DEPENDENCY [email protected]
│ └─┬ [email protected]
│   ├── [email protected] 
│   └── [email protected] 
├── [email protected] 
├── UNMET PEER DEPENDENCY [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected] 
└── [email protected] 

npm WARN [email protected] requires a peer of [email protected] but none was installed.
npm WARN [email protected] requires a peer of [email protected] but none was installed.
npm WARN [email protected] requires a peer of [email protected] but none was installed.

[amilajack]

Those are not errors. Those are just warnings. The warnings are saying that you need to install eslint-config-config-react-app's peerDependencies (eslint, eslint-plugin-flowtype, eslint-plugin-import) as global dependencies as well.

I should note that installing npm dependencies as global dependencies is generally a bad idea.

Try doing this instead. Add the following code to your package.json:

# Assuming that you are inside of a project that has a package.json

  "scripts": {
     "lint": "eslint some_project_folder *.js"
   }

When you install eslint, or any other package that can be installed as a cli package, it can also be run through npm 'scripts'. This is considered to be preferred over global dependencies. There are a number of issues with global deps.

[gaearon]

@amilajack

There is no need to install ESLint locally, CRA already has it as a dependency.
What @kasperpeulen is trying to do is to follow our guide here.

Unfortunately at the moment the only way to display lint output in the editor is by installing these plugins globally. This is an ESLint issue, and you can put 👍 in https://github.com/eslint/eslint/issues/3458 to express your desire to see it fixed.

As for the author’s question, please run npm install -g [email protected] and it should be fine.

We should amend the guide to ask people to install specifically these versions of the plugins, then there won’t be any warnings.

I know it’s frustrating but there’s nothing we can do on our side to make it easier.

[gaearon]

Fixed in the documentation by 2b7a4f147dd4e4e411ac9d98405cff3495429ff3.
The new command is:

npm install -g [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

[cloud-github]

npm info "eslint-config-airbnb-base@latest" peerDependencies
npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb-base

Add "extends": "airbnb-base" to .eslintrc file.
Finally, SUCCESS eslint-config-airbnb-base and its peerDeps were installed successfully.