詳解VS Code使用之Vue工程配置format代碼格式化
編輯器另外一個(gè)很重要的功能就是代碼格式化了，VS Code默認(rèn)提供常見文件的格式化，如.js,.html等。
添加對.vue文件的格式化支持
這里我們添加對 .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。 這樣對于.vue文件中的 html 和 javascript 代碼都有格式化支持了。
使用符合 ESLint 規(guī)范的格式化
1、使用 prettier 格式化 .js 文件
可以設(shè)置 prettier 在格式化的時(shí)候，讀取項(xiàng)目的 .eslintrc的配置，對 js代碼進(jìn)行格式化。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 首先為 VS Code 安裝 prettier 插件
- 在 VS Code 的設(shè)置中添加如下配置
- json
- "prettier.eslintIntegration": true
2、對.vue文件的格式化
prettier插件對 .vue 文件格式化時(shí)，暫不能支持將 eslint規(guī)范應(yīng)用到 js代碼中。
但是我們可以先將其格式化，然后利用 ESLint 保存文件時(shí)自動(dòng)修復(fù)錯(cuò)誤的特性，修復(fù)一些諸如 分號，空格，縮進(jìn) 等錯(cuò)誤。
參考資料：
- Vetur
本文首發(fā)于我的github
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue 簡單配置公用接口地址方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
組件是Vue核心功能之一,合理的組件化,可以減少我們代碼的冗余,提高項(xiàng)目的可維護(hù)性,下面這篇文章主要給大家介紹了關(guān)于Vue中父子組件通信與事件觸發(fā)的相關(guān)資料,需要的朋友可以參考下2022-03-03
Vue3?setup的注意點(diǎn)及watch監(jiān)視屬性的六種情況分析
這篇文章主要介紹了Vue3?setup的注意點(diǎn)及watch監(jiān)視屬性的六種情況,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
element的dialog彈框在項(xiàng)目中挺常用的。拖拽形式的彈框會提高用戶體驗(yàn)，本文實(shí)現(xiàn)了vue可拖拽的dialog彈框，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要為大家介紹了Vue編程三部曲之模型樹優(yōu)化示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue父子組件的數(shù)據(jù)傳遞示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
vue中eslint導(dǎo)致的報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vue中eslint導(dǎo)致的報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
關(guān)于vue的語法規(guī)則檢測報(bào)錯(cuò)問題的解決
在配置路有的時(shí)候，陸續(xù)出現(xiàn)了各種報(bào)錯(cuò)其中最多的是一些寫法，例如空格，縮進(jìn)，各種括號，這篇文章主要介紹了關(guān)于vue的語法規(guī)則檢測報(bào)錯(cuò)問題的解決，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-05-05
使用vuex存儲用戶信息到localStorage的實(shí)例
今天小編就為大家分享一篇使用vuex存儲用戶信息到localStorage的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
深入理解vue.js中$watch的oldvalue與newValue
這篇文章主要給大家介紹了關(guān)于vue.js中$watch的oldvalue與newValue的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，并且介紹了關(guān)于watch的其他測試，對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起看看吧。2017-08-08