eslint-plugin-vue-oboi

    0.0.7 • Public • Published

    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).

    Keywords

    none

    Install

    npm i eslint-plugin-vue-oboi

    DownloadsWeekly Downloads

    8

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    24 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar