目錄

• HBuilderX中ESLint外掛安裝
• 自定義eslint-規則
• 注意事項

不qvBNXGBP管是多人合作還是個人專案，程式碼規範是很重要的。這樣做不僅可以很大程度地避免基本語法錯誤，ESLint 是一個語法規則和程式碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的程式碼。

HBuilderX中ESLint外掛安裝

HBuilderX 包含4款語法校驗外掛，htmlhint,stylelint,eslint-plugin-,eslint-js。點選工具—>外掛安裝，介面如下：

點選外掛市場，進入外掛市場，輸入eslint搜尋。

點選eslint，進入詳情頁，點選安裝外掛。注hbulider版本必須是2.6.8以上

安裝eslint-vue和eslint-js後。點選選單設定，勾選儲存自動修復

自定義eslint-js規則

點選上圖“開啟檔案.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",www.cppcns.com
 
"single"] // 使用單引號
      www.cppcns.com}  
  };  

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

注意事項

以上使用Hbulider程式碼自動修復功能設定僅適用於Hbulider2.6.8以上版本。
參考文獻：HBuilderX語法校驗、eslint實時校驗自動修復功能說明

以上就是vue前端HbuliderEslint實時校驗自動修復設定的詳細內容，更多關於HbuliderEslint實時校驗自動修復的資料請關注我們其它相關文章！