如何在vscode中用standard style 風(fēng)格去驗(yàn)證 vue文件

gnehc 發(fā)布于2019-08-01 18:14 / 3348人閱讀

摘要：史上最便捷的統(tǒng)一代碼風(fēng)格的方式，輕松擁有。自動(dòng)代碼格式化。提前發(fā)現(xiàn)風(fēng)格及程序問題。減少代碼審查過程中反反復(fù)復(fù)的修改過程，節(jié)約時(shí)間。如何在中用風(fēng)格去驗(yàn)證文件實(shí)際上有一個(gè)說明了如何使用。

1 JavaScript Standard Style簡介

本工具通過以下三種方式為你（及你的團(tuán)隊(duì)）節(jié)省大量時(shí)間：

無須配置。史上最便捷的統(tǒng)一代碼風(fēng)格的方式，輕松擁有。

自動(dòng)代碼格式化。只需運(yùn)行 standard --fix 從此和臟亂差的代碼說再見。

提前發(fā)現(xiàn)風(fēng)格及程序問題。減少代碼審查過程中反反復(fù)復(fù)的修改過程，節(jié)約時(shí)間。

無須猶豫。再也不用維護(hù) .eslintrc, .jshintrc, or .jscsrc 。開箱即用。

安裝：

npm i standard -g

關(guān)于JavaScript 代碼規(guī)范, 你可以點(diǎn)擊鏈接看一下。

2 如何在vscode中用JavaScript Standard Style風(fēng)格去驗(yàn)證 vue文件

實(shí)際上JavaScript Standard Style有一個(gè)FAQ, 說明了如何使用。

但是有一點(diǎn)非常重要的作者沒有提到，就是eslint-plugin-html這個(gè)插件必須要安裝3.x.x版本的, 現(xiàn)在eslint-plugin-html, 已經(jīng)升級(jí)到4.x版本，默認(rèn)不寫版本號(hào)安裝的就是4.x版本的，所以會(huì)出現(xiàn)問題。參考

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

以上三個(gè)包都是全局安裝的，如果你想看看全局安裝了哪些包可以用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 如何在保存文件時(shí)，自動(dòng)使用standard格式化vue文件