码迷,mamicode.com
首页 > 其他好文 > 详细

Visual Studio Code 格式化ESlint 的方法

时间:2020-03-22 13:55:00      阅读:265      评论:0      收藏:0      [点我收藏+]

标签:com   val   代码   rtc   html   文件   风格   nta   技术   

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

1.ESlint

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

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

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

2.格式化方法

2.1 安装对应插件

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

1.ESlint

技术图片

2.vetur

技术图片

 

3.Prettier - Code formatter

技术图片

4.Manta‘s Stylus Supremacy

技术图片

2.1 添加相应配置

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

技术图片

对应代码如下:

{
    "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
}

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

Visual Studio Code 格式化ESlint 的方法

标签:com   val   代码   rtc   html   文件   风格   nta   技术   

原文地址:https://www.cnblogs.com/Ky-Thompson23/p/12545585.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!