詳解VS Code使用之Vue工程配置format代碼格式化
編輯器另外一個(gè)很重要的功能就是代碼格式化了,VS Code默認(rèn)提供常見文件的格式化,如.js,.html等。
添加對(duì).vue文件的格式化支持
這里我們添加對(duì) .vue 文件的格式化支持。
1. 安裝 Vetur 插件
2. 在 VS Code 的設(shè)置中添加如下規(guī)則:
{ "vetur.format.defaultFormatter": { "html": "prettier", "css": "prettier", "postcss": "prettier", "scss": "prettier", "less": "prettier", "js": "prettier", "ts": "prettier", "stylus": "stylus-supremacy" } }
這里是設(shè)置 Vetur 默認(rèn)使用的格式化插件 prettier。 這樣對(duì)于.vue文件中的 html 和 javascript 代碼都有格式化支持了。
使用符合 ESLint 規(guī)范的格式化
1、使用 prettier 格式化 .js 文件
可以設(shè)置 prettier 在格式化的時(shí)候,讀取項(xiàng)目的 .eslintrc的配置,對(duì) js代碼進(jìn)行格式化。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 首先為 VS Code 安裝 prettier 插件
- 在 VS Code 的設(shè)置中添加如下配置
- json
- "prettier.eslintIntegration": true
2、對(duì).vue文件的格式化
prettier插件對(duì) .vue 文件格式化時(shí),暫不能支持將 eslint規(guī)范應(yīng)用到 js代碼中。
但是我們可以先將其格式化,然后利用 ESLint 保存文件時(shí)自動(dòng)修復(fù)錯(cuò)誤的特性,修復(fù)一些諸如 分號(hào),空格,縮進(jìn) 等錯(cuò)誤。
參考資料:
- Vetur
本文首發(fā)于我的github
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
VUE+jszip如何實(shí)現(xiàn)下載多個(gè)文件導(dǎo)出為一個(gè)zip格式
這篇文章主要介紹了VUE+jszip如何實(shí)現(xiàn)下載多個(gè)文件導(dǎo)出為一個(gè)zip格式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue3配置Element及element-plus/lib/theme-chalk/index.css報(bào)錯(cuò)的解決
這篇文章主要介紹了vue3配置Element及element-plus/lib/theme-chalk/index.css報(bào)錯(cuò)的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03ElementUI中的el-dropdown傳入多參數(shù)的實(shí)現(xiàn)方法
本文主要介紹了ElementUI中的el-dropdown傳入多參數(shù)的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-12-12vue2移動(dòng)端+swiper實(shí)現(xiàn)異形的slide方式
這篇文章主要介紹了vue2移動(dòng)端+swiper實(shí)現(xiàn)異形的slide方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue項(xiàng)目實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03vue.js集成echarts時(shí)遇到的一些問(wèn)題總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue.js集成echarts遇到的一些問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04vue.js利用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
本篇文章主要介紹了用Node.js當(dāng)作后臺(tái)、jQuery寫前臺(tái)AJAX代碼實(shí)現(xiàn)用戶登錄和注冊(cè)的功能的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04