如何在vscode中用standard style 風格去驗證 vue文件

1 JavaScript Standard Style簡介

本工具經過如下三種方式爲你（及你的團隊）節省大量時間：

• 無須配置。 史上最便捷的統一代碼風格的方式，輕鬆擁有。
• 自動代碼格式化。 只需運行 standard --fix 今後和髒亂差的代碼說再見。
• 提早發現風格及程序問題。 減小代碼審查過程當中反反覆覆的修改過程，節約時間。
• 無須猶豫。不再用維護 .eslintrc, .jshintrc, or .jscsrc 。開箱即用。

安裝：

npm i standard -g

關於JavaScript 代碼規範, 你能夠點擊連接看一下。

2 如何在vscode中用JavaScript Standard Style風格去驗證 vue文件

實際上JavaScript Standard Style有一個FAQ, 說明了如何使用。

可是有一點很是重要的做者沒有提到，就是eslint-plugin-html這個插件必需要安裝3.x.x版本的, 如今eslint-plugin-html, 已經升級到4.x版本，默認不寫版本號安裝的就是4.x版本的，因此會出現問題。參考

ESLint v4 is only supported by eslint-plugin-html v3, so you can't use eslint-plugin-html v1.5.2 with it (I should add a warning about this when trying to use the plugin with an incompatible version on ESLint).

If you do not use ESLint v4, please provide more information (package.json, a gist to reproduce, ...)

// FAQ
How to lint script tag in vue or html files?

You can lint them with eslint-plugin-html, just install it first, then enable linting for those file types in settings.json with:

 "standard.validate": [
     "javascript",
     "javascriptreact",
     "html"
 ],
 "standard.options": {
     "plugins": ["html"]
 },
 "files.associations": {
     "*.vue": "html"
 },
If you want to enable autoFix for the new languages, you should enable it yourself:

 "standard.validate": [
     "javascript",
     "javascriptreact",
     { "language": "html", "autoFix": true }
 ],
 "standard.options": {
     "plugins": ["html"]
 }

3 綜上， 整理一下安裝思路

3.1 須要安裝哪些包？

• npm i -g standard
• npm i -g eslint-plugin-html@3.2.2 必須是3x版本
• npm i -g eslint

以上三個包都是全局安裝的，若是你想看看全局安裝了哪些包能夠用npm list -g --depth=0查看

3.2 vscode config 如何寫？

"standard.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    }
  ],
  "standard.options": {
    "plugin": ["html"]
  },
  "files.associations": {
    "*.vue": "html"
  },

3.3 如何在保存文件時，自動使用standard格式化vue文件

"standard.autoFixOnSave": true

4. 若是還不行怎麼辦？

1. 重啓一下vscode
2. 重啓一下電腦
3. 在此文後追加評論