vue前端HbuliderEslint實(shí)時(shí)校驗(yàn)自動(dòng)修復(fù)設(shè)置
不管是多人合作還是個(gè)人項(xiàng)目，代碼規(guī)范是很重要的。這樣做不僅可以很大程度地避免基本語法錯(cuò)誤，ESLint 是一個(gè)語法規(guī)則和代碼風(fēng)格的檢查工具，可以用來保證寫出語法正確、風(fēng)格統(tǒng)一的代碼。
HBuilderX中ESLint插件安裝
HBuilderX 包含4款語法校驗(yàn)插件，htmlhint, stylelint, eslint-plugin-vue, eslint-js。點(diǎn)擊工具—>插件安裝，界面如下：
點(diǎn)擊插件市場(chǎng)，進(jìn)入插件市場(chǎng)，輸入eslint搜索。
點(diǎn)擊eslint，進(jìn)入詳情頁，點(diǎn)擊安裝插件。注hbulider版本必須是2.6.8以上
安裝eslint-vue和eslint-js后。點(diǎn)擊菜單設(shè)置，勾選保存自動(dòng)修復(fù)
自定義eslint-js規(guī)則
點(diǎn)擊上圖“打開文件.eslintrc.js進(jìn)行配置”，打開文件代碼如下：
module.exports = {
"plugins": [
"html"
],
"parser": "esprima",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
},
"allowImportExportEverywhere": false
},
"rules": {
"camelcase": 2, //強(qiáng)制駝峰法命名,
"indent": [2, 4], //縮進(jìn)風(fēng)格
"id-match": 0, //命名檢測(cè)
"init-declarations": 1, //聲明時(shí)必須賦初值
"no-undef": 1, //不能有未定義的變量
"no-multi-spaces": "error", // 禁止多個(gè)空格
"semi": [2, "always"] ,// 自動(dòng)補(bǔ)充分號(hào)
"quotes": ["error", "single"] // 使用單引號(hào)
}
};
詳細(xì)規(guī)則參考：eslint 常用配置
重新啟動(dòng)Hbulider，當(dāng)每次保存時(shí)自動(dòng)JS代碼中修復(fù)代碼不一致的地方。
注意事項(xiàng)
以上使用Hbulider代碼自動(dòng)修復(fù)功能設(shè)置僅適用于Hbulider2.6.8以上版本。
參考文獻(xiàn)：HBuilderX語法校驗(yàn)、eslint實(shí)時(shí)校驗(yàn)自動(dòng)修復(fù)功能說明
以上就是vue前端HbuliderEslint實(shí)時(shí)校驗(yàn)自動(dòng)修復(fù)設(shè)置的詳細(xì)內(nèi)容，更多關(guān)于HbuliderEslint實(shí)時(shí)校驗(yàn)自動(dòng)修復(fù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁面的方法
這篇文章主要介紹了vue實(shí)現(xiàn)未登錄跳轉(zhuǎn)到登錄頁面的方法，主要目的是實(shí)現(xiàn)未登錄跳轉(zhuǎn)，需要的朋友參考下吧2018-07-07
這篇文章主要為大家介紹了vue?echarts移動(dòng)端踩坑解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue3封裝自己的分頁組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue axios 跨域請(qǐng)求無法帶上cookie的解決
這篇文章主要介紹了Vue axios 跨域請(qǐng)求無法帶上cookie的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
Vue2.0基于vue-cli+webpack同級(jí)組件之間的通信教程(推薦)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack同級(jí)組件之間的通信教程(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了基于Element的組件改造的樹形選擇器,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
我們知道，Vite?構(gòu)建環(huán)境分為開發(fā)環(huán)境和生產(chǎn)環(huán)境，不同環(huán)境會(huì)有不同的構(gòu)建策略，但不管是哪種環(huán)境，Vite?都會(huì)首先解析用戶配置，那接下來，本文就來與大家分析配置解析過程中?Vite?到底做了什么？即Vite是如何加載配置文件的2023-11-11
最近遇見一個(gè)需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關(guān)于前端大文件上傳與下載(分片上傳)的詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
vue+elementUI(el-upload)圖片壓縮,默認(rèn)同比例壓縮操作
這篇文章主要介紹了vue+elementUI(el-upload)圖片壓縮,默認(rèn)同比例壓縮操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue3封裝類似京東商品詳情頁放大鏡效果組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09