Skip to content

Commit 0a1237b

Browse files
chrisvfritzchrisvfritz
committed
categorize rules by style guide priority levels
1 parent 470b43c commit 0a1237b

File tree

119 files changed

+400
-357
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

119 files changed

+400
-357
lines changed

‎README.md

+77-53
Original file line numberDiff line numberDiff line change
@@ -88,74 +88,98 @@ The `--fix` option on the command line automatically fixes problems reported by
8888

8989
<!--RULES_TABLE_START-->
9090

91-
### Possible Errors
91+
### Base Rules (Enabling Correct ESLint Parsing)
92+
93+
Enforce all the rules in this category, as well as all higher priority rules, with:
94+
95+
``` json
96+
"extends": "plugin:vue/base"
97+
```
9298

9399
| | Rule ID | Description |
94100
|:---|:--------|:------------|
95-
| :white_check_mark: | [no-dupe-keys](./docs/rules/no-dupe-keys.md) | disallow duplication of field names |
96-
| :white_check_mark: | [no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>` |
97-
| :white_check_mark: | [no-reserved-keys](./docs/rules/no-reserved-keys.md) | disallow overwriting reserved keys |
98-
| :white_check_mark: | [no-shared-component-data](./docs/rules/no-shared-component-data.md) | enforce component's data property to be a function |
99-
| :white_check_mark: | [no-template-key](./docs/rules/no-template-key.md) | disallow `key` attribute on `<template>` |
100-
| | [no-unused-vars](./docs/rules/no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |
101-
| :white_check_mark: | [require-render-return](./docs/rules/require-render-return.md) | enforce render function to always return value |
102-
| :white_check_mark: | [require-valid-default-prop](./docs/rules/require-valid-default-prop.md) | enforce props default values to be valid |
103-
| :white_check_mark: | [return-in-computed-property](./docs/rules/return-in-computed-property.md) | enforce that a return statement is present in computed property |
104-
| :white_check_mark: | [valid-template-root](./docs/rules/valid-template-root.md) | enforce valid template root |
105-
| :white_check_mark: | [valid-v-bind](./docs/rules/valid-v-bind.md) | enforce valid `v-bind` directives |
106-
| :white_check_mark: | [valid-v-cloak](./docs/rules/valid-v-cloak.md) | enforce valid `v-cloak` directives |
107-
| :white_check_mark: | [valid-v-else-if](./docs/rules/valid-v-else-if.md) | enforce valid `v-else-if` directives |
108-
| :white_check_mark: | [valid-v-else](./docs/rules/valid-v-else.md) | enforce valid `v-else` directives |
109-
| :white_check_mark: | [valid-v-for](./docs/rules/valid-v-for.md) | enforce valid `v-for` directives |
110-
| :white_check_mark: | [valid-v-html](./docs/rules/valid-v-html.md) | enforce valid `v-html` directives |
111-
| :white_check_mark: | [valid-v-if](./docs/rules/valid-v-if.md) | enforce valid `v-if` directives |
112-
| :white_check_mark: | [valid-v-model](./docs/rules/valid-v-model.md) | enforce valid `v-model` directives |
113-
| :white_check_mark: | [valid-v-on](./docs/rules/valid-v-on.md) | enforce valid `v-on` directives |
114-
| :white_check_mark: | [valid-v-once](./docs/rules/valid-v-once.md) | enforce valid `v-once` directives |
115-
| :white_check_mark: | [valid-v-pre](./docs/rules/valid-v-pre.md) | enforce valid `v-pre` directives |
116-
| :white_check_mark: | [valid-v-show](./docs/rules/valid-v-show.md) | enforce valid `v-show` directives |
117-
| :white_check_mark: | [valid-v-text](./docs/rules/valid-v-text.md) | enforce valid `v-text` directives |
118-
119-
120-
### Best Practices
101+
| | [jsx-uses-vars](./docs/rules/jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |
102+
103+
104+
### Priority A: Essential (Error Prevention)
105+
106+
Enforce all the rules in this category, as well as all higher priority rules, with:
107+
108+
``` json
109+
"extends": "plugin:vue/essential"
110+
```
121111

122112
| | Rule ID | Description |
123113
|:---|:--------|:------------|
124-
| :white_check_mark::wrench: | [html-end-tags](./docs/rules/html-end-tags.md) | enforce end tag style |
125-
| :white_check_mark: | [no-async-in-computed-properties](./docs/rules/no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |
126-
| :white_check_mark: | [no-confusing-v-for-v-if](./docs/rules/no-confusing-v-for-v-if.md) | disallow confusing `v-for` and `v-if` on the same element |
127-
| :white_check_mark: | [no-duplicate-attributes](./docs/rules/no-duplicate-attributes.md) | disallow duplication of attributes |
128-
| :white_check_mark: | [no-side-effects-in-computed-properties](./docs/rules/no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |
129-
| :white_check_mark: | [no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in `<textarea>` |
130-
| :white_check_mark: | [order-in-components](./docs/rules/order-in-components.md) | enforce order of properties in components |
131-
| :white_check_mark: | [require-component-is](./docs/rules/require-component-is.md) | require `v-bind:is` of `<component>` elements |
132-
| :white_check_mark: | [require-default-prop](./docs/rules/require-default-prop.md) | require default value for props |
133-
| :white_check_mark: | [require-prop-types](./docs/rules/require-prop-types.md) | require type definitions in props |
134-
| :white_check_mark: | [require-v-for-key](./docs/rules/require-v-for-key.md) | require `v-bind:key` with `v-for` directives |
135-
| :white_check_mark: | [this-in-template](./docs/rules/this-in-template.md) | enforce usage of `this` in template |
136-
137-
138-
### Stylistic Issues
114+
| | [no-async-in-computed-properties](./docs/rules/no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |
115+
| | [no-dupe-keys](./docs/rules/no-dupe-keys.md) | disallow duplication of field names |
116+
| | [no-duplicate-attributes](./docs/rules/no-duplicate-attributes.md) | disallow duplication of attributes |
117+
| | [no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>` |
118+
| | [no-reserved-keys](./docs/rules/no-reserved-keys.md) | disallow overwriting reserved keys |
119+
| | [no-shared-component-data](./docs/rules/no-shared-component-data.md) | enforce component's data property to be a function |
120+
| | [no-side-effects-in-computed-properties](./docs/rules/no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |
121+
| | [no-template-key](./docs/rules/no-template-key.md) | disallow `key` attribute on `<template>` |
122+
| | [no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in `<textarea>` |
123+
| | [no-unused-vars](./docs/rules/no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |
124+
| | [require-component-is](./docs/rules/require-component-is.md) | require `v-bind:is` of `<component>` elements |
125+
| | [require-render-return](./docs/rules/require-render-return.md) | enforce render function to always return value |
126+
| | [require-v-for-key](./docs/rules/require-v-for-key.md) | require `v-bind:key` with `v-for` directives |
127+
| | [require-valid-default-prop](./docs/rules/require-valid-default-prop.md) | enforce props default values to be valid |
128+
| | [return-in-computed-property](./docs/rules/return-in-computed-property.md) | enforce that a return statement is present in computed property |
129+
| | [valid-template-root](./docs/rules/valid-template-root.md) | enforce valid template root |
130+
| | [valid-v-bind](./docs/rules/valid-v-bind.md) | enforce valid `v-bind` directives |
131+
| | [valid-v-cloak](./docs/rules/valid-v-cloak.md) | enforce valid `v-cloak` directives |
132+
| | [valid-v-else-if](./docs/rules/valid-v-else-if.md) | enforce valid `v-else-if` directives |
133+
| | [valid-v-else](./docs/rules/valid-v-else.md) | enforce valid `v-else` directives |
134+
| | [valid-v-for](./docs/rules/valid-v-for.md) | enforce valid `v-for` directives |
135+
| | [valid-v-html](./docs/rules/valid-v-html.md) | enforce valid `v-html` directives |
136+
| | [valid-v-if](./docs/rules/valid-v-if.md) | enforce valid `v-if` directives |
137+
| | [valid-v-model](./docs/rules/valid-v-model.md) | enforce valid `v-model` directives |
138+
| | [valid-v-on](./docs/rules/valid-v-on.md) | enforce valid `v-on` directives |
139+
| | [valid-v-once](./docs/rules/valid-v-once.md) | enforce valid `v-once` directives |
140+
| | [valid-v-pre](./docs/rules/valid-v-pre.md) | enforce valid `v-pre` directives |
141+
| | [valid-v-show](./docs/rules/valid-v-show.md) | enforce valid `v-show` directives |
142+
| | [valid-v-text](./docs/rules/valid-v-text.md) | enforce valid `v-text` directives |
143+
144+
145+
### Priority B: Strongly Recommended (Improving Readability)
146+
147+
Enforce all the rules in this category, as well as all higher priority rules, with:
148+
149+
``` json
150+
"extends": "plugin:vue/strongly-recommended"
151+
```
139152

140153
| | Rule ID | Description |
141154
|:---|:--------|:------------|
142-
| :white_check_mark::wrench: | [attribute-hyphenation](./docs/rules/attribute-hyphenation.md) | enforce attribute naming style in template |
155+
| :wrench: | [attribute-hyphenation](./docs/rules/attribute-hyphenation.md) | enforce attribute naming style in template |
156+
| :wrench: | [html-end-tags](./docs/rules/html-end-tags.md) | enforce end tag style |
143157
| :wrench: | [html-indent](./docs/rules/html-indent.md) | enforce consistent indentation in `<template>` |
144-
| | [html-quotes](./docs/rules/html-quotes.md) | enforce quotes style of HTML attributes |
145-
| :white_check_mark::wrench: | [html-self-closing](./docs/rules/html-self-closing.md) | enforce self-closing style |
146-
| :white_check_mark: | [max-attributes-per-line](./docs/rules/max-attributes-per-line.md) | enforce the maximum number of attributes per line |
147-
| :white_check_mark::wrench: | [mustache-interpolation-spacing](./docs/rules/mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations |
148-
| :white_check_mark::wrench: | [name-property-casing](./docs/rules/name-property-casing.md) | enforce specific casing for the name property in Vue components |
149-
| :white_check_mark::wrench: | [no-multi-spaces](./docs/rules/no-multi-spaces.md) | disallow multiple spaces |
150-
| :white_check_mark::wrench: | [v-bind-style](./docs/rules/v-bind-style.md) | enforce `v-bind` directive style |
151-
| :white_check_mark::wrench: | [v-on-style](./docs/rules/v-on-style.md) | enforce `v-on` directive style |
158+
| :wrench: | [html-self-closing](./docs/rules/html-self-closing.md) | enforce self-closing style |
159+
| | [max-attributes-per-line](./docs/rules/max-attributes-per-line.md) | enforce the maximum number of attributes per line |
160+
| :wrench: | [mustache-interpolation-spacing](./docs/rules/mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations |
161+
| :wrench: | [name-property-casing](./docs/rules/name-property-casing.md) | enforce specific casing for the name property in Vue components |
162+
| :wrench: | [no-multi-spaces](./docs/rules/no-multi-spaces.md) | disallow multiple spaces |
163+
| | [require-default-prop](./docs/rules/require-default-prop.md) | require default value for props |
164+
| | [require-prop-types](./docs/rules/require-prop-types.md) | require type definitions in props |
165+
| :wrench: | [v-bind-style](./docs/rules/v-bind-style.md) | enforce `v-bind` directive style |
166+
| :wrench: | [v-on-style](./docs/rules/v-on-style.md) | enforce `v-on` directive style |
152167

153168

154-
### Variables
169+
### Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
170+
171+
Enforce all the rules in this category, as well as all higher priority rules, with:
172+
173+
``` json
174+
"extends": "plugin:vue/recommended"
175+
```
155176

156177
| | Rule ID | Description |
157178
|:---|:--------|:------------|
158-
| :white_check_mark: | [jsx-uses-vars](./docs/rules/jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |
179+
| | [html-quotes](./docs/rules/html-quotes.md) | enforce quotes style of HTML attributes |
180+
| | [no-confusing-v-for-v-if](./docs/rules/no-confusing-v-for-v-if.md) | disallow confusing `v-for` and `v-if` on the same element |
181+
| | [order-in-components](./docs/rules/order-in-components.md) | enforce order of properties in components |
182+
| | [this-in-template](./docs/rules/this-in-template.md) | enforce usage of `this` in template |
159183

160184
### Deprecated
161185

‎docs/rules/attribute-hyphenation.md

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
# enforce attribute naming style in template (attribute-hyphenation)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
43
- :wrench: The `--fix` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.
54

65
## :wrench: Options

‎docs/rules/html-end-tags.md

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
# enforce end tag style (html-end-tags)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
43
- :wrench: The `--fix` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.
54

65
This rule enforce the way of end tags.

‎docs/rules/html-indent.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
6565
}
6666
```
6767

68-
- `type` (`number | "tab"`) ... The type of indentation. Default is `4`. If this is a number, it's the number of spaces for one indent. If this is `"tab"`, it uses one tab for one indent.
68+
- `type` (`number | "tab"`) ... The type of indentation. Default is `2`. If this is a number, it's the number of spaces for one indent. If this is `"tab"`, it uses one tab for one indent.
6969
- `attribute` (`integer`) ... The multiplier of indentation for attributes. Default is `1`.
7070
- `closeBracket` (`integer`) ... The multiplier of indentation for right brackets. Default is `0`.
7171
- `ignores` (`string[]`) ... The selector to ignore nodes. The AST spec is [here](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md). You can use [esquery](https://github.com/estools/esquery#readme) to select nodes. Default is an empty array.

‎docs/rules/html-self-closing.md

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
# enforce self-closing style (html-self-closing)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
43
- :wrench: The `--fix` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.
54

65
In Vue.js template, we can use either two styles for elements which don't have their content.

‎docs/rules/jsx-uses-vars.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# prevent variables used in JSX to be marked as unused (jsx-uses-vars)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
Since 0.17.0 the ESLint `no-unused-vars` rule does not detect variables used in JSX ([see details](http://eslint.org/blog/2015/03/eslint-0.17.0-released#changes-to-jsxreact-handling)).
64
This rule will find variables used in JSX and mark them as used.
75

‎docs/rules/max-attributes-per-line.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# enforce the maximum number of attributes per line (max-attributes-per-line)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
Limits the maximum number of attributes/properties per line to improve readability.
64

75

‎docs/rules/mustache-interpolation-spacing.md

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
# enforce unified spacing in mustache interpolations (mustache-interpolation-spacing)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
43
- :wrench: The `--fix` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.
54

65
## :book: Rule Details

‎docs/rules/name-property-casing.md

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
# enforce specific casing for the name property in Vue components (name-property-casing)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
43
- :wrench: The `--fix` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.
54

65
Define a style for the `name` property casing for consistency purposes.

‎docs/rules/no-async-in-computed-properties.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# disallow asynchronous actions in computed properties (no-async-in-computed-properties)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
Computed properties should be synchronous. Asynchronous actions inside them may not work as expected and can lead to an unexpected behaviour, that's why you should avoid them.
64
If you need async computed properties you might want to consider using additional plugin [vue-async-computed]
75

‎docs/rules/no-confusing-v-for-v-if.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# disallow confusing `v-for` and `v-if` on the same element (no-confusing-v-for-v-if)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
> When they exist on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately.
64
>
75
> https://vuejs.org/v2/guide/list.html#v-for-with-v-if

‎docs/rules/no-dupe-keys.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# disallow duplication of field names (no-dupe-keys)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
This rule prevents to use duplicated names.
64

75
## :book: Rule Details

‎docs/rules/no-duplicate-attributes.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# disallow duplication of attributes (no-duplicate-attributes)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
When duplicate arguments exist, only the last one is valid.
64
It's possibly mistakes.
75

‎docs/rules/no-multi-spaces.md

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
# disallow multiple spaces (no-multi-spaces)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
43
- :wrench: The `--fix` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.
54

65
The `--fix` option on the command line can automatically fix some of the problems reported by this rule.

‎docs/rules/no-parsing-error.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# disallow parsing errors in `<template>` (no-parsing-error)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
This rule reports syntax errors in `<template>`. For example:
64

75
- Syntax errors of scripts in directives.

‎docs/rules/no-reserved-keys.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# disallow overwriting reserved keys (no-reserved-keys)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
This rule prevents to use reserved names from to avoid conflicts and unexpected behavior.
64

75
## Rule Details

‎docs/rules/no-shared-component-data.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# enforce component's data property to be a function (no-shared-component-data)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
When using the data property on a component (i.e. anywhere except on `new Vue`), the value must be a function that returns an object.
64

75
## :book: Rule Details

‎docs/rules/no-side-effects-in-computed-properties.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# disallow side effects in computed properties (no-side-effects-in-computed-properties)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
It is considered a very bad practice to introduce side effects inside computed properties. It makes the code not predictable and hard to understand.
64

75

‎docs/rules/no-template-key.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# disallow `key` attribute on `<template>` (no-template-key)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
Vue.js disallows `key` attribute on `<template>` elements.
64

75
## :book: Rule Details

‎docs/rules/no-textarea-mustache.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# disallow mustaches in `<textarea>` (no-textarea-mustache)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
> Interpolation on textareas (`<textarea>{{text}}</textarea>`) won't work. Use `v-model` instead.
64
>
75
> https://vuejs.org/v2/guide/forms.html#Multiline-text

‎docs/rules/order-in-components.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# enforce order of properties in components (order-in-components)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
This rule makes sure you keep declared order of properties in components.
64

75
## :book: Rule Details

‎docs/rules/require-component-is.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
# require `v-bind:is` of `<component>` elements (require-component-is)
22

3-
- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
4-
53
> You can use the same mount point and dynamically switch between multiple components using the reserved `<component>` element and dynamically bind to its `is` attribute:
64
>
75
> https://vuejs.org/v2/guide/components.html#Dynamic-Components

0 commit comments

Comments
 (0)