VSCode Linter ES6 ES7 Babel linter

时间:2016-03-31 07:40:20

标签: javascript babeljs visual-studio-code eslint ecmascript-7

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

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

2 个答案:

答案 0 :(得分:59)

我如何继续:

  • 安装全局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代码。如果VSC读取eslint配置有任何问题,您可以在VSC控制台中看到它( Ctrl s 移 û)。

因此,ES7代码(例如对象中的扩展运算符)很明显: enter image description here

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

答案 1 :(得分:0)

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

以下是使用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配置。如果需要帮助,请仅将以上内容用作补充信息和评论。