Eslint plugin vue oboi

[![NPM version](https://img.shields.io/npm/v/eslint-plugin-vue-oboi.svg?style=flat)](https://npmjs.org/package/eslint-plugin-vue-oboi) [![NPM downloads](https://img.shields.io/npm/dm/eslint-plugin-vue-oboi.svg?style=flat)](https://npmjs.org/package/eslint

Version: 0.0.7 Updated: 07/01/2020

By: maxming2333 License: MIT

Downloads Last 30 Days: 18

eslint-plugin-vue-oboi

NPM version NPM downloads License

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

oboi

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',

    // 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' ],
  },
}

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'],
  }],
}

License

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

Categories: Vue js
Tags: