"Displaying Lint Output in the Editor" instructions not working in VS Code

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 eslint@3.5.0) as local dev dependencies to my project.

[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"
   };
   

4. 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"
}