VSCode Linter ES6 ES7 Babel linter [英] VSCode Linter ES6 ES7 Babel linter

问题描述

如何使用Visual Studio代码根据babel / ES7 stage-0规则lint JavaScript文件？

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

我只需要lint代码。我已经有webpack转换Js文件。

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

推荐答案

我如何继续：

• 全局安装eslint： npm install -g eslint


• 安装babel-eslint： npm install --save-dev babel-eslint


• 安装eslint-plugin-react： npm install --save- dev eslint-plugin-react


• 在根目录中创建 .eslintrc 文件。这是我的配置：

• 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
    }
}

• 在VSC中，按 F1 ，然后写扩展，选择安装扩展，然后写eslint并验证。你将不得不重新启动VSC


• 在VSC代码中，打开用户参数（ settings.json ）并写下：


• 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 
} 

现在，它应该像你想要的ES7代码一样。如果VSC读取eslint配置有任何问题，您可以在VSC控制台中看到它（ Ctrl s
Shift U ） 。

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).

结果，ES7代码（例如对象中的扩展运算符）很好地显示：


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

PS：可能是我的 .eslintrc 使用一些无用的额外数据进行ES7 linting，所以随时删除它:)

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

这篇关于VSCode Linter ES6 ES7 Babel linter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！