[转]Visual Studio Code 格式化ESlint 的方法

转自:https://www.cnblogs.com/belongs-to-qinghua/p/10931043.html

既然要格式化ESlint,就不得不先介绍一下什么是ESlint。后面再介绍格式化的方法

1.ESlint

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。在许多方面,它和 JSLint、JSHint 相似,除了少数的例外:

  • ESLint 使用 Espree 解析 JavaScript。
  • ESLint 使用 AST 去分析代码中的模式
  • ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

总的来说,ESlint就是用来检测代码风格、规范代码格式的工具。

2.格式化方法

2.1 安装对应插件

插件对应功能就不逐一介绍了,直接用吧~~~

1.ESlint

image

2.vetur

image

3.Prettier - Code formatter

image

4.Manta's Stylus Supremacy

image

2.1 添加相应配置

打开VSCode编辑器,点击 “文件>>首选项>>设置”,显示如下区域。并点击 “在setting.json中编辑”,添加对应代码即可在下次编写代码时通过 “Ctrl+S” 进行格式化了。

image

对应代码如下:

{
    "editor.detectIndentation": false,
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "prettier.eslintIntegration": true,
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        }
    },
    "stylusSupremacy.insertColons": false,
    "stylusSupremacy.insertSemicolons": false,
    "stylusSupremacy.insertBraces": false,
    "stylusSupremacy.insertNewLineAroundImports": false,
    "stylusSupremacy.insertNewLineAroundBlocks": false
}

我不习惯保存的时候自动格式化,所以以下两行我设置为false

    "editor.formatOnSave": false,
    "eslint.autoFixOnSave": false,

到这里就大功告成了,快去试试吧。

你可能感兴趣的:([转]Visual Studio Code 格式化ESlint 的方法)