vue前端HbuliderEslint實時校驗自動修復設(shè)置

更新時間：2021年10月12日 15:48:22 作者：guoyp2126

這篇文章主要為大家介紹了vue前端中Hbulider中Eslint實時校驗自動修復設(shè)置操作過程，有需要的朋友可以借鑒參考下希望能夠有所幫助

HBuilderX中ESLint插件安裝

HBuilderX 包含4款語法校驗插件，htmlhint, stylelint, eslint-plugin-vue, eslint-js。點擊工具—>插件安裝，界面如下：

在這里插入圖片描述

點擊插件市場，進入插件市場，輸入eslint搜索。

在這里插入圖片描述

點擊eslint，進入詳情頁，點擊安裝插件。注hbulider版本必須是2.6.8以上

在這里插入圖片描述

安裝eslint-vue和eslint-js后。點擊菜單設(shè)置，勾選保存自動修復

在這里插入圖片描述

自定義eslint-js規(guī)則

點擊上圖“打開文件.eslintrc.js進行配置”，打開文件代碼如下：

  module.exports = {  
      "plugins": [  
          "html"  
      ],  
      "parser": "esprima",  
      "parserOptions": {  
          "ecmaVersion": 2018,  
          "sourceType": "module",  
          "ecmaFeatures": {  
              "jsx": true  
          },  
          "allowImportExportEverywhere": false  
      },  
      "rules": {                                  
          "camelcase": 2,           //強制駝峰法命名,  
          "indent": [2, 4],         //縮進風格  
          "id-match": 0,            //命名檢測  
          "init-declarations": 1,   //聲明時必須賦初值  
          "no-undef": 1,            //不能有未定義的變量 
          "no-multi-spaces": "error", // 禁止多個空格   
          "semi": [2, "always"] ,// 自動補充分號  
          "quotes": ["error", "single"] // 使用單引號
      }  
  };

詳細規(guī)則參考：eslint 常用配置
重新啟動Hbulider，當每次保存時自動JS代碼中修復代碼不一致的地方。

注意事項

以上使用Hbulider代碼自動修復功能設(shè)置僅適用于Hbulider2.6.8以上版本。
參考文獻：HBuilderX語法校驗、eslint實時校驗自動修復功能說明

以上就是vue前端HbuliderEslint實時校驗自動修復設(shè)置的詳細內(nèi)容，更多關(guān)于HbuliderEslint實時校驗自動修復的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)
這篇文章主要介紹了vue中全局路由守衛(wèi)中替代this操作(this.$store/this.$vux)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
Vue如何指定不編譯的文件夾和favicon.ico
這篇文章主要介紹了Vue如何指定不編譯的文件夾和favicon.ico，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue devserver及其配置方法
這篇文章主要介紹了vue devserver及其配置方法,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
vue中的inject用法及說明
這篇文章主要介紹了vue中的inject用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue實現(xiàn)面包屑導航的正確方式
面包屑導航(BreadcrumbNavigation)這個概念來自童話故事“漢賽爾和格萊特”，它的作用是告訴訪問者他們在網(wǎng)站中的位置以及如何返回，本文為大家介紹了實現(xiàn)面包屑導航的正確方式，需要的可以參考一下
2023-06-06
vue可滑動的tab組件使用詳解
這篇文章主要為大家詳細介紹了vue可滑動的tab組件使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
vue DatePicker日期選擇器時差8小時問題
這篇文章主要介紹了vue DatePicker日期選擇器時差8小時問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue.js 3.x 中的響應式數(shù)據(jù)ref 與 reactive詳解
ref 和 reactive 是 Vue.js 3 中用于創(chuàng)建響應式數(shù)據(jù)的兩個關(guān)鍵函數(shù),它們分別適用于不同類型的數(shù)據(jù),幫助我們更好地組織和管理組件的狀態(tài),這篇文章主要介紹了Vue.js 3.x 中的響應式數(shù)據(jù)：ref 與 reactive,需要的朋友可以參考下
2024-01-01
解決Vue不能檢測數(shù)組或?qū)ο笞儎拥膯栴}
下面小編就為大家分享一篇解決Vue不能檢測數(shù)組或?qū)ο笞儎拥膯栴}，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
ant-design-vue中的table自定義格式渲染解析
這篇文章主要介紹了ant-design-vue中的table自定義格式渲染，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10