VSCode Linter ES6 ES7 Babel linter

Question

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

I only need the lint code. I already have a webpack broadcasting a Js file.

Answer 1

As I continue:

• 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 the .eslintrc file in the .eslintrc 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, press F1 , then write “extension”, select “install extensions” and then type “eslint” and confirm. you will have to restart VSC
• In the VSC code, open the user parameters ( settings.json ) and write:

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

Now it should align as your ES7 code wanted. If there is any problem reading the eslint VSC configuration, you can see this in the VSC console ( Ctrl s Shift U ).

As a result, the ES7 code (for example, the distribution operator in objects) is well marked:

PS: maybe my .eslintrc uses some .eslintrc extra data for ES7 linting, so feel free to delete it :)

Answer 2

Since the ESLint extension can use babel-eslint, install it and disable the built-in vscode binding in the user / workspace settings.

Here is an example setup using Create React App eslint config + optional chain:

.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 are all the npm packages to install:

 npm install --save-dev eslint-config-react-app babel-eslint@10.x @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint@5.x eslint-plugin-flowtype@2.x eslint-plugin-import@2.x eslint-plugin-jsx-a11y@6.x eslint-plugin-react@7.x eslint-plugin-react-hooks@1.5.0 @babel/core @babel/plugin-proposal-optional-chaining 

For those new to React or babel, if you are not actually using the Create React application, you will need a lot more settings for babel. Please use the above as additional information and comment if you need help.