準(zhǔn)備
在vscode中寫vue頁面是一件很快樂的事情。
在使用vue-cli創(chuàng)建一個vue項(xiàng)目的時候我們多會選擇一個eslint來對我們的代碼風(fēng)格和樣式做一個監(jiān)控的樣子。
可是無盡的報錯讓人腦殼疼,所以用插件來搞定這些問題。方法可能會用到以下插件:
eslint
這個插件主要是可以在寫的時候就提醒,代碼中所存在的不符合要求的地方。vetur
寫vue必備的神器道具。后面用來這是相關(guān)的格式工具prettier - code formatter
用來格式化的格式化工具針對vue需要配置一下。
讓vue代碼完美符合vue-cli的eslint要求有2種方法:
- 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,我還有其他的東西要格式化,那么看下一種:
- 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。