eslint-vue簡介

此插件用於vue語法校驗。eslint-vue插件安裝地址

和eslint-js搭配使用，eslint-js插件安裝地址

錯誤提示

如下圖所示，編寫完代碼，保存文件，當檢查到錯誤時，會出現紅色波浪線

eslint-vue簡介 - 图1

插件配置

點擊菜單【工具】【插件配置】【eslint-vue】，即可看到eslint-vue相關配置。

eslint-vue簡介 - 图2

實時校驗、自動修復

HBuilderX 2.6.8+版本起，新增eslint 實時校驗、自動修復錯誤的功能。注意：此功能不適用於2.6.8之前的版本

  1. 使用此功能，必須安裝eslint-js和eslint-vue插件
  2. vue-cli項目，需要安裝eslint庫，並配置eslint規則.
  3. 若滿足上述條件，當編寫完代碼，保存時，若代碼中存在錯誤，自動修復;
  4. 實時校驗功能，默認未開啓，需要手動開啓此功能

配置文件

eslint-vue的配置文件爲.eslintrc.js。

點擊菜單工具 -> 設置 -> 插件配置 -> eslint-vue -> .eslintrc.js，即可打開.eslintrc.js文件。

選項對應說明如下：

  1.   module.exports = {
  2.       "extends": "plugin:vue/essential",
  3.       "parserOptions": {},    
  4.       "rules": {}             //規則
  5.   };

更多配置說明可以參考options

如何增加規則？

官方規則列表

規則設置：

  • “off” 或 0 - 關閉規則
  • “warn” 或 1 - 開啓規則，使用警告級別的錯誤：warn (不會導致程序退出)
  • “error” 或 2 - 開啓規則，使用錯誤級別的錯誤：error (當被觸發的時候，程序會退出)

修改.eslintrc.js文件，添加規則，比如: 

  1. {
  2.   //在computed properties中禁用異步actions
  3.   'vue/no-async-in-computed-properties': 'error',
  4.   //不允許重複的keys
  5.   'vue/no-dupe-keys': 'error',
  6.   //不允許重複的attributes
  7.   'vue/no-duplicate-attributes': 'error',
  8.   //在 <template> 標籤下不允許解析錯誤
  9.   'vue/no-parsing-error': ['error',{
  10.       'x-invalid-end-tag': false,
  11.   }],
  12.   //不允許覆蓋保留關鍵字
  13.   'vue/no-reserved-keys': 'error',
  14.   //強制data必須是一個帶返回值的函數
  15.   // 'vue/no-shared-component-data': 'error',
  16.   //不允許在computed properties中出現副作用。
  17.   'vue/no-side-effects-in-computed-properties': 'error',
  18.   //<template>不允許key屬性
  19.   'vue/no-template-key': 'error',
  20.   //在 <textarea> 中不允許mustaches
  21.   'vue/no-textarea-mustache': 'error',
  22.   //不允許在v-for或者範圍內的屬性出現未使用的變量定義
  23.   'vue/no-unused-vars': 'error',
  24.   //<component>標籤需要v-bind:is屬性
  25.   'vue/require-component-is': 'error',
  26.   // render 函數必須有一個返回值
  27.   'vue/require-render-return': 'error',
  28.   //保證 v-bind:key 和 v-for 指令成對出現
  29.   'vue/require-v-for-key': 'error',
  30.   // 檢查默認的prop值是否有效
  31.   'vue/require-valid-default-prop': 'error',
  32.   // 保證computed屬性中有return語句 
  33.   'vue/return-in-computed-property': 'error',
  34.   // 強制校驗 template 根節點
  35.   'vue/valid-template-root': 'error',
  36.   // 強制校驗 v-bind 指令
  37.   'vue/valid-v-bind': 'error',
  38.   // 強制校驗 v-cloak 指令
  39.   'vue/valid-v-cloak': 'error',
  40.   // 強制校驗 v-else-if 指令
  41.   'vue/valid-v-else-if': 'error',
  42.   // 強制校驗 v-else 指令 
  43.   'vue/valid-v-else': 'error',
  44.   // 強制校驗 v-for 指令
  45.   'vue/valid-v-for': 'error',
  46.   // 強制校驗 v-html 指令
  47.   'vue/valid-v-html': 'error',
  48.   // 強制校驗 v-if 指令
  49.   'vue/valid-v-if': 'error',
  50.   // 強制校驗 v-model 指令
  51.   'vue/valid-v-model': 'error',
  52.   // 強制校驗 v-on 指令
  53.   'vue/valid-v-on': 'error',
  54.   // 強制校驗 v-once 指令
  55.   'vue/valid-v-once': 'error',
  56.   // 強制校驗 v-pre 指令
  57.   'vue/valid-v-pre': 'error',
  58.   // 強制校驗 v-show 指令
  59.   'vue/valid-v-show': 'error',
  60.   // 強制校驗 v-text 指令
  61.   'vue/valid-v-text': 'error'
  62. }

示例：uni-app項目

特別說明：

  • vue文件，校驗vue語法，需要安裝eslint-vue插件，插件地址
  • vue文件, 校驗規則，需要從eslint-vue插件中配置。
  • 菜單【工具】【設置】【插件配置】【eslint-vue】【.eslintrc.js】,編輯.eslintrc.js文件

【示例】eslint自動修復雙引號爲單引號，如下：

eslint-vue簡介 - 图3

示例：cli項目

vue-cli項目，如果使用項目下的配置規則，需要安裝相關庫、並在項目根目錄創建.eslintrc.js文件

備註：

  1. 注意：項目下eslint規則會覆蓋HBuilderX編輯器eslint插件中的規則
  2. 校驗vue語法，需要安裝eslint-vue插件，插件地址
  1. npm install --save eslint eslint-plugin-vue eslint-plugin-html eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard babel-eslint

.eslintrc.js配置文件示例

  1. module.exports = {
  2.     extends: [
  3.         'plugin:vue/recommended'
  4.     ],
  5.     parserOptions: {
  6.         'ecmaVersion': 2018,
  7.         'sourceType': 'module',
  8.         'ecmaFeatures': {
  9.             'jsx': true
  10.         },
  11.         'allowImportExportEverywhere': false
  12.     },
  13.     rules: {
  14.         "no-alert": 0,
  15.         "no-multi-spaces": "error", // 禁止多個空格 
  16.         "semi": [2, "always"] ,// 自動補充分號
  17.        "quotes": ["error", "single"] // 使用單引號
  18.     }
  19. }

示例：使用eslint, 自動補充分號

eslint-vue簡介 - 图4