@mysticatea/eslint-plugin-vue

Experimental ESLint plugin for Vue.js.

💿 Installation

Use npm.

> npm install --save-dev eslint @mysticatea/eslint-plugin-vue

• Requires Node.js ^4.0.0 || >=6.0.0
• Requires ESLint >=3.18.0

📖 Usage

Write .eslintrc.* file to configure rules. See also: http://eslint.org/docs/user-guide/configuring

.eslintrc.json (An example)

{
    "plugins": ["@mysticatea/vue"],
    "extends": ["eslint:recommended", "plugin:@mysticatea/vue/recommended"],
    "rules": {
        "@mysticatea/vue/html-quotes": ["error", "double"],
        "@mysticatea/vue/v-bind-style": ["error", "shorthand"],
        "@mysticatea/vue/v-on-style": ["error", "shorthand"]
    }
}

💡 Rules

• ⭐️ the mark of a recommended rule.
• ✒️ the mark of a fixable rule.

Possible Errors

| | Rule ID | Description | |:---|:--------|:------------| | ⭐️ | no-invalid-template-root | disallow invalid template root. | | ⭐️ | no-invalid-v-bind | disallow invalid v-bind directives. | | ⭐️ | no-invalid-v-cloak | disallow invalid v-cloak directives. | | ⭐️ | no-invalid-v-else-if | disallow invalid v-else-if directives. | | ⭐️ | no-invalid-v-else | disallow invalid v-else directives. | | ⭐️ | no-invalid-v-for | disallow invalid v-for directives. | | ⭐️ | no-invalid-v-html | disallow invalid v-html directives. | | ⭐️ | no-invalid-v-if | disallow invalid v-if directives. | | ⭐️ | no-invalid-v-model | disallow invalid v-model directives. | | ⭐️ | no-invalid-v-on | disallow invalid v-on directives. | | ⭐️ | no-invalid-v-once | disallow invalid v-once directives. | | ⭐️ | no-invalid-v-pre | disallow invalid v-pre directives. | | ⭐️ | no-invalid-v-show | disallow invalid v-show directives. | | ⭐️ | no-invalid-v-text | disallow invalid v-text directives. | | ⭐️ | no-parsing-error | disallow parsing errors in <template>. |

Best Practices

| | Rule ID | Description | |:---|:--------|:------------| | ⭐️✒️ | html-end-tags | enforce end tag style. | | ⭐️✒️ | html-no-self-closing | disallow self-closing elements. | | ⭐️ | no-confusing-v-for-v-if | disallow confusing v-for and v-if on the same element. | | ⭐️ | no-duplicate-attributes | disallow duplicate arguments. | | ⭐️ | no-textarea-mustache | disallow mustaches in <textarea>. | | ⭐️ | require-component-is | require v-bind:is of <component> elements. | | ⭐️ | require-v-for-key | require v-bind:key with v-for directives. |

Stylistic Issues

| | Rule ID | Description | |:---|:--------|:------------| | | html-quotes | enforce quotes style of HTML attributes. | | ✒️ | v-bind-style | enforce v-bind directive style. | | ✒️ | v-on-style | enforce v-on directive style. |

⚙ Configs

This plugin provides plugin:@mysticatea/vue/recommended preset config. This preset config:

• adds parser: "vue-eslint-parser"
• enables rules which are given ⭐️ in the above table.

⚓️ Semantic Versioning Policy

@mysticatea/eslint-plugin-vue follows semantic versioning and ESLint's Semantic Versioning Policy.

• Patch release (intended to not break your lint build)
  • A bug fix in a rule that results in it reporting fewer errors.
  • Improvements to documentation.
  • Non-user-facing changes such as refactoring code, adding, deleting, or modifying tests, and increasing test coverage.
  • Re-releasing after a failed release (i.e., publishing a release that doesn't work for anyone).
• Minor release (might break your lint build)
  • A bug fix in a rule that results in it reporting more errors.
  • A new rule is created.
  • A new option to an existing rule is created.
  • An existing rule is deprecated.
• Major release (likely to break your lint build)
  • A support for old Node version is dropped.
  • A support for old ESLint version is dropped.
  • An existing rule is changed in it reporting more errors.
  • An existing rule is removed.
  • An existing option of a rule is removed.
  • An existing config is updated.

📰 Changelog

• GitHub Releases

💎 Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

Development Tools

• npm test runs tests and measures coverage.
• npm run coverage shows the coverage result of npm test command.
• npm run clean removes the coverage result of npm test command.