VSCode Linter ES6 ES7 Babel linter

Question

How to use Visual Studio code to lint JavaScript file based on babel/ES7 stage-0 rules?

I only need to lint code. I already have webpack transpiling Js file.

Solution 1

How I proceed:

• install globally eslint : npm install -g eslint
• install babel-eslint : npm install --save-dev babel-eslint
• install eslint-plugin-react : npm install --save-dev eslint-plugin-react
• create .eslintrc file in you root directory. here is my config:

{
"env": {
        "browser": true,
        "node": true,
        "es6": true,
        "jest": true,
        "jquery": true
    },
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "arrowFunctions": true,
            "binaryLiterals": true,
            "blockBindings": true,
            "classes": true,
            "defaultParams": true,
            "destructuring": true,
            "forOf": true,
            "generators": true,
            "modules": true,
            "objectLiteralComputedProperties": true,
            "objectLiteralDuplicateProperties": true,
            "objectLiteralShorthandMethods": true,
            "objectLiteralShorthandProperties": true,
            "octalLiterals": true,
            "regexUFlag": true,
            "regexYFlag": true,
            "spread": true,
            "superInFunctions": true,
            "templateStrings": true,
            "unicodeCodePointEscapes": true,
            "globalReturn": true,
            "jsx": true,
            "experimentalObjectRestSpread": true
        }
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "strict": 0
    }
}

• In VSC, push F1, then write "extension", select "install extensions" and then, write "eslint" and validate. you will have to relaunch VSC
• In VSC code, open the user parameters (settings.json) and write:

{
    //disable default javascript validator replaced by eslint
    "javascript.validate.enable" : false 
} 

Now, it should lint as wanted your ES7 code. If there is any issue with VSC reading eslint config, you can see it in the VSC console (Ctrls ShiftU).

As a result, ES7 code (spread operator in objects for example) is well linted:

PS: may be my .eslintrc uses some useless extra data for ES7 linting so feel free to remove it :)

Solution 2

Since the ESLint extension can use babel-eslint, install it and turn off vscode's built-in linting in user/workspace settings.

Here's an example setup using Create React App's eslint config + optional chaining:

.vscode/settings.json:

{
  "javascript.validate.enable": false,
  "eslint.enable": true
}

.eslintrc:

{
  "extends": "react-app"
  "parser": "babel-eslint",
}

.babelrc:

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

Here's all the npm packages to install for this setup:

npm install --save-dev eslint-config-react-app [email protected] @typescript-eslint/eslint-plugin @typescript-eslint/parser [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] @babel/core @babel/plugin-proposal-optional-chaining

For those new to React or babel, unless you actually are using Create React App, you'll need a lot more babel config. Please only use the above as supplementary info and comment if you need help.

Comments

[Martin Mlostek]

where should i put the .eslintrc file? in my home directory? or the "root" directory

[Damien Leroux]

In the root directory of your project, the one you select with VSCode when using 'openFolder'.

[Christian Davis]

Thank you. Is this still the best way to go about it? VSCode threads on github hadn't been closed

[Damien Leroux]

Yes it is. I didn't find a better solution for now. VSCode team let me know that ES7 features was not in the pipe yet.

[LaloLoop]

I followed all the steps, but at the end VSCode reported that eslint-plugin-react could not be found. It asked to install it globally so I better opted to install eslint as npm install --save-dev eslint. Thanks!

[Serge Nikitin]

Thank you. What about jshint plugin? Do you have only eslint for ES7 validation?

[Damien Leroux]

@SergeNikitin I never used jsHint. I use ESLint for JS validation & ReactJS validation.

[Philipp Kyeck]

npm install --save-dev babel-eslint isn't working for me - get an error message sayinv 'babel-eslint not found'. installing it globally as well worked though :(

[Damien Leroux]

@Philipp Kyeck i'm not sure to understand. You succeed to install it globally but not locally to your project?

[Philipp Kyeck]

installation works in both cases but VSCode only "finds" it when I install it globally.

[Dareon]

what about formatter for the optional chaining? The standard one creates empty space between object and ? mark.

[MyUserInStackOverflow]

The built-n tslint from the JS language support built-in extension confused me. Had to turn it off, as the parsing and linting could be replaced by ESLint.