VSCode Linter ES6 ES7 Babel linter

Posted 2023-02-22

【中文标题】VSCode Linter ES6 ES7 Babel linter

【英文标题】：

【发布时间】：2016-07-19 12:49:57

【问题描述】：

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

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

【参考方案1】：

由于 ESLint 扩展可以使用 babel-eslint，安装它并在用户/工作区设置中关闭 vscode 的内置 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

对于那些刚接触 React 或 babel 的人，除非你真的在使用 Create React App，否则你需要更多的 babel 配置。如果您需要帮助，请仅将以上信息用作补充信息和评论。

【参考方案2】：

我如何进行：

全局安装 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，然后写“扩展”，选择“安装扩展”，然后，写“eslint”并验证。您将不得不重新启动 VSC 在VSC代码中，打开用户参数（settings.json）并写入：

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

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

因此，ES7 代码（例如对象中的扩展运算符）得到了很好的 linted：

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

【讨论】：

我应该把 .eslintrc 文件放在哪里？在我的主目录中？或“根”目录

在你项目的根目录下，使用 'openFolder' 时用 VSCode 选择的那个。

谢谢。这仍然是最好的方法吗？ github上的VSCode线程没有关闭

是的。我暂时没有找到更好的解决方案。 VSCode 团队让我知道 ES7 功能还没有推出。

安装在这两种情况下都有效，但 VSCode 仅在我全局安装时“找到”它。