VSCode Linter ES6 ES7 Babel linter

Question

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

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

Answer 1

我如何进行：

全局安装eslint：npm install -g eslint
安装 babel-eslint : npm install --save-dev babel-eslint
安装 eslint-plugin-react : npm install --save-dev eslint-plugin-react
在您的根目录中创建 .eslintrc 文件。这是我的配置：

{
"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，然后写入"extension"、select "install extensions"，然后写入"eslint"并验证.您将不得不重新启动 VSC
在VSC代码中，打开用户参数（settings.json）并写入：

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

现在，它应该会根据需要检查您的 ES7 代码。如果 VSC 读取 eslint 配置有任何问题，您可以在 VSC 控制台中看到它（Ctrls ShiftU).

因此，ES7 代码（例如对象中的展开运算符）被很好地检查了：

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

Answer 2

由于 ESLint 扩展可以使用 babel-eslint，安装它并在 user/workspace 设置中关闭 vscode 的 built-in linting。

这是一个使用 Create React App 的 eslint 配置 + 可选链接的示例设置：

.vscode/settings.json:

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

.eslintrc:

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

.babelrc:

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

以下是为此设置安装的所有 npm 包：

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

VSCode Linter ES6 ES7 Babel linter

VSCode Linter ES6 ES7 Babel linter

javascript

eslint

babeljs

visual-studio-code

ecmascript-2016