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）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)等，像這樣

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)格，像這樣

二、配置settings.json信息

File->Preference->Settings【也可以快捷鍵 ctr + ,（window系統(tǒng)） 直接打開(kāi)】

現(xiàn)在看到的是界面配置模式，點(diǎn)擊右上角的大括號(hào)（如下圖），可以打開(kāi) settings.json 文件。

粘貼以下代碼，保存即可

?

把代碼貢獻(xiàn)一下：

{// vscode默認(rèn)啟用了根據(jù)文件類(lèi)型自動(dòng)設(shè)置tabsize的選項(xiàng)"editor.detectIndentation": false,// 重新設(shè)定tabsize"editor.tabSize": 4,// #值設(shè)置為true時(shí)，每次保存的時(shí)候自動(dòng)格式化；值設(shè)置為false時(shí)，代碼格式化請(qǐng)按shift+alt+F"editor.formatOnSave": false,// #每次保存的時(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,"prettier.tabWidth": 4,// #讓函數(shù)(名)和后面的括號(hào)之間加個(gè)空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #這個(gè)按用戶自身習(xí)慣選擇"vetur.format.defaultFormatter.html": "js-beautify-html",// #讓vue中的js按"prettier"格式進(jìn)行格式化"vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatterOptions": {"js-beautify-html": {// #vue組件中html代碼格式化樣式"wrap_attributes": "force-aligned", //也可以設(shè)置為“auto”，效果會(huì)不一樣"wrap_line_length": 200,"end_with_newline": false,"semi": false,"singleQuote": true},"prettier": {"semi": false,"singleQuote": true}},"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// 格式化stylus, 需安裝Manta's Stylus Supremacy插件"stylusSupremacy.insertColons": false, // 是否插入冒號(hào)"stylusSupremacy.insertSemicolons": false, // 是否插入分號(hào)"stylusSupremacy.insertBraces": false, // 是否插入大括號(hào)"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否換行"stylusSupremacy.insertNewLineAroundBlocks": false,"prettier.useTabs": true,"files.autoSave": "off","explorer.confirmDelete": false,"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"diffEditor.ignoreTrimWhitespace": false // 兩個(gè)選擇器中是否換行 }

從此直接 Ctrl+S 就能一鍵格式化了。

轉(zhuǎn)載于:https://www.cnblogs.com/zhoudawei/p/11198781.html

總結(jié)

以上是生活随笔為你收集整理的vsCode格式化插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。