From 88abee44a98379aa17049d2d73e1a50e1e8bd99a Mon Sep 17 00:00:00 2001 From: Armano Date: Tue, 13 Nov 2018 00:32:40 +0100 Subject: [PATCH 01/36] require-render-return --- docs/rules/require-render-return.md | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md index 47158bb42..92819ea90 100644 --- a/docs/rules/require-render-return.md +++ b/docs/rules/require-render-return.md @@ -2,19 +2,15 @@ - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`. -This rule aims to enforce render function to always return value - ## :book: Rule Details -:-1: Examples of **incorrect** code for this rule: +This rule aims to enforce render function to always return value -```js -export default { - render () {} -} -``` +:-1: Examples of **incorrect** code for this rule: -```js + +```vue + ``` + :+1: Examples of **correct** code for this rule: -```js + +```vue + ``` + ## :wrench: Options From b5c73797b9e404b492f3a8b0d65754c163584316 Mon Sep 17 00:00:00 2001 From: Armano Date: Tue, 13 Nov 2018 00:33:07 +0100 Subject: [PATCH 02/36] jsx-uses-vars code type --- docs/rules/jsx-uses-vars.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md index f799f689d..d515ac9d7 100644 --- a/docs/rules/jsx-uses-vars.md +++ b/docs/rules/jsx-uses-vars.md @@ -11,7 +11,7 @@ This rule only has an effect when the `no-unused-vars` rule is enabled. Without this rule this code triggers warning: -```js +```jsx import HelloWorld from './HelloWorld'; export default { From eee4f2d4385ce08feab9b6653fc2c16edfcfefb1 Mon Sep 17 00:00:00 2001 From: Armano Date: Tue, 13 Nov 2018 00:33:27 +0100 Subject: [PATCH 03/36] require-prop-type-constructor --- docs/rules/require-prop-type-constructor.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md index 5c7757230..74f9f75bb 100644 --- a/docs/rules/require-prop-type-constructor.md +++ b/docs/rules/require-prop-type-constructor.md @@ -3,6 +3,8 @@ - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`. - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule. +## Rule Details + This rule reports prop types that can't be presumed as constructors. It's impossible to catch every possible case and know whether the prop type is a constructor or not, hence this rule black list few types of nodes, instead of white-listing correct ones. @@ -16,8 +18,6 @@ The following types are forbidden and will be reported: It will catch most commonly made mistakes which are using strings instead of constructors. -## Rule Details - ```vue ``` + ## :wrench: Options diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md index 517f23285..08d214777 100644 --- a/docs/rules/return-in-computed-property.md +++ b/docs/rules/return-in-computed-property.md @@ -8,29 +8,34 @@ This rule enforces that a `return` statement is present in `computed` properties :-1: Examples of **incorrect** code for this rule: -```js -export default { - computed: { - foo () {}, - bar: function () {} - } -} -``` - -:+1: Examples of **correct** code for this rule: - -```js + +```vue + ``` + ## :wrench: Options From dd84609d1a3a8457f9290baa2b449fa18b393dfb Mon Sep 17 00:00:00 2001 From: Armano Date: Tue, 13 Nov 2018 02:07:37 +0100 Subject: [PATCH 05/36] add missing options --- docs/rules/attribute-hyphenation.md | 14 ++++++++++---- docs/rules/attributes-order.md | 23 ++++++++++++++++++++++- docs/rules/html-quotes.md | 8 ++++++++ docs/rules/this-in-template.md | 7 +++++-- docs/rules/v-bind-style.md | 7 +++++++ docs/rules/v-on-style.md | 7 +++++++ 6 files changed, 59 insertions(+), 7 deletions(-) diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md index 3e1d137c0..4be253f5d 100644 --- a/docs/rules/attribute-hyphenation.md +++ b/docs/rules/attribute-hyphenation.md @@ -7,11 +7,16 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to be ignored -``` -'vue/attribute-hyphenation': [2, 'always'|'never', { 'ignore': ['custom-prop'] }] +```json +{ + "vue/attribute-hyphenation": [2, "always" | "never", { + "ignore": ["custom-prop"] + }}] +} ``` -### `["error", "always"]` - Use hyphenated name. (It errors on upper case letters.) +### `["error", "always"]` - Use hyphenated name. +It errors on upper case letters. ``` @@ -25,7 +30,8 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to ``` -### `["error", "never"]` - Don't use hyphenated name. (It errors on hyphens except `data-`, `aria-` and `slot-scope`.) +### `["error", "never"]` - Don't use hyphenated name. +It errors on hyphens except `data-`, `aria-` and `slot-scope`. ``` diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md index 5fd858b07..570fedd85 100644 --- a/docs/rules/attributes-order.md +++ b/docs/rules/attributes-order.md @@ -80,7 +80,28 @@ This rule aims to enforce ordering of component attributes. The default order is ``` -### custom orders +## :wrench: Options +```json +{ + "vue/attributes-order": [2, { + "order": [ + "DEFINITION", + "LIST_RENDERING", + "CONDITIONALS", + "RENDER_MODIFIERS", + "GLOBAL", + "UNIQUE", + "TWO_WAY_BINDING", + "OTHER_DIRECTIVES", + "OTHER_ATTR", + "EVENTS", + "CONTENT" + ] + }] +} +``` + +### Custom orders #### `['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']` diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md index 3e8f38e15..59f20566d 100644 --- a/docs/rules/html-quotes.md +++ b/docs/rules/html-quotes.md @@ -30,6 +30,14 @@ This rule reports the quotes of attributes if it is different to configured quot ## :wrench: Options +Default is set to `double`. + +```json +{ + "vue/html-quotes": [2, "double" | "single"] +} +``` + - `"double"` (default) ... requires double quotes. - `"single"` ... requires single quotes. diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md index a5ce6a07f..4d9028e7b 100644 --- a/docs/rules/this-in-template.md +++ b/docs/rules/this-in-template.md @@ -24,8 +24,11 @@ Default is set to `never`. -``` -'vue/this-in-template': [2, 'always'|'never'] +```json +{ + "vue/this-in-template": [2, "always" | "never"] +} + ``` ### `"always"` - Always use `this` while accessing properties from Vue diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md index 77adff074..c73e48e63 100644 --- a/docs/rules/v-bind-style.md +++ b/docs/rules/v-bind-style.md @@ -32,6 +32,13 @@ This rule enforces `v-bind` directive style which you should use shorthand or lo ``` ## :wrench: Options +Default is set to `shorthand`. + +```json +{ + "vue/v-bind-style": [2, "shorthand" | "longform"] +} +``` - `"shorthand"` (default) ... requires using shorthand. - `"longform"` ... requires using long form. diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md index 9b93ee550..abaf60547 100644 --- a/docs/rules/v-on-style.md +++ b/docs/rules/v-on-style.md @@ -32,6 +32,13 @@ This rule enforces `v-on` directive style which you should use shorthand or long ``` ## :wrench: Options +Default is set to `shorthand`. + +```json +{ + "vue/v-on-style": [2, "shorthand" | "longform"] +} +``` - `"shorthand"` (default) ... requires using shorthand. - `"longform"` ... requires using long form. From 6206cc9c74c7e947a0c2d68d98aa7f83651dccfb Mon Sep 17 00:00:00 2001 From: Armano Date: Tue, 13 Nov 2018 02:14:55 +0100 Subject: [PATCH 06/36] Update - v-on-style - v-bind-style --- docs/rules/attribute-hyphenation.md | 2 +- docs/rules/v-bind-style.md | 45 +++++++++++++++-------------- docs/rules/v-on-style.md | 44 +++++++++++++++------------- 3 files changed, 49 insertions(+), 42 deletions(-) diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md index 4be253f5d..f0bb1ce94 100644 --- a/docs/rules/attribute-hyphenation.md +++ b/docs/rules/attribute-hyphenation.md @@ -11,7 +11,7 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to { "vue/attribute-hyphenation": [2, "always" | "never", { "ignore": ["custom-prop"] - }}] + }] } ``` diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md index c73e48e63..f19b288e1 100644 --- a/docs/rules/v-bind-style.md +++ b/docs/rules/v-bind-style.md @@ -3,33 +3,21 @@ - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`. - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule. -This rule enforces `v-bind` directive style which you should use shorthand or long form. - ## :book: Rule Details -:-1: Examples of **incorrect** code for this rule: - -```html -
-``` - -:+1: Examples of **correct** code for this rule: - -```html -
-``` - -:-1: Examples of **incorrect** code for this rule with `"longform"` option: +This rule enforces `v-bind` directive style which you should use shorthand or long form. + ```html -
-``` - -:+1: Examples of **correct** code for this rule with `"longform"` option: + ``` + ## :wrench: Options Default is set to `shorthand`. @@ -43,6 +31,21 @@ Default is set to `shorthand`. - `"shorthand"` (default) ... requires using shorthand. - `"longform"` ... requires using long form. +### `"longform"` + + +```html + +``` + + + ## Related links - [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended) diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md index abaf60547..d4b84d5f5 100644 --- a/docs/rules/v-on-style.md +++ b/docs/rules/v-on-style.md @@ -3,33 +3,22 @@ - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`. - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule. -This rule enforces `v-on` directive style which you should use shorthand or long form. ## :book: Rule Details -:-1: Examples of **incorrect** code for this rule: - -```html -
-``` - -:+1: Examples of **correct** code for this rule: +This rule enforces `v-on` directive style which you should use shorthand or long form. + ```html -
-``` - -:-1: Examples of **incorrect** code for this rule with `"longform"` option: + ``` + ## :wrench: Options Default is set to `shorthand`. @@ -43,6 +32,21 @@ Default is set to `shorthand`. - `"shorthand"` (default) ... requires using shorthand. - `"longform"` ... requires using long form. +### `"longform"` + + +```html + +``` + + + ## Related links - [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended) From 8cb65306677d712d260dadd96617a119d5c3aa66 Mon Sep 17 00:00:00 2001 From: Armano Date: Tue, 13 Nov 2018 02:26:40 +0100 Subject: [PATCH 07/36] fix remaining missing options update: valid-v-on --- docs/rules/no-textarea-mustache.md | 10 +++++----- docs/rules/prop-name-casing.md | 2 +- docs/rules/this-in-template.md | 1 - docs/rules/valid-v-on.md | 28 ++++++++++++++++------------ 4 files changed, 22 insertions(+), 19 deletions(-) diff --git a/docs/rules/no-textarea-mustache.md b/docs/rules/no-textarea-mustache.md index 1a955d143..6e93631bc 100644 --- a/docs/rules/no-textarea-mustache.md +++ b/docs/rules/no-textarea-mustache.md @@ -2,11 +2,6 @@ - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`. -::: warning Note -Interpolation on textareas (``) won't work. Use `v-model` instead. -[https://vuejs.org/v2/guide/forms.html#Multiline-text](https://vuejs.org/v2/guide/forms.html#Multiline-text) -::: - ## :book: Rule Details This rule reports mustaches in ``) won't work. Use `v-model` instead. +[https://vuejs.org/v2/guide/forms.html#Multiline-text](https://vuejs.org/v2/guide/forms.html#Multiline-text) +::: + ## :wrench: Options Nothing. diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md index e87343fab..0f4a033e2 100644 --- a/docs/rules/prop-name-casing.md +++ b/docs/rules/prop-name-casing.md @@ -28,7 +28,7 @@ export default { ## :wrench: Options -``` +```json { "vue/prop-name-casing": ["error", "camelCase" | "snake_case"] } diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md index 4d9028e7b..bb3a74248 100644 --- a/docs/rules/this-in-template.md +++ b/docs/rules/this-in-template.md @@ -28,7 +28,6 @@ Default is set to `never`. { "vue/this-in-template": [2, "always" | "never"] } - ``` ### `"always"` - Always use `this` while accessing properties from Vue diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md index ab423b790..4c3760be9 100644 --- a/docs/rules/valid-v-on.md +++ b/docs/rules/valid-v-on.md @@ -36,24 +36,28 @@ This rule does not check syntax errors in directives because it's checked by [no ## :wrench: Options -This rule has an object option: - -`"modifiers"`: [] (default) array of additional allowed modifiers. - -### Example: - ```json -"vue/valid-v-on": [2, { - modifiers: ['foo'] -}] +{ + "vue/prop-name-casing": ["error", { + "modifiers": [] + }] +} ``` -:+1: Examples of **correct** code for this rule: +This rule has an object option: + +`"modifiers"` array of additional allowed modifiers. + +### `"modifiers": ["foo"]` + ```html -
-
+ ``` + ## :couple: Related rules From 1e074332aa3deb7330f25398de62890bbc70ff3a Mon Sep 17 00:00:00 2001 From: Armano Date: Tue, 13 Nov 2018 02:44:32 +0100 Subject: [PATCH 08/36] Update require-component-is & no-use-v-if-with-v-for --- docs/rules/no-unused-components.md | 4 ++-- docs/rules/no-use-v-if-with-v-for.md | 16 +++++----------- docs/rules/require-component-is.md | 28 +++++++++++++++------------- 3 files changed, 22 insertions(+), 26 deletions(-) diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md index 871f4b0c7..81fe77f0f 100644 --- a/docs/rules/no-unused-components.md +++ b/docs/rules/no-unused-components.md @@ -2,10 +2,10 @@ - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`. -This rule reports components that haven't been used in the template. - ## :book: Rule Details +This rule reports components that haven't been used in the template. + :-1: Examples of **incorrect** code for this rule: ```html diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md index a178e1534..116793d23 100644 --- a/docs/rules/no-use-v-if-with-v-for.md +++ b/docs/rules/no-use-v-if-with-v-for.md @@ -2,20 +2,14 @@ - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`. -> Never use `v-if` on the same element as `v-for`. -> -> There are two common cases where this can be tempting: -> -> * To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace `users` with a new computed property that returns your filtered list (e.g. `activeUsers`). -> -> * To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`). -> -> https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential - ## :book: Rule Details This rule is aimed at preventing the use of `v-for` directives together with `v-if` directives on the same element. +There are two common cases where this can be tempting: + * To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace `users` with a new computed property that returns your filtered list (e.g. `activeUsers`). + * To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`). + ```