eslint-plugin-vue-oboi

Supplement to eslint-plugin-vue, added several custom rules

Premise

Because this plugin and vue/max-attributes-per-line rules are conflicting drops

So you must ensure turn off the vue/max-attributes-per-line rule

// .eslintrc.js
{
  'vue/max-attributes-per-line': 'off',
}

Since all properties are the same, it may cause the screen width to be exceeded

Thus triggering rules max-len and vue/max-len

If this happens, please turn off these two rules

// .eslintrc.js
{
  'max-len': 'off',
  'vue/max-len': 'off',
}

Usage

Because the rules of this plugin may conflict with many different rules

So it is recommended to reasonably disable other rules

// .eslintrc.js
module.exports = {
  extends: [
    'plugin:vue-oboi/recommended',
  ],
  rules: {
    // Must to disable this rules
    'vue/max-attributes-per-line': 'off',
    'vue/attribute-hyphenation': 'off',
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multiline-html-element-content-newline': 'off',

    // May need to disable these rules
    'max-len': 'off',
    'vue/max-len': 'off',

    // Rules for this plugin
    'vue-oboi/attributes-single-line': ['error'],
    'vue-oboi/tag-delimiter-no-spaces': ['error', 'all'],
    'vue-oboi/attribute-hyphenation-with-tag': [ 'warn' ],
    'vue-oboi/singleline-html-element-content-inline': [ 'warn' ],
  },
}

Rules

vue-oboi/attributes-single-line

enforce all attributes to be on the same line.

<template>
  <!-- ✔ GOOD -->
  <div v-if="foo" class="bar"></div>

  <!-- ✘ BAD -->
  <div
  v-if="foo"
  class="bar"
  ></div>
</template>

vue-oboi/tag-delimiter-no-spaces

enforce tag right delimiter no spaces.

<template>
  <!-- ✔ GOOD -->
  <div v-if="foo" class="bar"></div>

  <!-- ✘ BAD -->
  <div v-if="foo" class="bar"    ></div>
  <div v-if="foo" class="bar"
  ></div>
</template>

This rule is the same as the vue/html-closing-bracket-newline rule

// .eslintrc.js
{
  'vue/html-closing-bracket-newline': ['error', {
    'singleline': 'never',
    'multiline': 'never'
  }],
}

Option

all: all space and line break, corresponding regular expression /\s+/

enter: all line break, corresponding regular expression /[\f|\t|\v|\r|\n]+/

space: all space, corresponding regular expression /[ ]+/

Example:

// .eslintrc.js
{
  'vue-oboi/tag-delimiter-no-spaces': ['error', 'all'],
}

vue-oboi/attribute-hyphenation-with-tag

This is just an extension for the vue/attribute-hyphenation rule, the option is extended by a ignoreTag, which is used to indicate that the rule is not run on the specified tag.

When using this configuration:

"always", { "ignoreTag": [ "customTag" ] }

<template>
  <!-- ✓ GOOD -->
  <custom-tag myProp="prop" :secondProp="prop2">Do not judge this tag</custom-tag>

  <!-- ✗ BAD -->
</template>

Option

Only the usage of the ignoreTag option is explained here, other usages are the same as vue/attribute-hyphenation

Example:

// .eslintrc.js
{
  'vue-oboi/tag-delimiter-no-spaces': ['error', 'always', {
    ignoreTag: [ 'customTag', 'user-face', 'img', 'a', 'DIV'],
  }],
}

vue-oboi/singleline-html-element-content-inline

This rule is the inverse of the vue/singleline-html-element-content-newline rule

This rule does not allow single-line components to use line break mode

Such as uni-app application, line break and non-line break, the compilation results are different

If you use the vue/singleline-html-element-content-newline rule and the variables in the template are null or undefined, then the compiled template display the null or undefined string

<template>
  <!-- ✔ GOOD -->
  <div v-if="foo" class="bar">{{foo.bar}}</div>
  <div v-if="foo" class="bar">xxx{{foo.bar}}</div>
  <div v-if="foo" class="bar">xxx    {{foo.bar}}</div>
  <div v-if="foo" class="bar">
    xxx
    {{foo.bar}}
  </div>

  <!-- ✘ BAD -->
  <div v-if="foo" class="bar">
    xxx
  </div>
  <div v-if="foo" class="bar">
    {{foo.bar}}
  </div>
  <div v-if="foo" class="bar">
    xxx    {{foo.bar}}
  </div>
</template>

License

See the LICENSE file for license rights and limitations (MIT).