Create-react-app: visual studio code eslint support

[tzapu]

Description

The docs here https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md mention that vs code should support the eslint config without doing anything extra

VS Code ESLint plugin automatically detects Create React App's configuration file. So you do not need to create eslintrc.json at the root directory, except when you want to add your own rules. In that case, you should include CRA's config by adding this line:

in practice, with latest versions of everything, i still had to add .eslintrc containing { "extends": "react-app" } in order for the editor to load a config

Expected behavior

VS Code ESLint plugin automatically detects Create React App's configuration file

Actual behavior

VS Code ESLint plugin needs and .eslintrc file to detect any config

Environment

Run these commands in the project folder and fill in their results:

npm ls react-scripts
└── [email protected]
node -v
v7.8.0
npm -v
4.2.0

1. Operating system:
   macOS

I am not sure if this is a bug or a lack in documentation or I m just doing something wrong.
If it's the docs i can make a pull request I guess
Cheers

[Timer]

Can we trace this down to any specific VSCode version when this stopped working (I haven't tested this myself)? It may be a regression on their end.

Otherwise, we may need to update the documentation to reflect this change.

[anilreddykatta]

@tzapu vscode doesn't seem to detect eslint configuration for apps created using create-react-app.

I have observed similar behavior in vscode-1.11.2

[tzapu]

@Timer @anilreddykatta i noticed this on Version 1.11.1 (1.11.1)

so so far, 1.11.1 & 1.11.2 seem not to be working

cheers

[Angarsk8]

Not working here neither, I'm on version 1.11.2.

[dbaeumer]

Hi, I maintain the ESLint extension for VS Code and got here due to https://github.com/Microsoft/vscode-eslint/issues/230.

I created a react app using create-react-app my-app and the generated package.json file doesn't contain an eslintConfig property. After adding

  "eslintConfig": {
    "extends": "react-app"
  }

things started to work for me. Is there something I am missing ?

[tzapu]

i think the confusing bit is that the docs are saying that it just works, you don't need to add anything, as the eslint extension in vscode auto detects create react app's eslint rules

hope this helps
cheers

[dbaeumer]

To make setup for users easier could the create-react-app generate a corresponding .eslintrc. From all feedback I got it is easier for users to deal with an .eslintrc file than a property in the package.json file.

[gaearon]

I don’t think we’ll be creating .eslintrc in the project folder, no. A property in package.json is a supported way to configure ESLint, so we would like to keep using that.

[luftywiranda13]

@gaearon
just for a clear clarification
eslintConfig in package.json is just a way to customize eslint in code editor but has nothing to do with eslint warning/error in browser/cli, right?

[gaearon]

Yes. In the browser/cli, we hardcode ESLint to use the react-app configuration. However IDEs can’t know about this.

I think it’s fine if we encourage people to create .eslintrc in their project folder if that solves the problem for VSCode. I’m just saying we won’t be generating it by default.

[gaearon]

Does this solve the issue?
Can somebody review this PR please?

https://github.com/facebookincubator/create-react-app/pull/2054

[tzapu]

this seems like satisfactory solution, it's clear enough, it works, all is good in the world again.

thank you very much

[gaearon]

Sounds great. Sorry for the trouble. 😛

[vladbilyk]

I've tried both things (.eslintrc in the root and eslintConfig in packages.config) but with the same result: "Cannot find module 'eslint-config-react-app' Referenced from:". New react app, VSC 1.14.1...

[allstone]

adding eslintConfig to package.json works for me