[Yesterday, I wrote about how I’ve tentatively switched over from Sublime Text editor to VS Code for my projects][1]. Later, I started working on a JavaScript file, and realized that I was missing Sublime’s [linter][2]. So I turned on linting in VS Code by following the [instructions in the VS Code marketplace for Dirk Bauemer’s ESLint][3].

Immediately, I got a complaint when I viewed a React file with an import statement at the top, like this:

import React from "react";
...

The word import had a squiggly red line under it. When I hovered over that, I saw the error message “Parsing error: The keyword ‘import’ is reserved eslint”. Like this:

Parsing error: the keyword 'import' is reserved

I found a [git issue comment][4] which explained how to fix it (for me! YMMV). Here’s how I did it.

First, I had to install <a href="https://github.com/yannickcr/eslint-plugin-react">ESLint-plugin-React</a>: npm install -g eslint-plugin-react --save-dev

Then, I had to edit my VS Code json.settings. Here’s how: From the top menu, click File > Preferences > Settings. Your User and Workspace Settings area opens up, and there’s a handy search box at the top. Type in eslint and you’ll see a bunch of search results, including some links to “Edit in settings.json“. Click that link, and your settings.json file opens up. This is just a text file! For me, it is located under my home directory, in .config/Code/User/settings.json (I’m using Ubuntu 16.04). I got confused when I noticed that there was a settings.json file under the node_modules directory for my React project, as well (./node_modules/detect-port-alt/.vscode/settings.json). Don’t get distracted by additional files with that name. Just use the file which is shown by VS Code using the above procedure.

My json.settings originally looked like this:

    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.insertSpaces": false,
    "editor.detectIndentation": false,
    "editor.wordWrap": "on",
    "eslint.trace.server": "messages",
    "eslint.options" : {
        "useEslintrc": false
    }
}```

All I had to do was add a new sub-option under `eslint.options`, as described in the git comment, like this:

```{
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.insertSpaces": false,
    "editor.detectIndentation": false,
    "editor.wordWrap": "on",
    "eslint.trace.server": "messages",
    "eslint.options" : {
        "useEslintrc": false,
        "parserOptions": {
            "ecmaVersion": 7,
            "sourceType": "module",
            "ecmaFeatures": {
                "jsx": true,
            }
        }
    }
}```

Voilà! The linting error went away immediately; I didn&#8217;t have to reload the project or restart VS Code.

 [1]: http://www.fullstackoasis.com/articles/2019/06/03/sublime-compared-with-vs-code/
 [2]: https://eslint.org/
 [3]: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
 [4]: https://github.com/yannickcr/eslint-plugin-react/issues/447#issuecomment-208625730