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

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

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

HBuilderX中ESLint插件安裝

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

在這里插入圖片描述

點(diǎn)擊插件市場，進(jìn)入插件市場，輸入eslint搜索。

在這里插入圖片描述

點(diǎn)擊eslint，進(jìn)入詳情頁，點(diǎn)擊安裝插件。注hbulider版本必須是2.6.8以上

在這里插入圖片描述

安裝eslint-vue和eslint-js后。點(diǎn)擊菜單設(shè)置，勾選保存自動修復(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,            //命名檢測  
          "init-declarations": 1,   //聲明時必須賦初值  
          "no-undef": 1,            //不能有未定義的變量 
          "no-multi-spaces": "error", // 禁止多個空格   
          "semi": [2, "always"] ,// 自動補(bǔ)充分號  
          "quotes": ["error", "single"] // 使用單引號
      }  
  };

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