VSCode Linter ES6 ES7 Babel linter
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
.eslintrcfile 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 (CtrlsShiftU).
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 :)
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 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-chainingFor 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.