Skip to content

GitLab

Closed
Created by liuyajun@liuyajunMaintainer

eslint 支持对 vue 的 html 部分，进行规范统一约束

背景

vue 的 html 部分内的代码没有进行规范约束，比如 符号前后空格，导致页面可读性差，和js部分的风格规范不统一

<div
  v-for="(action,index) in actions.filter((itm,idx)=>idx<(actions.length>3 ? 2 :3))"
  :key="index"
  class="btn"
  :class="{'width33':actions.length>=3,'width50':actions.length===2,'width100':actions.length===1}"
  @click="onClickAction(action.id,action.name)">
  <i class="iconfont" :class="iconNameFromActionId(action.id)"></i>
  <span>{{ action.name }}</span>
</div>

目的

通过 eslint-plugin-vue 对上述说明进行风格统一约束

解决方案

eslint-plugin-vue

Vue.js 的官方 ESLint 插件。

这个插件允许我们使用 ESLint检查文件的 <template> 和 <script>，以及文件中的 Vue 代码。

以 space-infix-ops 为例

space-infix-ops 要求操作符周围有空格，如 actions.length>=3 => actions.length >= 3

  • 先在 eslint 内查找需要的配置，如 space-infix-ops，如果存在，在 eslint-plugin-vue 查找，一般会加上前缀 vue/space-infix-ops
  • 也可以在 在线调试工具 中调试

涉及配置

注意

vue/object-curly-spacing 的 objectsInObjects 如果设置为 false，会引发 eslint-plugin-vue 的一个 bug：vue/object-curly-spacing throws an error for certain objectsInObjects values #1514（在 v7.11.1 修复）

    'vue/key-spacing': [2, {
      'beforeColon': false,
      'afterColon': true
    }], // 强制在对象字面量的属性中键和值之间使用一致的间距（对html部分生效）
    // 注意，vue/object-curly-spacing 的 objectsInObjects 如果设置为 false，会引发 eslint-plugin-vue 的一个 bug：https://github.com/vuejs/eslint-plugin-vue/issues/1514（在 v7.11.1 修复）
    'vue/object-curly-spacing': [2, 'always', {
      objectsInObjects: true
    }], // 强制在大括号中使用一致的空格（对html部分生效）
    'vue/space-infix-ops': 2, // 要求操作符周围有空格（对html部分生效）

参考