Vue-cli Eslint在vscode里代碼自動格式化的方法
編輯器另外一個(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 代碼都有格式化支持了。
vue eslint 代碼自動格式化
- vue-cli 代碼風(fēng)格為JavaScript Standard Style 代碼檢查規(guī)范嚴(yán)格，一不小心就無法運(yùn)行，使用eslint的autoFixOnSave可以在保存代碼的時(shí)候自動格式化代碼
- VSCode拓展插件推薦（HTML、Node、Vue、React開發(fā)均適用）
建議閱讀：
正文 eslint 自動格式化
配置環(huán)境:
npm i -g eslint-plugin-vue #or npm i -S eslint-plugin-vue
創(chuàng)建項(xiàng)目跟路徑下的文件：.eslintrc | .eslint.js
// 添加插件 "plugins": [ "vue" ]
在你的vscode設(shè)置文件里添加：
1、在vscode添加 eslint 插件
2、在vscode添加 vetur 插件
3、修改你的setting.json
// 添加進(jìn)你的vscode的 setting.json
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",{
"language": "vue",
"autoFix": true
},"html",
"vue"
],
參考文集：
https://stackoverflow.com/questions/45852531/eslint-code-format-in-vue
https://github.com/varHarrie/Dawn-Blossoms/issues/10
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章介紹了Vue中的計(jì)算屬性與監(jiān)聽屬性，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
Vue El-descriptions 描述列表功能實(shí)現(xiàn)
這篇文章主要介紹了Vue El-descriptions 描述列表功能實(shí)現(xiàn),Descriptions 描述列表,列表形式展示多個(gè)字段,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要介紹了從0搭建vue3組件庫Input組件,每個(gè)功能的實(shí)現(xiàn)代碼都做了精簡,方便大家快速定位到核心邏輯,接下來就開始對這些功能進(jìn)行實(shí)例代碼講解，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue仿網(wǎng)易云音樂的單頁面應(yīng)用實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
el-table?樹形數(shù)據(jù)?tree-props?多層級使用避坑
本文主要介紹了el-table?樹形數(shù)據(jù)?tree-props?多層級使用避坑,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
這篇文章主要介紹了關(guān)于vue中輸入框的使用場景總結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue ECharts設(shè)置主題實(shí)現(xiàn)方法介紹
這篇文章主要介紹了Vue ECharts設(shè)置主題，本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
Vue解析帶html標(biāo)簽的字符串為dom的實(shí)例
今天小編就為大家分享一篇Vue解析帶html標(biāo)簽的字符串為dom的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
使用Vue和Firebase實(shí)現(xiàn)后臺數(shù)據(jù)存儲的示例代碼
在現(xiàn)代 web 應(yīng)用開發(fā)中,前端和后端的無縫協(xié)作至關(guān)重要,借助 Firebase 等云計(jì)算解決方案,前端開發(fā)者可以輕松實(shí)現(xiàn)數(shù)據(jù)存儲與實(shí)時(shí)更新,本文將為大家詳細(xì)介紹如何利用 Vue 3 的 Composition API 和 Firebase 實(shí)現(xiàn)后臺數(shù)據(jù)存儲,需要的朋友可以參考下2024-10-10
前端Vue全屏screenfull通用解決方案及原理詳細(xì)分析
這篇文章主要給大家介紹了關(guān)于前端Vue全屏screenfull通用解決方案及原理的相關(guān)資料,使用screenfull這一第三方庫可以實(shí)現(xiàn)更穩(wěn)定的全屏功能,需要的朋友可以參考下2024-10-10