Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

eslint-plugin-weex-vue

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

eslint-plugin-weex-vue

Official ESLint plugin for Vue using in Weex

  • 0.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

eslint-plugin-vue

NPM version NPM downloads CircleCI

Official ESLint plugin for Vue.js

:art: Playground on the Web

You can try this plugin on the Web.

: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-vue

: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 IDDescription
vue/comment-directivesupport comment-directives in <template>
vue/jsx-uses-varsprevent 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 IDDescription
vue/no-async-in-computed-propertiesdisallow asynchronous actions in computed properties
vue/no-dupe-keysdisallow duplication of field names
vue/no-duplicate-attributesdisallow duplication of attributes
vue/no-parsing-errordisallow parsing errors in <template>
vue/no-reserved-keysdisallow overwriting reserved keys
:wrench:vue/no-shared-component-dataenforce component's data property to be a function
vue/no-side-effects-in-computed-propertiesdisallow side effects in computed properties
vue/no-template-keydisallow key attribute on <template>
vue/no-textarea-mustachedisallow mustaches in <textarea>
vue/no-unused-varsdisallow unused variable definitions of v-for directives or scope attributes
vue/require-component-isrequire v-bind:is of <component> elements
vue/require-render-returnenforce render function to always return value
vue/require-v-for-keyrequire v-bind:key with v-for directives
vue/require-valid-default-propenforce props default values to be valid
vue/return-in-computed-propertyenforce that a return statement is present in computed property
vue/valid-template-rootenforce valid template root
vue/valid-v-bindenforce valid v-bind directives
vue/valid-v-cloakenforce valid v-cloak directives
vue/valid-v-else-ifenforce valid v-else-if directives
vue/valid-v-elseenforce valid v-else directives
vue/valid-v-forenforce valid v-for directives
vue/valid-v-htmlenforce valid v-html directives
vue/valid-v-ifenforce valid v-if directives
vue/valid-v-modelenforce valid v-model directives
vue/valid-v-onenforce valid v-on directives
vue/valid-v-onceenforce valid v-once directives
vue/valid-v-preenforce valid v-pre directives
vue/valid-v-showenforce valid v-show directives
vue/valid-v-textenforce valid v-text directives
vue/weex/no-documentdocument api is invalid in weex.
vue/weex/no-globalglobal api may not exist in weex.
vue/weex/no-style-displayweex not support to use display in style
vue/weex/no-style-floatweex not support to use float in style
vue/weex/no-style-z-indexdisallow use z-index in style
vue/weex/no-v-cloakdisallow use v-cloak directives
vue/weex/no-v-htmldisallow use v-html directives
vue/weex/no-v-showdisallow use no-v-show directive
vue/weex/no-windowwindow api is invalid in weex.
vue/weex/valid-cell-componentweex <cell> component does not support margin-top/margin-bottom
vue/weex/valid-image-componentweex <image> component need style attributes of width and height
vue/weex/valid-list-componentvalid <list> component
vue/weex/valid-picker-modulevalid module picker in weex.
vue/weex/valid-scroller-componentvalid <scroller> component
vue/weex/valid-style-flexweex does not support all properties in the flex layout
vue/weex/valid-style-font-familyweex does not support multiple fonts in font-family
vue/weex/valid-style-selectorvalid css seletor used on the weex

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

{
  "extends": "plugin:vue/strongly-recommended"
}
Rule IDDescription
:wrench:vue/attribute-hyphenationenforce attribute naming style in template
:wrench:vue/html-end-tagsenforce end tag style
:wrench:vue/html-indentenforce consistent indentation in <template>
:wrench:vue/html-self-closingenforce self-closing style
:wrench:vue/max-attributes-per-lineenforce the maximum number of attributes per line
:wrench:vue/mustache-interpolation-spacingenforce unified spacing in mustache interpolations
:wrench:vue/name-property-casingenforce specific casing for the name property in Vue components
:wrench:vue/no-multi-spacesdisallow multiple spaces
vue/require-default-proprequire default value for props
vue/require-prop-typesrequire type definitions in props
:wrench:vue/v-bind-styleenforce v-bind directive style
:wrench:vue/v-on-styleenforce v-on directive style

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

{
  "extends": "plugin:vue/recommended"
}
Rule IDDescription
vue/attributes-orderenforce order of attributes
:wrench:vue/html-quotesenforce quotes style of HTML attributes
vue/no-confusing-v-for-v-ifdisallow confusing v-for and v-if on the same element
:wrench:vue/order-in-componentsenforce order of properties in components
vue/this-in-templateenforce usage of this in template

Uncategorized

Rule IDDescription
:wrench:vue/html-closing-bracket-newlinerequire or disallow a line break before tag's closing brackets
:wrench:vue/html-closing-bracket-spacingrequire or disallow a space before tag's closing brackets
vue/prop-name-casingenforce specific casing for the Prop name in Vue components
:wrench:vue/script-indentenforce consistent indentation in <script>

:couple: FAQ

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

The most rules of eslint-plugin-vue 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).

Keywords

FAQs

Package last updated on 24 Apr 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc