eslint-vue简介@about

此插件用于vue语法校验。eslint-vue插件安装地址

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

错误提示

如下图所示，编写完代码，保存文件，当检查到错误时，会出现红色波浪线

eslint-vue简介@about - 图1

插件配置

点击菜单【工具】【插件配置】【eslint-vue】，即可看到eslint-vue相关配置。

eslint-vue简介@about - 图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简介@about - 图3

示例：cli项目

vue-cli项目，如果使用项目下的配置规则，需要安装eslint相关库、并在项目根目录创建.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简介@about - 图4