Vue-cli Eslint在vscode里代碼自動(dòng)格式化的方法
編輯器另外一個(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 代碼自動(dòng)格式化
- vue-cli 代碼風(fēng)格為JavaScript Standard Style 代碼檢查規(guī)范嚴(yán)格，一不小心就無法運(yùn)行，使用eslint的autoFixOnSave可以在保存代碼的時(shí)候自動(dòng)格式化代碼
- VSCode拓展插件推薦（HTML、Node、Vue、React開發(fā)均適用）
建議閱讀：
正文 eslint 自動(dòng)格式化
配置環(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)文章
vue3封裝數(shù)字滾動(dòng)組件的實(shí)現(xiàn)示例
本文主要介紹了vue3封裝數(shù)字滾動(dòng)組件的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-08-08
這篇文章主要介紹了uni-app 的模板語法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
vue組件 $children,$refs，$parent的使用詳解
本篇文章主要介紹了vue組件 $children,$refs，$parent的使用詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
vue的列表交錯(cuò)過渡實(shí)現(xiàn)代碼示例
這篇文章主要介紹了vue的列表交錯(cuò)過渡實(shí)現(xiàn)代碼示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了element-ui 文件上傳修改文件名的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue3實(shí)現(xiàn)v-model原理詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue實(shí)現(xiàn)路由嵌套的方法實(shí)例
嵌套路由顧名思義就是路由的多層嵌套,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)路由嵌套的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11
vue 列表頁跳轉(zhuǎn)詳情頁獲取id以及詳情頁通過id獲取數(shù)據(jù)
這篇文章主要介紹了vue 列表頁跳轉(zhuǎn)詳情頁獲取id以及詳情頁通過id獲取數(shù)據(jù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue使用wangEditor實(shí)現(xiàn)自定義粘貼功能
這篇文章主要為大家詳細(xì)介紹了Vue如何使用wangEditor實(shí)現(xiàn)自定義粘貼功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
最近寫vue的一個(gè)練手項(xiàng)目需要在里面實(shí)現(xiàn)一個(gè)輪播圖,想到去用第三方插件,百度了一輪,發(fā)現(xiàn)大部分都是swiper這個(gè)插件,這篇文章主要給大家介紹了關(guān)于vue2使用swiper4踩坑的相關(guān)資料,需要的朋友可以參考下2022-01-01