不管是多人合作還是個(gè)人項(xiàng)目，代碼規(guī)范是很重要的。這樣做不僅可以很大程度地避免基本語(yǔ)法錯(cuò)誤，ESLint 是一個(gè)語(yǔ)法規(guī)則和代碼風(fēng)格的檢查工具，可以用來(lái)保證寫出語(yǔ)法正確、風(fēng)格統(tǒng)一的代碼。

HBuilderX中ESLint插件安裝

HBuilderX 包含4款語(yǔ)法校驗(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)入詳情頁(yè)，點(diǎn)擊安裝插件。注hbulider版本必須是2.6.8以上

在這里插入圖片描述

安裝eslint-vue和eslint-js后。點(diǎn)擊菜單設(shè)置，勾選保存自動(dòng)修復(fù)

在這里插入圖片描述

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

點(diǎn)擊上圖“打開(kāi)文件.eslintrc.js進(jìn)行配置”，打開(kāi)文件代碼如下：

  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ǔ)法校驗(yàn)、eslint實(shí)時(shí)校驗(yàn)自動(dòng)修復(fù)功能說(shuō)明

以上就是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)文章！

您可能感興趣的文章: