Create-react-app: "Displaying Lint Output in the Editor" instructions not working in VS Code

[martellaj]

Description

The "Displaying Lint Output in the Editor" instructions do not work for VS Code.

Expected behavior

I expect my editor to show linting warnings and errors.

Actual behavior

ESLint is unable to load.

Environment

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

1. npm ls react-scripts (if you haven’t ejected): This is coming back empty...
2. node -v: 6.5.0
3. npm -v: 3.10.3

Then, specify:

1. Operating system: macOS
2. Browser and version: N/A
3. VS Code version: 1.5.3

Reproducible Demo

My working version of @wesbos's React for Beginners project. I did change the value of eslintConfig.extends in package.json like the instructions state. Pull from c55d10ae48718695a0fca61b0981c8a4974ea92f to get a state where ESLint didn't work.

Workaround

I got ESLint to work in VS Code by adding all of the dependencies (including [email protected]) as _local_ dev dependencies to my project.

[gaearon]

I don’t quite understand. In your commit, you changed "extends": "./node_modules/react-scripts/config/eslint.js" to "extends": "react-app".

But you won’t find "extends": "./node_modules/react-scripts/config/eslint.js" in our guide in the first place (that’s from an older version). The guide says to use "extends": "react-app".

Did that not work either for you, or did you not try "extends": "react-app" with global packages?

[gaearon]

PS I know this is frustrating. All of this is needed because of this ESLint issue: https://github.com/eslint/eslint/issues/3458. When ESLint fixes it we won’t need to do extra steps anymore.

[martellaj]

Right, this is a project from a course that I cloned. I noticed that ./node_modules/react-scripts/config/eslint.js wasn't being loaded, so I changed it to react-app like the docs say. Using react-app + the npm install that the guide suggested failed to work. It only worked when I installed those dependencies locally to the project, instead of globally on my system.

EDIT: I understand where I confused you. In the commit I referenced, the value of extends is still the bad path. I was trying react-app locally. Sorry!

[gaearon]

I'll need to check how VSCode ESLint plugin works. Maybe it has a special global mode?

[octref]

Hey @gaearon and @martellaj , to get linting working in VSCode, you need 4 things:

1. Have eslint plugin for VSCode
2. npm i -g eslint
3. A .eslintrc.js like this, in your project root:

module.exports = { "extends": "react-app" };

1. Have npm@3 and run npm i in your project.

4 is needed as create-react-app seems to only install npm@2 style deps, but for VSCode's eslint plugin to work node_modules/eslint-config-react-app needs to be present. Currently it's at node_modules/react-scripts/node_modules/eslint-config-react-app.

I'm wondering if I can let create-react-app use npm@3 style deps (or yarn).

[dinhvle]

EsLint in VS Code is looking for .eslintrc.json, so to remove errors messages just add that to your root:

{
  "extends": "react-app"
}