Category Archives: Uncategorized

editing React files in VS Code results in a Parsing error

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

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 which explained how to fix it (for me! YMMV). Here’s how I did it.

First, I had to install ESLint-plugin-React: 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’t have to reload the project or restart VS Code.

If you found this interesting, click the subscribe button below! I write a new post about once a week.