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.
How I proceed:
npm install -g eslint
npm install --save-dev babel-eslint
npm install --save-dev eslint-plugin-react
.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
}
}
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 :)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With