ESlint：是用來(lái)統(tǒng)一JavaScript代碼風(fēng)格的工具，不包含css危尿、html等呐萌。
背景：
近來(lái)研究前端，然后一直在百度上找VScode格式化（ESlint）的插件谊娇，結(jié)果找了半天都不靠譜肺孤。目前沒(méi)有一個(gè)可以格式化html、css济欢、符合ESlint的js赠堵、vue的插件，所以自己東拼西湊加實(shí)踐找到解決方法法褥。
解決方案：
1茫叭、安裝插件
1）ESlint：javascript代碼檢測(cè)工具，可以配置每次保存時(shí)格式化js半等，但每次保存只格式化一點(diǎn)點(diǎn)揍愁，你得連續(xù)按住Ctrl+S好幾次,才格式化好，自行體會(huì)~~
2）vetur：可以格式化html杀饵、標(biāo)準(zhǔn)css（有分號(hào) 莽囤、大括號(hào)的那種）、標(biāo)準(zhǔn)js（有分號(hào) 凹髓、雙引號(hào)的那種）烁登、vue文件，
但是蔚舀！格式化的標(biāo)準(zhǔn)js文件不符合ESlint規(guī)范饵沧，會(huì)給你加上雙引號(hào)、分號(hào)等赌躺，像這樣
不好.png
能把html格式化分行顯示
好.png
3）Prettier - Code formatter：只關(guān)注格式化狼牺，并不具有eslint檢查語(yǔ)法等能力，只關(guān)心格式化文件(最大長(zhǎng)度礼患、混合標(biāo)簽和空格是钥、引用樣式等)掠归，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown
4）Manta's Stylus Supremacy： 格式化stylus的插件（不用就不裝），因?yàn)関etur會(huì)把css格式化有分號(hào) 悄泥、大括號(hào)的那種虏冻，此插件會(huì)把css格式化成stylus風(fēng)格，像這樣
圖片.png
2弹囚、在vscode的文件-首選項(xiàng)-設(shè)置里厨相，右側(cè)配置里添加如下代碼即可（代碼有注釋?zhuān)。┡葛模瑥拇酥苯?Ctrl+S 就能一鍵格式化了
圖片.png
圖片.png
代碼如下：
{
// vscode默認(rèn)啟用了根據(jù)文件類(lèi)型自動(dòng)設(shè)置tabsize的選項(xiàng)
"editor.detectIndentation": false,
// 重新設(shè)定tabsize
"editor.tabSize": 2,
// #每次保存的時(shí)候自動(dòng)格式化
"editor.formatOnSave": true,
// #每次保存的時(shí)候?qū)⒋a按eslint格式進(jìn)行修復(fù)
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #讓prettier使用eslint的代碼格式進(jìn)行校驗(yàn)
"prettier.eslintIntegration": true,
// #去掉代碼結(jié)尾的分號(hào)
"prettier.semi": false,
// #使用帶引號(hào)替代雙引號(hào)
"prettier.singleQuote": true,
// #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #這個(gè)按用戶(hù)自身習(xí)慣選擇
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #讓vue中的js按編輯器自帶的ts格式進(jìn)行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue組件中html代碼格式化樣式
}
},
// 格式化stylus, 需安裝Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒號(hào)
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行
"stylusSupremacy.insertNewLineAroundBlocks": false // 兩個(gè)選擇器中是否換行
}
