Norwegian Polka Music

    eslint-plugin-weex

    1.1.9 • Public • Published

    eslint-plugin-weex

    NPM version NPM downloads CircleCI

    Official ESLint plugin for Weex

    ❕ 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

    💿 Installation

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

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

    ⚙️ 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

    💡 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 🔧 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
    🔧 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
    🔧 weex/vue/attribute-hyphenation enforce attribute naming style in template
    🔧 weex/vue/html-end-tags enforce end tag style
    🔧 weex/vue/html-indent enforce consistent indentation in <template>
    🔧 weex/vue/html-self-closing enforce self-closing style
    🔧 weex/vue/max-attributes-per-line enforce the maximum number of attributes per line
    🔧 weex/vue/mustache-interpolation-spacing enforce unified spacing in mustache interpolations
    🔧 weex/vue/name-property-casing enforce specific casing for the name property in Vue components
    🔧 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
    🔧 weex/vue/v-bind-style enforce v-bind directive style
    🔧 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
    🔧 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
    🔧 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
    🔧 weex/vue/html-closing-bracket-newline require or disallow a line break before tag's closing brackets
    🔧 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
    🔧 weex/vue/script-indent enforce consistent indentation in <script>

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

    ⚓️ Semantic Versioning Policy

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

    📰 Changelog

    We're using GitHub Releases.

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

    🔒 License

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

    Install

    npm i eslint-plugin-weex

    DownloadsWeekly Downloads

    3

    Version

    1.1.9

    License

    MIT

    Unpacked Size

    318 kB

    Total Files

    91

    Last publish

    Collaborators

    • danwu
    • erha19