VSCode代码检查器ES6 ES7 Babel检查器

Question

如何使用Visual Studio Code根据babel/ES7 stage-0规则对JavaScript文件进行lint？

我只需要对代码进行lint，我已经有webpack将Js文件转码。

- Damien Leroux

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"，选择 "install extensions"，再输入 "eslint" 并验证。你需要重新启动 VSC。
• 在 VSC 代码中，打开用户参数（settings.json），并写入：

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

现在，你的ES7代码应该可以按照所需进行linting。如果VSC无法读取eslint配置文件，则可以在VSC控制台中查看问题（Ctrls ShiftU）。

因此，ES7代码（例如对象中的扩展运算符）将得到很好的linting:

附注：可能我的.eslintrc对于ES7 linting使用了一些无用的额外数据，因此可以自由删除它 :)

- Damien Leroux

---

在您的项目根目录中，即使用“openFolder”时在VSCode中选择的那个目录。 - Damien Leroux

我按照所有步骤进行了操作，但最后VSCode报告说找不到eslint-plugin-react。它要求全局安装，所以我最好选择通过npm install --save-dev eslint来安装eslint。谢谢！ - LaloLoop

谢谢。jshint插件呢？你只有用于ES7验证的eslint吗？ - Serge Nikitin

@Philipp Kyeck 我不确定是否理解。您成功全局安装了它，但未在项目中本地安装？ - Damien Leroux

安装在两种情况下都可以正常工作，但只有在全局安装时，VSCode才能“找到”它。 - Philipp Kyeck

Answer 2

由于ESLint扩展可以使用babel-eslint，因此请在用户/工作区设置中安装它并关闭vscode内置的代码检查。

以下是使用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

对于那些刚开始接触React或babel的人，除非你真的在使用Create React App，否则你需要更多的babel配置。请将上述内容仅用作补充信息，并在需要帮助时进行评论。

- Matt Black