VUE代碼格式化配置vetur、eslint、prettier的故事

準(zhǔn)備

在vscode中寫vue頁面是一件很快樂的事情。
在使用vue-cli創(chuàng)建一個vue項(xiàng)目的時候我們多會選擇一個eslint來對我們的代碼風(fēng)格和樣式做一個監(jiān)控的樣子。
可是無盡的報錯讓人腦殼疼,所以用插件來搞定這些問題。方法可能會用到以下插件:

  1. eslint
    這個插件主要是可以在寫的時候就提醒,代碼中所存在的不符合要求的地方。

  2. vetur
    寫vue必備的神器道具。后面用來這是相關(guān)的格式工具

  3. prettier - code formatter
    用來格式化的格式化工具針對vue需要配置一下。


讓vue代碼完美符合vue-cli的eslint要求有2種方法:

  1. vuter + eslint
    調(diào)用vuter默認(rèn)的prettier格式化代碼的時候,沒有設(shè)置的情況下會有單引號和尾部跟;符號的問題。
    如果按照網(wǎng)上的一些方法將vuter的js格式器改為vscode-typescript就可以解決。
"vetur.format.defaultFormatter.js": "vscode-typescript"

這樣就解決了VUE中的格式化問題,但是它不會更正你已經(jīng)存在的字符串的雙引號問題。例如:

export default{
  name: "test"
}

eslint的autofix其實(shí)很強(qiáng),可以自行解決雙引號,尾部;的問題。按照eslint的規(guī)則去自動修復(fù)一些問題。

"eslint.validate": ["javascript", "javascriptreact", {"language":"vue","autoFix": true}],
"eslint.autoFixOnSave": true,

這樣配置好,就可以快樂的使用了。


那有小伙伴覺得我不能放棄prettier,我還有其他的東西要格式化,那么看下一種:

  1. vuter + eslint + prettier

在vscode中setting.json做一些設(shè)置:使用下面的配置就可以直接格式化vue文件。

eslint設(shè)置 {"language":"vue","autoFix": true} 第一可以檢測到vue,第二用eslint解決space-before-function-parent。

"eslint.validate": ["javascript", "javascriptreact", {"language":"vue","autoFix": true}],
"eslint.autoFixOnSave": true,

vuter需要的設(shè)置

"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.js": "prettier",

vuter引用格式化工具的時候的配置,例如prettier是要在這里配置,而直接在setting.json中對prettier的設(shè)置是無效的。 這里的配置讓prettier直接就格式化完了基本所有的東西,包括雙引號,尾部;的問題,eslint的autofix只是解決了function參數(shù)前要插入一個空格的問題。

"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "singleQuote": true,
    "semi": false,
  }
},

配置好就可以快樂使用格式化了。
其實(shí)仔細(xì)看會注意到了這個選項(xiàng):

"vetur.format.defaultFormatter.js": "prettier-eslint"

但是使用因?yàn)閜rettier-eslint無法格式化vue中的script,可能后期作者會改進(jìn)。我們目前只有使用eslint來解決這個問題,如果后期能夠支持的話,如下面的設(shè)置一樣,prettier就可以像在外部設(shè)置直接按照eslint規(guī)則來格式化vue中的scirpt內(nèi)容。

"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "singleQuote": true,
    "semi": false,
    "eslintIntegration": true
  }
},

最后,祝愿小伙伴們千行無BUG。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容