eslint-plugin-weex

eslint-plugin-weex

Official ESLint plugin for Weex

:grey_exclamation: Requirements

• ESLint >=3.18.0.
  • >=4.7.0 to use eslint --fix.
  • >=4.14.0 to use with babel-eslint.
• Node.js >=4.0.0

:cd: Installation

npm install --save-dev eslint eslint-plugin-weex

:rocket: Usage

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

Example .eslintrc.js:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // 'eslint:recommended',
    'plugin:vue/essential'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'vue/no-unused-vars': 'error'
  }
}

Attention

All component-related rules are being applied to code that passes any of the following checks:

• Vue.component() expression
• Vue.extend() expression
• Vue.mixin() expression
• export default {} in .vue or .jsx file

If you however want to take advantage of our rules in any of your custom objects that are Vue components, you might need to use special comment // @vue/component that marks object in the next line as a Vue component in any file, e.g.:

// @vue/component
const CustomComponent = {
  name: 'custom-component',
  template: '<div></div>'
}

Vue.component('AsyncComponent', (resolve, reject) => {
  setTimeout(() => {
    // @vue/component
    resolve({
      name: 'async-component',
      template: '<div></div>'
    })
  }, 500)
})

eslint-disable functionality in <template>

You can use <!-- eslint-disable -->-like HTML comments in <template> of .vue files. For example:

<template>
  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
  <div a="1" b="2" c="3" d="4">
  </div>
</template>

If you want to disallow eslint-disable functionality, please disable vue/comment-directive rule.

:gear: Configs

This plugin provides two predefined configs:

• plugin:vue/base - Settings and rules to enable correct ESLint parsing
• plugin:vue/essential - Above, plus rules to prevent errors or unintended behavior
• plugin:vue/strongly-recommended - Above, plus rules to considerably improve code readability and/or dev experience
• plugin:vue/recommended - Above, plus rules to enforce subjective community defaults to ensure consistency

:bulb: Rules

Rules are grouped by priority to help you understand their purpose. The --fix option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.

Base Rules (Enabling Correct ESLint Parsing)

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/base"
}

	Rule ID	Description
	weex/vue/comment-directive	support comment-directives in <template>
	weex/vue/jsx-uses-vars	prevent variables used in JSX to be marked as unused

Priority A: Essential (Error Prevention)

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/essential"
}

	Rule ID	Description
	weex/vue/no-async-in-computed-properties	disallow asynchronous actions in computed properties
	weex/vue/no-document	disallow document api is invalid in weex
	weex/vue/no-dupe-keys	disallow duplication of field names
	weex/vue/no-duplicate-attributes	disallow duplication of attributes
	weex/vue/no-global	disallow global api may not exist in weex
	weex/vue/no-parsing-error	disallow parsing errors in <template>
	weex/vue/no-reserved-keys	disallow overwriting reserved keys
:wrench:	weex/vue/no-shared-component-data	enforce component's data property to be a function
	weex/vue/no-side-effects-in-computed-properties	disallow side effects in computed properties
	weex/vue/no-style-display	weex not support to use display in style
	weex/vue/no-style-float	weex not support to use float in style
	weex/vue/no-style-z-index	disallow use z-index in style
	weex/vue/no-template-key	disallow key attribute on <template>
	weex/vue/no-textarea-mustache	disallow mustaches in <textarea>
	weex/vue/no-unused-vars	disallow unused variable definitions of v-for directives or scope attributes
	weex/vue/no-v-cloak	disallow use v-cloak directives
	weex/vue/no-v-html	disallow use v-html directives
	weex/vue/no-v-show	disallow use no-v-show directive
	weex/vue/no-window	disallow window api is invalid in weex
	weex/vue/require-component-is	require v-bind:is of <component> elements
	weex/vue/require-render-return	enforce render function to always return value
	weex/vue/require-v-for-key	require v-bind:key with v-for directives
	weex/vue/require-valid-default-prop	enforce props default values to be valid
	weex/vue/return-in-computed-property	enforce that a return statement is present in computed property
	weex/vue/valid-animation-module	enforce valid module animation in weex
	weex/vue/valid-cell-component	enforce valid <cell> component
	weex/vue/valid-image-component	enforce valid <image> component
	weex/vue/valid-indicator-component	enforce valid <indicator> component
	weex/vue/valid-input-component	enforce valid <input> component
	weex/vue/valid-list-component	enforce valid <list> component
	weex/vue/valid-picker-module	enforce valid module picker in weex
	weex/vue/valid-scroller-component	enforce valid <scroller> component
	weex/vue/valid-style-flex	disallow use all properties with flex layout
	weex/vue/valid-style-font-family	disallow use multiple fonts in font-family
	weex/vue/valid-style-root	enforce valid style root
	weex/vue/valid-style-selector	enforce valid css seletor used on the weex
	weex/vue/valid-switch-component	enforce valid <switch> component
	weex/vue/valid-template-root	enforce valid template root
	weex/vue/valid-text-component	enforce valid <text> component
	weex/vue/valid-textarea-component	enforce valid <textarea> component
	weex/vue/valid-v-bind	enforce valid v-bind directives
	weex/vue/valid-v-else-if	enforce valid v-else-if directives
	weex/vue/valid-v-else	enforce valid v-else directives
	weex/vue/valid-v-for	enforce valid v-for directives
	weex/vue/valid-v-if	enforce valid v-if directives
	weex/vue/valid-v-model	enforce valid v-model directives
	weex/vue/valid-v-on	enforce valid v-on directives
	weex/vue/valid-v-once	enforce valid v-once directives
	weex/vue/valid-v-pre	enforce valid v-pre directives
	weex/vue/valid-v-text	enforce valid v-text directives
	weex/vue/valid-video-component	enforce valid <video> component
	weex/vue/valid-web-component	enforce valid <web> component

Priority B: Strongly Recommended (Improving Readability)

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/strongly-recommended"
}

	Rule ID	Description
:wrench:	weex/vue/attribute-hyphenation	enforce attribute naming style in template
:wrench:	weex/vue/html-end-tags	enforce end tag style
:wrench:	weex/vue/html-indent	enforce consistent indentation in <template>
:wrench:	weex/vue/html-self-closing	enforce self-closing style
:wrench:	weex/vue/max-attributes-per-line	enforce the maximum number of attributes per line
:wrench:	weex/vue/mustache-interpolation-spacing	enforce unified spacing in mustache interpolations
:wrench:	weex/vue/name-property-casing	enforce specific casing for the name property in Vue components
:wrench:	weex/vue/no-multi-spaces	disallow multiple spaces
	weex/vue/require-default-prop	require default value for props
	weex/vue/require-prop-types	require type definitions in props
:wrench:	weex/vue/v-bind-style	enforce v-bind directive style
:wrench:	weex/vue/v-on-style	enforce v-on directive style

Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)

Enforce all the rules in this category, as well as all higher priority rules, with:

{
  "extends": "plugin:vue/recommended"
}

	Rule ID	Description
	weex/vue/attributes-order	enforce order of attributes
:wrench:	weex/vue/html-quotes	enforce quotes style of HTML attributes
	weex/vue/no-confusing-v-for-v-if	disallow confusing v-for and v-if on the same element
:wrench:	weex/vue/order-in-components	enforce order of properties in components
	weex/vue/this-in-template	enforce usage of this in template

Uncategorized

	Rule ID	Description
:wrench:	weex/vue/html-closing-bracket-newline	require or disallow a line break before tag's closing brackets
:wrench:	weex/vue/html-closing-bracket-spacing	require or disallow a space before tag's closing brackets
	weex/vue/prop-name-casing	enforce specific casing for the Prop name in Vue components
:wrench:	weex/vue/script-indent	enforce consistent indentation in <script>

:couple: FAQ

What is the "Use the latest vue-eslint-parser" error?

The most rules of eslint-plugin-weex require vue-eslint-parser to check <template> ASTs.

Make sure you have one of the following settings in your .eslintrc:

• "extends": ["plugin:vue/recommended"]
• "extends": ["plugin:vue/base"]

If you already use other parser (e.g. "parser": "babel-eslint"), please move it into parserOptions, so it doesn't collide with the vue-eslint-parser used by this plugin's configuration:

- "parser": "babel-eslint",
  "parserOptions": {
+     "parser": "babel-eslint",
      "ecmaVersion": 2017,
      "sourceType": "module"
  }

The vue-eslint-parser uses the parser which is set by parserOptions.parser to parse scripts.

Why doesn't it work on .vue file?

1. Make sure you don't have eslint-plugin-html in your config. The eslint-plugin-html extracts the content from <script> tags, but eslint-vue-plugin requires <script> tags and <template> tags in order to distinguish template and script in single file components.

  "plugins": [
    "vue",
-   "html"
  ]

1. Make sure your tool is set to lint .vue files.

• CLI targets only .js files by default. You have to specify additional extensions by --ext option or glob patterns. E.g. eslint "src/**/*.{js,vue}" or eslint src --ext .vue.
• VSCode targets only JavaScript or HTML files by default. You have to add {"autoFix": true, "language": "vue"} into eslint.validate entry.

:anchor: Semantic Versioning Policy

This plugin follows semantic versioning and ESLint's Semantic Versioning Policy.

:newspaper: Changelog

We're using GitHub Releases.

:beers: Contribution guide

In order to add a new rule, you should:

• Create issue on GH with description of proposed rule
• Generate a new rule using the official yeoman generator
• Run npm start
• Write test scenarios & implement logic
• Describe the rule in the generated docs file
• Make sure all tests are passing
• Run npm run update in order to update readme and recommended configuration
• Create PR and link created issue in description

We're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new issue, but first please make sure your question does not repeat previous ones.

:lock: License

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