現(xiàn)在很多程序員寫代碼的時(shí)候都喜歡開著eslint進(jìn)行代碼格式校驗(yàn)况木，寫習(xí)慣了還好垒拢，但是一般剛開始熟悉eslint的同學(xué)估計(jì)會被eslint的代碼格式檢查給逼瘋的，哈哈哈火惊。求类。。
今天就講講如何在vscode中配置eslint代碼格式化
這里的前提是vscode中需要安裝eslint和prettier兩個(gè)工具
打開vscode后點(diǎn)擊右上角文件->首選項(xiàng)->設(shè)置進(jìn)入用戶配置面板
image.png
然后我們開始做些用戶配置屹耐，具體配置如下
{
"editor.tabSize":2, #代碼縮進(jìn)修改成2個(gè)空格
"editor.formatOnSave": true, #每次保存的時(shí)候自動格式化
"eslint.autoFixOnSave": false, #每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù)
"prettier.eslintIntegration": true, #讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
"prettier.semi": false, #去掉代碼結(jié)尾的分號
"prettier.singleQuote": true, #使用帶引號替代雙引號
"javascript.format.insertSpaceBeforeFunctionParenthesis": true #讓函數(shù)(名)和后面的括號之間加個(gè)空格
}
是的尸疆，就是這么的簡單。這樣每次寫完代碼進(jìn)行格式化 或者保存的時(shí)候會將代碼自動轉(zhuǎn)成符合eslint風(fēng)格的代碼了张症。
附：在vue中使用eslint插件
除了以上配置以外，在vue中要做幾點(diǎn)額外配置鸵贬，具體如下
{
"vetur.format.defaultFormatter.html": "js-beautify-html", #這個(gè)按用戶自身習(xí)慣選擇
"vetur.format.defaultFormatter.js": "vscode-typescript", #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" #vue組件中html代碼格式化樣式
}
}
}
點(diǎn)此可查看具體的js-beautify-html配置
如果你使用的css預(yù)處理器是stylus(因?yàn)槲易约菏怯眠@個(gè)俗他，所以沒說其他的，哈哈哈)阔逼，那么還需要加入以下配置
{
"stylusSupremacy.insertSemicolons": false, #去掉分號
"stylusSupremacy.insertBraces": false, #去掉大括號
"stylusSupremacy.insertColons": false #去掉冒號
}
OK 就是這樣的 這樣寫vue的話 就非常方便了~
