All Projects → mysticatea → Eslint Plugin Vue Trial

mysticatea / Eslint Plugin Vue Trial

Licence: mit
Experimental ESLint plugin for Vue.js.

Programming Languages

javascript
184084 projects - #8 most used programming language

@mysticatea/eslint-plugin-vue

npm version Downloads/month Build Status Coverage Status Dependency Status

❗️ This plugin has been merged to the official eslint-plugin-vue as 3.0.0. Please use that. ❗️

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

💎 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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].