diff --git a/.circleci/config.yml b/.circleci/config.yml
index 75833b053..f1ad60e66 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -2,10 +2,28 @@ workflows:
version: 2
node-multi-build:
jobs:
- - node-v6
- - node-v8
- - node-v10
- - node-v10-minimal
+ - node-v6:
+ filters:
+ branches:
+ ignore: gh-pages
+ - node-v8:
+ filters:
+ branches:
+ ignore: gh-pages
+ - node-v10:
+ filters:
+ branches:
+ ignore: gh-pages
+ - node-v10-minimal:
+ filters:
+ branches:
+ ignore: gh-pages
+ - deploy_docs:
+ requires:
+ - node-v10
+ filters:
+ branches:
+ only: master
version: 2
jobs:
@@ -20,19 +38,16 @@ jobs:
- restore_cache:
keys:
- v2-npm-lock-{{ .Branch }}-{{ .Environment.CIRCLE_JOB }}-{{ checksum "package.json" }}
- - v2-npm-lock-master-{{ .Environment.CIRCLE_JOB }}-{{ checksum "package.json" }}
- - v2-npm-cache-{{ .Branch }}-{{ .Environment.CIRCLE_JOB }}
- - v2-npm-cache-master-{{ .Environment.CIRCLE_JOB }}
- run:
name: Install dependencies
command: npm install
- - run:
- name: Test
- command: npm test
- save_cache:
key: v2-npm-lock-{{ .Branch }}-{{ .Environment.CIRCLE_JOB }}-{{ checksum "package.json" }}
paths:
- node_modules
+ - run:
+ name: Test
+ command: npm test
node-v6:
<<: *node-base
@@ -46,6 +61,7 @@ jobs:
<<: *node-base
docker:
- image: node:10
+ working_directory: ~/node_10
node-v10-minimal:
steps:
- run:
@@ -73,4 +89,13 @@ jobs:
- node_modules
docker:
- image: node:10
-
+
+ deploy_docs:
+ docker:
+ - image: node:10
+ steps:
+ - attach_workspace:
+ at: ~/node_10
+ - run:
+ name: Deploy to Github Pages
+ command: npm run docs:deploy
diff --git a/.eslintignore b/.eslintignore
index 9efb24842..20f3203c8 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,3 +3,6 @@
/node_modules
/tests/fixtures
/tests/integrations/*/node_modules
+
+!.vuepress
+/docs/.vuepress/dist
diff --git a/.gitignore b/.gitignore
index c07de3ba2..688618a31 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,4 @@
/test.*
yarn.lock
yarn-error.log
+docs/.vuepress/dist
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6287f25a9..7bd96f8d9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,10 @@
"editor.tabSize": 2,
"eslint.options": {
"rulePaths": ["eslint-internal-rules"]
- }
+ },
+ "eslint.validate": [
+ "javascript",
+ "javascriptreact",
+ { "language": "vue", "autoFix": true }
+ ]
}
diff --git a/README.md b/README.md
index 04a8425e6..ee9d149a4 100644
--- a/README.md
+++ b/README.md
@@ -7,303 +7,21 @@
> Official ESLint plugin for Vue.js
-## :exclamation: Attention - this is documentation for version `5.x` :exclamation:
+## :book: Documentation
-This branch contains `eslint-plugin-vue@next` which is a pre-released `5.0`, but it's not the default version that you get with `npm install eslint-plugin-vue`. In order to install this you need to specify either `"eslint-plugin-vue": "next"` in `package.json` or do `npm install eslint-plugin-vue@next`.
+See https://vuejs.github.io/eslint-plugin-vue/
-Please try it and report any issues that you might have encountered.
+> :exclamation: Attention - this is documentation for version `5.x` :exclamation:
+>
+> This branch contains `eslint-plugin-vue@next` which is a pre-released `5.0`, but it's not the default version that you get with `npm install eslint-plugin-vue`. In order to install this you need to specify either `"eslint-plugin-vue": "next"` in `package.json` or do `npm install eslint-plugin-vue@next`.
+>
+> Please try it and report any issues that you might have encountered.
+>
+> If you want to check previous releases [go here](https://github.com/vuejs/eslint-plugin-vue/releases).
-If you want to check previous releases [go here](https://github.com/vuejs/eslint-plugin-vue/releases).
+## :anchor: Versioning Policy
-## :art: Playground on the Web
-
-You can try this plugin on the Web.
-
-- https://mysticatea.github.io/vue-eslint-demo/
-
-## :grey_exclamation: Requirements
-
-- [ESLint](http://eslint.org/) `^5.0.0`.
-- Node.js `>=6.5.0`
-
-## :cd: Installation
-
-```bash
-npm install --save-dev eslint eslint-plugin-vue@next
-```
-
-## :rocket: Usage
-
-Create `.eslintrc.*` file to configure rules. See also: [http://eslint.org/docs/user-guide/configuring](http://eslint.org/docs/user-guide/configuring).
-
-Example **.eslintrc.js**:
-
-```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'
- }
-}
-```
-
-### Single File Components
-
-ESLint only targets `.js` files by default. You must include the `.vue` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern.
-
-Examples:
-
-```bash
-eslint --ext .js,.vue src
-eslint src/**/*.{js,vue}
-```
-
-### 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.:
-
-```js
-// @vue/component
-const CustomComponent = {
- name: 'custom-component',
- template: ''
-}
-```
-```js
-Vue.component('AsyncComponent', (resolve, reject) => {
- setTimeout(() => {
- // @vue/component
- resolve({
- name: 'async-component',
- template: ''
- })
- }, 500)
-})
-```
-
-### `eslint-disable` functionality in ``
-
-You can use ``-like HTML comments in `` of `.vue` files. For example:
-
-```html
-
-
-
-
-
-```
-
-If you want to disallow `eslint-disable` functionality, please disable [vue/comment-directive](./docs/rules/comment-directive.md) rule.
-
-## :gear: Configs
-
-This plugin provides four 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:
-
-```json
-{
- "extends": "plugin:vue/base"
-}
-```
-
-| | Rule ID | Description |
-|:---|:--------|:------------|
-| | [vue/comment-directive](./docs/rules/comment-directive.md) | support comment-directives in `` |
-| | [vue/jsx-uses-vars](./docs/rules/jsx-uses-vars.md) | 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:
-
-```json
-{
- "extends": "plugin:vue/essential"
-}
-```
-
-| | Rule ID | Description |
-|:---|:--------|:------------|
-| | [vue/no-async-in-computed-properties](./docs/rules/no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |
-| | [vue/no-dupe-keys](./docs/rules/no-dupe-keys.md) | disallow duplication of field names |
-| | [vue/no-duplicate-attributes](./docs/rules/no-duplicate-attributes.md) | disallow duplication of attributes |
-| | [vue/no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `` |
-| | [vue/no-reserved-keys](./docs/rules/no-reserved-keys.md) | disallow overwriting reserved keys |
-| :wrench: | [vue/no-shared-component-data](./docs/rules/no-shared-component-data.md) | enforce component's data property to be a function |
-| | [vue/no-side-effects-in-computed-properties](./docs/rules/no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |
-| | [vue/no-template-key](./docs/rules/no-template-key.md) | disallow `key` attribute on `` |
-| | [vue/no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in ``) won't work. Use `v-model` instead.
->
-> https://vuejs.org/v2/guide/forms.html#Multiline-text
-
## :book: Rule Details
This rule reports mustaches in `
+
```
+
+
+
-:+1: Examples of **correct** code for this rule:
-
-```html
-
+
+
+
```
+
+
+::: 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)
+:::
## :wrench: Options
Nothing.
-## Related links
+## :books: Further reading
- [Guide - Forms / Multiline text](https://vuejs.org/v2/guide/forms.html#Multiline-text)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-textarea-mustache.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-textarea-mustache.js)
diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index 28e6ac329..9f1045636 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -1,96 +1,102 @@
-# disallow registering components that are not used inside templates (vue/no-unused-components)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-unused-components
+description: disallow registering components that are not used inside templates
+---
+# vue/no-unused-components
+> disallow registering components that are not used inside templates
- :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
-:-1: Examples of **incorrect** code for this rule:
+This rule reports components that haven't been used in the template.
-```html
+
+```vue
+
Lorem ipsum
-
+
+
+
+ CTA
+
```
+
-Note that components registered under other than `PascalCase` name have to be called directly under the specified name, whereas if you register it using `PascalCase` you can call it however you like, except using `snake_case`.
-
-:+1: Examples of **correct** code for this rule:
-
-```html
+
+```vue
+
Lorem ipsum
-
-
-
- CTA
-
+
```
+
+
+::: warning Note
+Components registered under other than `PascalCase` name have to be called directly under the specified name, whereas if you register it using `PascalCase` you can call it however you like, except using `snake_case`.
+:::
## :wrench: Options
```json
{
- "vue/no-unused-components": ["error", {
- "ignoreWhenBindingPresent": true
- }]
+ "vue/no-unused-components": ["error", {
+ "ignoreWhenBindingPresent": true
+ }]
}
```
- `ignoreWhenBindingPresent` ... suppresses all errors if binding has been detected in the template
default `true`
+### `ignoreWhenBindingPresent: false`
-:+1: Examples of **incorrect** code:
-
-```json
-{
- "vue/no-unused-components": ["error", {
- "ignoreWhenBindingPresent": false
- }]
-}
-```
-
-```html
+
+```vue
+
Lorem ipsum
-
+
+
+
@@ -101,34 +107,22 @@ Note that components registered under other than `PascalCase` name have to be ca
export default {
components: {
- TheButton, // <- not used
- TheSelect, // <- not used
- TheInput, // <- not used
+ TheButton,
+ TheSelect,
+ TheInput,
},
- computed: {
- computedComponent() { ... }
- }
}
```
+
-:+1: Examples of **correct** code:
-
-```json
-{
- "vue/no-unused-components": ["error", {
- "ignoreWhenBindingPresent": false
- }]
-}
-```
-
-```html
+
+```vue
+
Lorem ipsum
-
-
-
+
@@ -139,10 +133,20 @@ Note that components registered under other than `PascalCase` name have to be ca
export default {
components: {
- TheButton,
- TheSelect,
- TheInput,
+ TheButton, // <- not used
+ TheSelect, // <- not used
+ TheInput, // <- not used
},
+ computed: {
+ computedComponent() {
+ }
+ }
}
```
+
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-unused-components.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-unused-components.js)
diff --git a/docs/rules/no-unused-vars.md b/docs/rules/no-unused-vars.md
index 34e48ebbb..b78b78f87 100644
--- a/docs/rules/no-unused-vars.md
+++ b/docs/rules/no-unused-vars.md
@@ -1,31 +1,39 @@
-# disallow unused variable definitions of v-for directives or scope attributes (vue/no-unused-vars)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-unused-vars
+description: disallow unused variable definitions of v-for directives or scope attributes
+---
+# vue/no-unused-vars
+> disallow unused variable definitions of v-for directives or scope attributes
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-This rule report variable definitions of v-for directives or scope attributes if those are not used.
-
## :book: Rule Details
-:-1: Examples of **incorrect** code for this rule:
+This rule report variable definitions of v-for directives or scope attributes if those are not used.
-```html
+
+```
-
-
item
+
+
+
{{ i }}
-
-```
-
-:+1: Examples of **correct** code for this rule:
-```html
-
+
-
{{i}}
+
item
```
+
## :wrench: Options
Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-unused-vars.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-unused-vars.js)
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 9d9ade48a..f912b35ea 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -1,105 +1,93 @@
-# disallow use v-if on the same element as v-for (vue/no-use-v-if-with-v-for)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-use-v-if-with-v-for
+description: disallow use v-if on the same element as v-for
+---
+# vue/no-use-v-if-with-v-for
+> disallow use v-if on the same element as v-for
- :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
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-```
-
-In this case, the `v-if` should be written on the wrapper element.
+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`).
-```html
-
+
```
+
+
+
+
+
+
-In this case, the `v-for` list variable should be replace with a computed property that returns your filtered list.
-
-
-:+1: Examples of **correct** code for this rule:
-
-
-```html
-
+
-
+ />
+
+
```
+
+## :wrench: Options
-
-```html
-
-```
-
-```js
-computed: {
- shownTodos() {
- return this.todos.filter((todo) => todo.shown)
- }
+```json
+{
+ "vue/no-use-v-if-with-v-for": ["error", {
+ "allowUsingIterationVar": false
+ }]
}
```
-## :wrench: Options
+- `allowUsingIterationVar` (`boolean`) ... Enables The `v-if` directive use the reference which is to the variables which are defined by the `v-for` directives. Default is `false`.
-`allowUsingIterationVar` - Enables The `v-if` directive use the reference which is to the variables which are defined by the `v-for` directives.
+### `"allowUsingIterationVar": true`
-```js
-'vue/no-use-v-if-with-v-for': ['error', {
- allowUsingIterationVar: true // default: false
-}]
+
```
+
+
+
-:+1: Examples of additional **correct** code for this rule with sample `"allowUsingIterationVar": true` options:
-
-```html
-
-```
-
-:-1: Examples of additional **incorrect** code for this rule with sample `"allowUsingIterationVar": true` options:
-
-```html
-
+
+
+
```
+
-## Related links
+## :books: Further reading
- [Style guide - Avoid v-if with v-for](https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential)
- [Guide - Conditional / v-if with v-for](https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for)
- [Guide - List / v-for with v-if](https://vuejs.org/v2/guide/list.html#v-for-with-v-if)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-use-v-if-with-v-for.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-use-v-if-with-v-for.js)
diff --git a/docs/rules/no-v-html.md b/docs/rules/no-v-html.md
index d5e82d17f..45b1bbbe2 100644
--- a/docs/rules/no-v-html.md
+++ b/docs/rules/no-v-html.md
@@ -1,39 +1,43 @@
-# disallow use of v-html to prevent XSS attack (vue/no-v-html)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-v-html
+description: disallow use of v-html to prevent XSS attack
+---
+# vue/no-v-html
+> disallow use of v-html to prevent XSS attack
- :gear: This rule is included in `"plugin:vue/recommended"`.
-This rule reports use of `v-html` directive in order to reduce the risk of injecting potentially unsafe / unescaped html into the browser leading to Cross-Site Scripting (XSS) attacks.
-
## :book: Rule Details
-This rule reports all uses of `v-html` to help prevent XSS attacks.
-
-This rule does not check syntax errors in directives because it's checked by no-parsing-error rule.
-
-:-1: Examples of **incorrect** code for this rule:
+This rule reports all uses of `v-html` directive in order to reduce the risk of injecting potentially unsafe / unescaped html into the browser leading to Cross-Site Scripting (XSS) attacks.
-```html
-
-
-
+
```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-
{{someHTML}}
+
+
{{ someHTML }}
+
+
+
```
+
## :wrench: Options
Nothing.
-## When Not To Use It
+## :mute: When Not To Use It
-If you are certain the content passed `to v-html` is sanitized HTML you can disable this rule.
+If you are certain the content passed to `v-html` is sanitized HTML you can disable this rule.
-## Related links
+## :books: Further reading
- [XSS in Vue.js](https://blog.sqreen.io/xss-in-vue-js/)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-v-html.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-v-html.js)
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
index 7b326931d..99c40bc23 100644
--- a/docs/rules/order-in-components.md
+++ b/docs/rules/order-in-components.md
@@ -1,77 +1,95 @@
-# enforce order of properties in components (vue/order-in-components)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/order-in-components
+description: enforce order of properties in components
+---
+# vue/order-in-components
+> enforce order of properties in components
- :gear: This rule is included in `"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 makes sure you keep declared order of properties in components.
-
## :book: Rule Details
+This rule makes sure you keep declared order of properties in components.
Recommended order of properties can be [found here](https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended).
-Examples of **incorrect** code for this rule:
-
-```js
-name: 'app',
-data () {
- return {
- msg: 'Welcome to Your Vue.js App'
+
+```
+
```
+
-Examples of **correct** code for this rule:
-
-```js
-
+
+```
+
+```
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/order-in-components": ["error", {
+ "order": [
+ "el",
+ "name",
+ "parent",
+ "functional",
+ ["delimiters", "comments"],
+ ["components", "directives", "filters"],
+ "extends",
+ "mixins",
+ "inheritAttrs",
+ "model",
+ ["props", "propsData"],
+ "data",
+ "computed",
+ "watch",
+ "LIFECYCLE_HOOKS",
+ "methods",
+ ["template", "render"],
+ "renderError"
+ ]
+ }]
}
-
```
-### Options
+- `order` (`(string | string[])[]`) ... The order of properties. Elements are the property names or `LIFECYCLE_HOOKS`. If an element is the array of strings, it means any of those can be placed there unordered. Default is above.
-If you want you can change the order providing the optional configuration in your `.eslintrc` file. Setting responsible for the above order looks like this:
-``` json
-"vue/order-in-components": ["error", {
- "order": [
- "el",
- "name",
- "parent",
- "functional",
- ["delimiters", "comments"],
- ["components", "directives", "filters"],
- "extends",
- "mixins",
- "inheritAttrs",
- "model",
- ["props", "propsData"],
- "data",
- "computed",
- "watch",
- "LIFECYCLE_HOOKS",
- "methods",
- ["template", "render"],
- "renderError"
- ]
-}]
-```
+## :books: Further reading
-If you want some of properties to be treated equally in order you can group them into arrays, like we did with `delimiters` and `comments`.
+- [Style guide - Component/instance options order](https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended)
-## Related links
+## :mag: Implementation
-- [Style guide - Component/instance options order](https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended)
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/order-in-components.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/order-in-components.js)
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index 848850631..ea26d9b96 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -1,42 +1,71 @@
-# enforce specific casing for the Prop name in Vue components (vue/prop-name-casing)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prop-name-casing
+description: enforce specific casing for the Prop name in Vue components
+---
+# vue/prop-name-casing
+> enforce specific casing for the Prop name in Vue components
- :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 would enforce proper casing of props in vue components(camelCase).
-
## :book: Rule Details
-(https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended).
-
-:+1: Examples of **correct** code for `camelCase`:
+This rule enforce proper casing of props in vue components(camelCase).
-```js
+
+```
+
```
+
-:-1: Examples of **incorrect** code for `camelCase`:
+## :wrench: Options
-```js
-export default {
- props: {
- 'greeting-text': String
- }
+```json
+{
+ "vue/prop-name-casing": ["error", "camelCase" | "snake_case"]
}
```
-## :wrench: Options
+- `"camelCase"` (default) ... Enforce property names in `props` to camel case.
+- `"snake_case"` ... Enforce property names in `props` to snake case.
-Default casing is set to `camelCase`.
+### `"snake_case"`
+
```
-"vue/prop-name-casing": ["error", "camelCase|snake_case"]
+
```
+
-## Related links
+## :books: Further reading
- [Style guide - Prop name casing](https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prop-name-casing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prop-name-casing.js)
diff --git a/docs/rules/require-component-is.md b/docs/rules/require-component-is.md
index dd9ad27fa..9e1e03882 100644
--- a/docs/rules/require-component-is.md
+++ b/docs/rules/require-component-is.md
@@ -1,33 +1,47 @@
-# require `v-bind:is` of `` elements (vue/require-component-is)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-component-is
+description: require `v-bind:is` of `` elements
+---
+# vue/require-component-is
+> require `v-bind:is` of `` elements
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-> You can use the same mount point and dynamically switch between multiple components using the reserved `` element and dynamically bind to its `is` attribute:
->
-> https://vuejs.org/v2/guide/components.html#Dynamic-Components
-
## :book: Rule Details
This rule reports the `` elements which do not have `v-bind:is` attributes.
-:-1: Examples of **incorrect** code for this rule:
-```html
-
-
+
+```vue
+
+
+
+
+
+
+
+
+
```
+
-:+1: Examples of **correct** code for this rule:
+::: warning Note
+You can use the same mount point and dynamically switch between multiple components using the reserved `` element and dynamically bind to its `is` attribute.
+:::
-```html
-
-
-```
## :wrench: Options
Nothing.
-## Related links
+## :books: Further reading
- [Guide - Dynamic Components](https://vuejs.org/v2/guide/components.html#Dynamic-Components)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-component-is.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-component-is.js)
diff --git a/docs/rules/require-default-prop.md b/docs/rules/require-default-prop.md
index 3fb467b7a..71bfacb10 100644
--- a/docs/rules/require-default-prop.md
+++ b/docs/rules/require-default-prop.md
@@ -1,51 +1,67 @@
-# require default value for props (vue/require-default-prop)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-default-prop
+description: require default value for props
+---
+# vue/require-default-prop
+> require default value for props
- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+## :book: Rule Details
+
This rule requires default value to be set for each props that are not marked as `required` (except `Boolean` props).
-## Rule Details
-
-Examples of **incorrect** code for this rule:
-
-```js
-props: {
- a: Number,
- b: [Number, String],
- c: [Boolean, Number],
- d: {
- type: Number
- },
- e: {
- type: Number,
- required: false
- }
-}
+
```
+
```
+
+
+## :wrench: Options
-## Related links
+Nothing.
+
+## :books: Further reading
- [Style guide - Prop definitions](https://vuejs.org/v2/style-guide/#Prop-definitions-essential)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-default-prop.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-default-prop.js)
diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index b68350601..d08ff1ff4 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -1,8 +1,17 @@
-# require prop type to be a constructor (vue/require-prop-type-constructor)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-prop-type-constructor
+description: require prop type to be a constructor
+---
+# vue/require-prop-type-constructor
+> require prop type to be a constructor
- :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.
+## :book: 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,46 +25,52 @@ 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
-
-Examples of **incorrect** code for this rule:
-
-```js
+
+```vue
+
```
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further reading
+
+- [Guide - Prop Validation](https://vuejs.org/v2/guide/components-props.html#Prop-Validation)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-prop-type-constructor.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-prop-type-constructor.js)
diff --git a/docs/rules/require-prop-types.md b/docs/rules/require-prop-types.md
index 568ffc6bc..18e5e8c7e 100644
--- a/docs/rules/require-prop-types.md
+++ b/docs/rules/require-prop-types.md
@@ -1,57 +1,69 @@
-# require type definitions in props (vue/require-prop-types)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-prop-types
+description: require type definitions in props
+---
+# vue/require-prop-types
+> require type definitions in props
- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-In committed code, prop definitions should always be as detailed as possible, specifying at least type(s).
-
## :book: Rule Details
This rule enforces that a `props` statement contains type definition.
-:-1: Examples of **incorrect** code for this rule:
-
-```js
-props: ['status']
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```js
-// Without options, just type reference
-props: {
- status: String
-}
-```
+In committed code, prop definitions should always be as detailed as possible, specifying at least type(s).
-```js
-// With options with type field
-props: {
- status: {
- type: String,
- required: true,
+
+```vue
+
```
+
## :wrench: Options
Nothing.
-## Related links
+## :books: Further reading
- [Style guide - Prop definitions](https://vuejs.org/v2/style-guide/#Prop-definitions-essential)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-prop-types.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-prop-types.js)
diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index a28826c2a..c8d5f20ec 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -1,39 +1,55 @@
-# enforce render function to always return value (vue/require-render-return)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-render-return
+description: enforce render function to always return value
+---
+# vue/require-render-return
+> enforce render function to always return value
- :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
+
+```vue
+
```
+
-```js
+
+```vue
+
```
-
-:+1: Examples of **correct** code for this rule:
-
-```js
-export default {
- render (h) {
- return h('div', 'hello')
- }
-}
-```
+
## :wrench: Options
Nothing.
+
+## :books: Further reading
+
+- [Guide - Render Functions & JSX](https://vuejs.org/v2/guide/render-function.html)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-render-return.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-render-return.js)
diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index 7a3b02c4d..a88bf94b3 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -1,31 +1,36 @@
-# require `v-bind:key` with `v-for` directives (vue/require-v-for-key)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-v-for-key
+description: require `v-bind:key` with `v-for` directives
+---
+# vue/require-v-for-key
+> require `v-bind:key` with `v-for` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-When `v-for` is written on custom components, it requires `v-bind:key` at the same time.
-On other elements, it's better that `v-bind:key` is written as well.
-
## :book: Rule Details
-This rule reports the elements which have `v-for` and do not have `v-bind:key`.
-
-This rule does not report custom components.
-It will be reported by [valid-v-for] rule.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
+This rule reports the elements which have `v-for` and do not have `v-bind:key` with exception to custom components.
+
+
+```vue
+
+
+
+
+
+
```
+
-:+1: Examples of **correct** code for this rule:
-
-```html
-
-```
+::: warning Note
+This rule does not report missing `v-bind:key` on custom components.
+It will be reported by [valid-v-for](./valid-v-for.md) rule.
+:::
## :wrench: Options
@@ -35,7 +40,12 @@ Nothing.
- [valid-v-for](./valid-v-for.md)
-## Related links
+## :books: Further reading
- [Style guide - Keyed v-for](https://vuejs.org/v2/style-guide/#Keyed-v-for-essential)
- [Guide - v-for with a Component](https://vuejs.org/v2/guide/list.html#v-for-with-a-Component)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-v-for-key.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-v-for-key.js)
diff --git a/docs/rules/require-valid-default-prop.md b/docs/rules/require-valid-default-prop.md
index eee9692ce..21ca812fc 100644
--- a/docs/rules/require-valid-default-prop.md
+++ b/docs/rules/require-valid-default-prop.md
@@ -1,71 +1,82 @@
-# enforce props default values to be valid (vue/require-valid-default-prop)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-valid-default-prop
+description: enforce props default values to be valid
+---
+# vue/require-valid-default-prop
+> enforce props default values to be valid
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-This rule checks whether the default value of each prop is valid for the given type. It should report an error when default value for type `Array` or `Object` is not returned using function.
-
## :book: Rule Details
-:-1: Examples of **incorrect** code for this rule:
-
-```js
-props: {
- propA: {
- type: String,
- default: {}
- },
- propB: {
- type: String,
- default: []
- },
- propC: {
- type: Object,
- default: []
- },
- propD: {
- type: Array,
- default: []
- },
- propE: {
- type: Object,
- default: { message: 'hello' }
- }
-}
-```
-
-:+1: Examples of **correct** code for this rule:
+This rule checks whether the default value of each prop is valid for the given type. It should report an error when default value for type `Array` or `Object` is not returned using function.
-```js
-props: {
- // basic type check (`null` means accept any type)
- propA: Number,
- // multiple possible types
- propB: [String, Number],
- // a number with default value
- propD: {
- type: Number,
- default: 100
- },
- // object/array defaults should be returned from a factory function
- propE: {
- type: Object,
- default() {
- return { message: 'hello' }
- }
- },
- propF: {
- type: Array,
- default() {
- return []
+
+```vue
+
```
+
## :wrench: Options
Nothing.
-## Related links
+## :books: Further reading
- [Guide - Prop Validation](https://vuejs.org/v2/guide/components-props.html#Prop-Validation)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-valid-default-prop.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-valid-default-prop.js)
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index 761db13a1..e05eb57e7 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -1,4 +1,11 @@
-# enforce that a return statement is present in computed property (vue/return-in-computed-property)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/return-in-computed-property
+description: enforce that a return statement is present in computed property
+---
+# vue/return-in-computed-property
+> enforce that a return statement is present in computed property
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -6,41 +13,80 @@
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
-This rule has an object option:
-- `"treatUndefinedAsUnspecified"`: `true` (default) disallows implicitly returning undefined with a `return;` statement.
-
```json
{
- "vue/return-in-computed-property": [2, {
+ "vue/return-in-computed-property": ["error", {
"treatUndefinedAsUnspecified": true
}]
}
```
+
+This rule has an object option:
+- `"treatUndefinedAsUnspecified"`: `true` (default) disallows implicitly returning undefined with a `return` statement.
+
+### `treatUndefinedAsUnspecified: false`
+
+
+```vue
+
+```
+
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/return-in-computed-property.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/return-in-computed-property.js)
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index 45545ea4d..450f4d725 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -1,32 +1,20 @@
-# enforce consistent indentation in `
```
+
+
+## :wrench: Options
+
+This rule has some options.
+
+```json
+{
+ "vue/script-indent": ["error", TYPE, {
+ "baseIndent": 0,
+ "switchCase": 0,
+ "ignores": []
+ }]
+}
+```
+
+- `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.
+- `baseIndent` (`integer`) ... The multiplier of indentation for top-level statements. Default is `0`.
+- `switchCase` (`integer`) ... The multiplier of indentation for `case`/`default` clauses. Default is `0`.
+- `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.
-:+1: Examples of **correct** code for this rule:
+::: warning Note
+This rule only checks `.vue` files and does not interfere with other `.js` files. Unfortunately the default `indent` rule when turned on will try to lint both, so in order to make them complementary you can use `overrides` setting and disable `indent` rule on `.vue` files:
+:::
+
+```json
+{
+ "rules": {
+ "vue/script-indent": ["error", 4, { "baseIndent": 1 }]
+ },
+ "overrides": [
+ {
+ "files": ["*.vue"],
+ "rules": {
+ "indent": "off"
+ }
+ }
+ ]
+}
+```
-```js
-/*eslint vue/script-indent: ["error", 2, {"baseIndent": 1}]*/
+### `2, "baseIndent": 1`
+
+```vue
```
+
-## Important note
-
-This rule only checks `.vue` files and does not interfere with other `.js` files. Unfortunately the default `indent` rule when turned on will try to lint both, so in order to make them complementary you can use `overrides` setting and disable `indent` rule on `.vue` files:
-
-```
-"rules": {
- "vue/script-indent": ["error", 4, { "baseIndent": 1 }]
-},
-"overrides": [
- {
- "files": ["*.vue"],
- "rules": {
- "indent": "off"
- }
- }
-]
-```
-
-## Related rules
+## :couple: Related rules
- [indent](https://eslint.org/docs/rules/indent)
- [vue/html-indent](./html-indent.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/script-indent.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/script-indent.js)
diff --git a/docs/rules/singleline-html-element-content-newline.md b/docs/rules/singleline-html-element-content-newline.md
index 0ad75380d..dcb6de9a8 100644
--- a/docs/rules/singleline-html-element-content-newline.md
+++ b/docs/rules/singleline-html-element-content-newline.md
@@ -1,4 +1,11 @@
-# require a line break before and after the contents of a singleline element (vue/singleline-html-element-content-newline)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/singleline-html-element-content-newline
+description: require a line break before and after the contents of a singleline element
+---
+# vue/singleline-html-element-content-newline
+> require a line break before and after the contents of a singleline element
- :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.
@@ -8,36 +15,36 @@
This rule enforces a line break before and after the contents of a singleline element.
-:-1: Examples of **incorrect** code:
-
-```html
-
+
+
+
```
+
## :wrench: Options
@@ -55,48 +62,38 @@ This rule enforces a line break before and after the contents of a singleline el
- `ignores` ... the configuration for element names to ignore line breaks style.
default `["pre", "textarea"]`
-:-1: Examples of **incorrect** code for `{ignoreWhenNoAttributes: false}`:
-
-```html
-/* eslint vue/singleline-html-element-content-newline: ["error", { "ignoreWhenNoAttributes": false}] */
-
-
-
-
+
+
```
+
-:+1: Examples of **correct** code for `ignores`:
-
-```html
-/* eslint vue/singleline-html-element-content-newline: ["error", { "ignores": ["VueComponent", "pre", "textarea"]}] */
+## :mag: Implementation
-content
-
-content
-```
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/singleline-html-element-content-newline.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/singleline-html-element-content-newline.js)
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index d0603edd2..f3fb07328 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -1,65 +1,63 @@
-# enforce usage of `this` in template (vue/this-in-template)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/this-in-template
+description: disallow usage of `this` in template
+---
+# vue/this-in-template
+> disallow usage of `this` in template
- :gear: This rule is included in `"plugin:vue/recommended"`.
## :book: Rule Details
-:-1: Examples of **incorrect** code for this rule:
+This rule aims at preventing usage of `this` in Vue templates.
-```html
-
- {{ this.text }}
-
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-
- {{ text }}
-
+
+```vue
+
+
+
+ {{ text }}
+
+
+
+
+ {{ this.text }}
+
+
```
+
## :wrench: Options
-Default is set to `never`.
-
-```
-'vue/this-in-template': [2, 'always'|'never']
-```
-
-### `"always"` - Always use `this` while accessing properties from Vue
-
-:-1: Examples of **incorrect** code:
-
-```html
-
- {{ text }}
-
+```json
+{
+ "vue/this-in-template": ["error", "always" | "never"]
+}
```
+- `"always"` ... Always use `this` while accessing properties from Vue.
+- `"never"` (default) ... Never use `this` keyword in expressions.
-:+1: Examples of **correct** code`:
+### `"always"`
-```html
-
- {{ this.text }}
-
+
+```vue
+
+
+
+ {{ this.text }}
+
+
+
+
+ {{ text }}
+
+
```
+
-### `"never"` - Never use `this` keyword in expressions
+## :mag: Implementation
-:-1: Examples of **incorrect** code:
-
-```html
-
- {{ this.text }}
-
-```
-
-:+1: Examples of **correct** code:
-
-```html
-
- {{ text }}
-
-```
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/this-in-template.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/this-in-template.js)
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index a3e9bb136..fc0c3303b 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -1,27 +1,49 @@
-# enforce usage of `exact` modifier on `v-on` (vue/use-v-on-exact)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/use-v-on-exact
+description: enforce usage of `exact` modifier on `v-on`
+---
+# vue/use-v-on-exact
+> enforce usage of `exact` modifier on `v-on`
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-This rule enforce usage of `exact` modifier on `v-on` when there is another `v-on` with modifier.
+## :book: Rule Details
-:+1: Examples of **correct** code for this rule:
+This rule enforce usage of `exact` modifier on `v-on` when there is another `v-on` with modifier.
-```html
+
+```vue
+
+
+
+
```
+
-:-1: Examples of **incorrect** code for this rule:
+## :wrench: Options
-```html
-
-
-
+```json
+{
+ "vue/use-v-on-exact": ["error"]
+}
```
-## Related rules
+## :couple: Related rules
- [vue/v-on-style](./v-on-style.md)
- [vue/valid-v-on](./valid-v-on.md)
+
+## :books: Further reading
+
+- [Guide - .exact Modifier](https://vuejs.org/v2/guide/events.html#exact-Modifier)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/use-v-on-exact.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/use-v-on-exact.js)
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index b314c34d2..788dc5677 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -1,41 +1,62 @@
-# enforce `v-bind` directive style (vue/v-bind-style)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/v-bind-style
+description: enforce `v-bind` directive style
+---
+# vue/v-bind-style
+> enforce `v-bind` directive style
- :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:
+This rule enforces `v-bind` directive style which you should use shorthand or long form.
+
+
+```vue
+
+
+
-```html
-
+
+
+
```
+
-:+1: Examples of **correct** code for this rule:
+## :wrench: Options
+Default is set to `shorthand`.
-```html
-
+```json
+{
+ "vue/v-bind-style": ["error", "shorthand" | "longform"]
+}
```
-:-1: Examples of **incorrect** code for this rule with `"longform"` option:
+- `"shorthand"` (default) ... requires using shorthand.
+- `"longform"` ... requires using long form.
-```html
-
-```
+### `"longform"`
-:+1: Examples of **correct** code for this rule with `"longform"` option:
+
+```vue
+
+
+
-```html
-
+
+
+
```
+
-## :wrench: Options
+## :books: Further reading
-- `"shorthand"` (default) ... requires using shorthand.
-- `"longform"` ... requires using long form.
+- [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)
-## Related links
+## :mag: Implementation
-- [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-bind-style.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-bind-style.js)
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index ebf2f4f45..6c7caf96e 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -1,41 +1,62 @@
-# enforce `v-on` directive style (vue/v-on-style)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/v-on-style
+description: enforce `v-on` directive style
+---
+# vue/v-on-style
+> enforce `v-on` directive style
- :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:
+This rule enforces `v-on` directive style which you should use shorthand or long form.
+
+
+```vue
+
+
+
-```html
-
+
+
+
```
+
-:+1: Examples of **correct** code for this rule:
+## :wrench: Options
+Default is set to `shorthand`.
-```html
-
+```json
+{
+ "vue/v-on-style": ["error", "shorthand" | "longform"]
+}
```
-:-1: Examples of **incorrect** code for this rule with `"longform"` option:
+- `"shorthand"` (default) ... requires using shorthand.
+- `"longform"` ... requires using long form.
-```html
-
-```
+### `"longform"`
-:+1: Examples of **correct** code for this rule with `"longform"` option:
+
+```vue
+
+
+
-```html
-
+
+
+
```
+
-## :wrench: Options
+## :books: Further reading
-- `"shorthand"` (default) ... requires using shorthand.
-- `"longform"` ... requires using long form.
+- [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)
-## Related links
+## :mag: Implementation
-- [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-on-style.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-on-style.js)
diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index 2f4b24ff4..4878c8ea2 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -1,4 +1,11 @@
-# enforce valid template root (vue/valid-template-root)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-template-root
+description: enforce valid template root
+---
+# vue/valid-template-root
+> enforce valid template root
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -8,93 +15,53 @@ This rule checks whether every template root is valid.
This rule reports the template root in the following cases:
-- The root is nothing. E.g. ``.
-- The root is text. E.g. `hello`.
-- The root is multiple elements. E.g. `
one
two
`.
-- The root element has `v-for` directives. E.g. `
{{x}}
`.
-- The root element is `` or `` elements. E.g. `hello`.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```js
-template: ''
+
+```vue
+
+
```
+
-```html
-
-
+
+```vue
+
+Lorem ipsum
```
+
-```js
-template: `
-
+
```
+
## :wrench: Options
Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-template-root.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-template-root.js)
diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index bf3ecacf4..8078cd7fd 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -1,4 +1,11 @@
-# enforce valid `v-bind` directives (vue/valid-v-bind)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-bind
+description: enforce valid `v-bind` directives
+---
+# vue/valid-v-bind
+> enforce valid `v-bind` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -13,24 +20,26 @@ This rule reports `v-bind` directives in the following cases:
This rule does not report `v-bind` directives which do not have their argument (E.g. ``) because it's valid if the attribute value is an object.
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
```
+
-:+1: Examples of **correct** code for this rule:
-
-```html
-
-
-
-
-```
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
## :wrench: Options
@@ -42,3 +51,8 @@ Nothing.
[no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-bind.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-bind.js)
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index 4b7b9a4a1..64aabba67 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/docs/rules/valid-v-cloak.md
@@ -1,4 +1,11 @@
-# enforce valid `v-cloak` directives (vue/valid-v-cloak)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-cloak
+description: enforce valid `v-cloak` directives
+---
+# vue/valid-v-cloak
+> enforce valid `v-cloak` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -12,20 +19,25 @@ This rule reports `v-cloak` directives in the following cases:
- The directive has that modifier. E.g. ``
- The directive has that attribute value. E.g. ``
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-
+
+```vue
+
+
+
+
+
+
+
+
+
```
+
## :wrench: Options
Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-cloak.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-cloak.js)
diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index a73340085..dfe7d99de 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -1,4 +1,11 @@
-# enforce valid `v-else-if` directives (vue/valid-v-else-if)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-else-if
+description: enforce valid `v-else-if` directives
+---
+# vue/valid-v-else-if
+> enforce valid `v-else-if` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -14,22 +21,24 @@ This rule reports `v-else-if` directives in the following cases:
- The directive is on the elements that the previous element don't have `v-if`/`v-else-if` directives. E.g. ``
- The directive is on the elements which have `v-if`/`v-else` directives. E.g. ``
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
+
+```vue
+
+
+
+
+
+
+
+
+
+
```
+
-:+1: Examples of **correct** code for this rule:
-
-```html
-
-
-```
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
## :wrench: Options
@@ -42,6 +51,11 @@ Nothing.
- [no-parsing-error]
-[valid-v-if]: valid-v-if.md
+[valid-v-if]: valid-v-if.md
[valid-v-else]: valid-v-else.md
-[no-parsing-error]: no-parsing-error.md
+[no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-else-if.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-else-if.js)
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index 5c63b1554..7092b3225 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -1,4 +1,11 @@
-# enforce valid `v-else` directives (vue/valid-v-else)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-else
+description: enforce valid `v-else` directives
+---
+# vue/valid-v-else
+> enforce valid `v-else` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -14,20 +21,20 @@ This rule reports `v-else` directives in the following cases:
- The directive is on the elements that the previous element don't have `v-if`/`v-if-else` directives. E.g. ``
- The directive is on the elements which have `v-if`/`v-if-else` directives. E.g. ``
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-
-
+
+```vue
+
+
+
+
+
+
+
+
+
+
```
+
## :wrench: Options
@@ -40,6 +47,11 @@ Nothing.
- [no-parsing-error]
-[valid-v-if]: valid-v-if.md
-[valid-v-else-if]: valid-v-else-if.md
-[no-parsing-error]: no-parsing-error.md
+[valid-v-if]: valid-v-if.md
+[valid-v-else-if]: valid-v-else-if.md
+[no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-else.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-else.js)
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index 13f8e9ded..9d4a5c78f 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -1,4 +1,11 @@
-# enforce valid `v-for` directives (vue/valid-v-for)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-for
+description: enforce valid `v-for` directives
+---
+# vue/valid-v-for
+> enforce valid `v-for` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -14,45 +21,47 @@ This rule reports `v-for` directives in the following cases:
- If the element which has the directive is a custom component, the component does not have `v-bind:key` directive. E.g. ``
- The `v-bind:key` directive does not use the variables which are defined by the `v-for` directive. E.g. ``
-If the element which has the directive is a reserved element, this rule does not report even if the element does not have `v-bind:key` directive because it's not fatal error. [require-v-for-key] rule reports it.
+If the element which has the directive is a reserved element, this rule does not report it even if the element does not have `v-bind:key` directive because it's not fatal error. [require-v-for-key] rule reports it.
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+::: warning Note
This rule does not check syntax errors in directives. [no-parsing-error] rule reports it.
The following cases are syntax errors:
-- The directive's value is not the form `alias in expr`. E.g. ``
-- The alias is not LHS. E.g. ``
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
-
-
-
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-
-
-
-```
+- The directive's value isn't `alias in expr`. E.g. ``
+- The alias isn't LHS. E.g. ``
+:::
## :wrench: Options
@@ -66,3 +75,8 @@ Nothing.
[require-v-for-key]: require-v-for-key.md
[no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-for.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-for.js)
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index d562b6754..37125ab17 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -1,4 +1,11 @@
-# enforce valid `v-html` directives (vue/valid-v-html)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-html
+description: enforce valid `v-html` directives
+---
+# vue/valid-v-html
+> enforce valid `v-html` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -12,21 +19,23 @@ This rule reports `v-html` directives in the following cases:
- The directive has that modifier. E.g. ``
- The directive does not have that attribute value. E.g. ``
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
+
+```vue
+
+
+
+
+
+
+
+
+
```
+
-:+1: Examples of **correct** code for this rule:
-
-```html
-
-```
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
## :wrench: Options
@@ -38,3 +47,8 @@ Nothing.
[no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-html.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-html.js)
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index 53c42f426..023de85fd 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -1,4 +1,11 @@
-# enforce valid `v-if` directives (vue/valid-v-if)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-if
+description: enforce valid `v-if` directives
+---
+# vue/valid-v-if
+> enforce valid `v-if` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -13,31 +20,33 @@ This rule reports `v-if` directives in the following cases:
- The directive does not have that attribute value. E.g. ``
- The directive is on the elements which have `v-else`/`v-else-if` directives. E.g. ``
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
-
-
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
```
+
-:+1: Examples of **correct** code for this rule:
-
-```html
-
-
-
-```
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
## :wrench: Options
@@ -50,6 +59,11 @@ Nothing.
- [no-parsing-error]
-[valid-v-else]: valid-v-else.md
+[valid-v-else]: valid-v-else.md
[valid-v-else-if]: valid-v-else-if.md
-[no-parsing-error]: no-parsing-error.md
+[no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-if.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-if.js)
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index 2661c6b36..7d59a1588 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -1,4 +1,11 @@
-# enforce valid `v-model` directives (vue/valid-v-model)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-model
+description: enforce valid `v-model` directives
+---
+# vue/valid-v-model
+> enforce valid `v-model` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -16,32 +23,34 @@ This rule reports `v-model` directives in the following cases:
- The directive is on `` elements which their types are `file`. E.g. ``
- The directive's reference is iteration variables. E.g. ``
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
-
-
-
-
-
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
+
-:+1: Examples of **correct** code for this rule:
-
-```html
-
-
-
-
-
-
-
-```
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
## :wrench: Options
@@ -51,5 +60,9 @@ Nothing.
- [no-parsing-error]
-
[no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-model.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-model.js)
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index 02bc8ba93..e9eaa5a86 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -1,4 +1,11 @@
-# enforce valid `v-on` directives (vue/valid-v-on)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-on
+description: enforce valid `v-on` directives
+---
+# vue/valid-v-on
+> enforce valid `v-on` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -12,52 +19,62 @@ This rule reports `v-on` directives in the following cases:
- The directive has invalid modifiers. E.g. ``
- The directive does not have that attribute value and any verb modifiers. E.g. ``
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
-
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
+
-:+1: Examples of **correct** code for this rule:
-
-```html
-
-
-
-
-
-
-```
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
## :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.
-```html
-
-
+### `"modifiers": ["foo"]`
+
+
+```vue
+
+
+
+
```
+
## :couple: Related rules
- [no-parsing-error]
-
[no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-on.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-on.js)
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index 0c3aefb9b..fbeeb09e4 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -1,4 +1,11 @@
-# enforce valid `v-once` directives (vue/valid-v-once)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-once
+description: enforce valid `v-once` directives
+---
+# vue/valid-v-once
+> enforce valid `v-once` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -12,20 +19,25 @@ This rule reports `v-once` directives in the following cases:
- The directive has that modifier. E.g. ``
- The directive has that attribute value. E.g. ``
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-
+
+```vue
+
+
+
+
+
+
+
+
+
```
+
## :wrench: Options
Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-once.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-once.js)
diff --git a/docs/rules/valid-v-pre.md b/docs/rules/valid-v-pre.md
index 4b36030cb..75a21c896 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -1,4 +1,11 @@
-# enforce valid `v-pre` directives (vue/valid-v-pre)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-pre
+description: enforce valid `v-pre` directives
+---
+# vue/valid-v-pre
+> enforce valid `v-pre` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -12,20 +19,25 @@ This rule reports `v-pre` directives in the following cases:
- The directive has that modifier. E.g. ``
- The directive has that attribute value. E.g. ``
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-
+
+```vue
+
+
+
+
+
+
+
+
+
```
+
## :wrench: Options
Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-pre.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-pre.js)
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index 5742c76b7..fe4d09093 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -1,4 +1,11 @@
-# enforce valid `v-show` directives (vue/valid-v-show)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-show
+description: enforce valid `v-show` directives
+---
+# vue/valid-v-show
+> enforce valid `v-show` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -12,21 +19,23 @@ This rule reports `v-show` directives in the following cases:
- The directive has that modifier. E.g. ``
- The directive does not have that attribute value. E.g. ``
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
+
+```vue
+
+
+
+
+
+
+
+
+
```
+
-:+1: Examples of **correct** code for this rule:
-
-```html
-
-```
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
## :wrench: Options
@@ -36,5 +45,9 @@ Nothing.
- [no-parsing-error]
-
[no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-show.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-show.js)
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index df777712a..759677c06 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -1,4 +1,11 @@
-# enforce valid `v-text` directives (vue/valid-v-text)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-text
+description: enforce valid `v-text` directives
+---
+# vue/valid-v-text
+> enforce valid `v-text` directives
- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
@@ -12,21 +19,23 @@ This rule reports `v-text` directives in the following cases:
- The directive has that modifier. E.g. ``
- The directive does not have that attribute value. E.g. ``
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-
-
-
+
+```vue
+
+
+
+
+
+
+
+
+
```
+
-:+1: Examples of **correct** code for this rule:
-
-```html
-
-```
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
## :wrench: Options
@@ -36,5 +45,9 @@ Nothing.
- [no-parsing-error]
-
[no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-text.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-text.js)
diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
new file mode 100644
index 000000000..cccbdb37f
--- /dev/null
+++ b/docs/user-guide/README.md
@@ -0,0 +1,215 @@
+# User Guide
+
+## :cd: Installation
+
+Via `vue-cli` (**Recommended**):
+```bash
+vue add @vue/cli-plugin-eslint
+```
+
+Via [npm](https://www.npmjs.com/):
+```bash
+npm install --save-dev eslint eslint-plugin-vue@next
+```
+
+Via [yarn](https://yarnpkg.com/):
+```bash
+yarn add -D eslint eslint-plugin-vue@next
+```
+
+::: tip Requirements
+- ESLint v5.0.0 or later
+- Node.js v6.5.0 or later
+:::
+
+## :book: Usage
+
+### Configuration
+
+Use `.eslintrc.*` file to configure rules. See also: [http://eslint.org/docs/user-guide/configuring](http://eslint.org/docs/user-guide/configuring).
+
+Example **.eslintrc.js**:
+
+```js
+module.exports = {
+ extends: [
+ // add more generic rulesets here, such as:
+ // 'eslint:recommended',
+ 'plugin:vue/recommended'
+ ],
+ rules: {
+ // override/add rules settings here, such as:
+ // 'vue/no-unused-vars': 'error'
+ }
+}
+```
+
+See [the rule list](../rules/README.md) to get the `extends` & `rules` that this plugin provides.
+
+:::warning Reporting rules
+By default all rules from **base** and **essential** categories report ESLint errors. Other rules - because they're not covering potential bugs in the application report warnings. What does it mean? By default - nothing, but if you want - you can set up a treshold and break the build after a certain amount of warnings, instead of any. More informations [here](https://eslint.org/docs/user-guide/command-line-interface#handling-warnings).
+:::
+
+### Running ESLint from command line
+
+If you want to run `eslint` from command line, make sure you include the `.vue` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern because ESLint targets only `.js` files by default.
+
+Examples:
+
+```bash
+eslint --ext .js,.vue src
+eslint "src/**/*.{js,vue}"
+```
+
+::: tip
+If you installed [@vue/cli-plugin-eslint](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint) you should have `lint` script added in your `package.json`. That means you can just run `yarn lint` or `npm run lint`.
+:::
+
+#### How to use custom parser?
+
+If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/package/babel-eslint) or [typescript-eslint-parser](https://www.npmjs.com/package/typescript-eslint-parser), you have to use `parserOptions.parser` option instead of `parser` option. Because this plugin requires [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) to parse `.vue` files, so this plugin doesn't work if you overwrote `parser` option.
+
+```diff
+- "parser": "babel-eslint",
+ "parserOptions": {
++ "parser": "babel-eslint",
+ "sourceType": "module"
+ }
+```
+
+### How ESLint detects components?
+
+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.:
+
+```js
+// @vue/component
+const CustomComponent = {
+ name: 'custom-component',
+ template: ''
+}
+```
+
+```js
+Vue.component('AsyncComponent', (resolve, reject) => {
+ setTimeout(() => {
+ // @vue/component
+ resolve({
+ name: 'async-component',
+ template: ''
+ })
+ }, 500)
+})
+```
+
+### Disabling rules via ``
+
+You can use ``-like HTML comments in `` of `.vue` files to disable a certain rule temporarily.
+
+For example:
+
+```vue
+
+
+
+
+
+```
+
+If you want to disallow `eslint-disable` functionality in ``, disable [vue/comment-directive](../rules/comment-directive.md) rule.
+
+## :computer: Editor integrations
+
+#### Visual Studio Code
+
+Use [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension that Microsoft provides officially.
+
+You have to configure the `eslint.validate` option of the extension to check `.vue` files because the extension targets only `*.js` or `*.jsx` files by default.
+
+Example **.vscode/settings.json**:
+
+```json
+{
+ "eslint.validate": [
+ "javascript",
+ "javascriptreact",
+ { "language": "vue", "autoFix": true }
+ ]
+}
+```
+
+If you use `Vetur` plugin, set `"vetur.validation.template": false` to avoid default Vetur template validation. Check out [vetur documentation](https://vuejs.github.io/vetur/linting-error.html) for more info.
+
+#### Sublime Text
+
+Use [SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint) extension that SublimeLinter provides for eslint.
+
+You have to open command-palette via `cmd/ctrl+shift+p` and type `Preferences: SublimeLinter Settings`, paste to the config on the right side:
+
+```json
+{
+ "linters": {
+ "eslint": {
+ "selector": "text.html.vue, source.js - meta.attribute-with-value"
+ }
+ }
+}
+```
+
+#### Atom editor
+
+You need to go into `Settings -> Packages -> linter-eslint`, under the option "List of scopes to run eslint on", add `text.html.vue`. You may need to restart Atom.
+
+#### IntelliJ IDEA / JetBrains WebStorm
+
+In the **Settings/Preferences** dialog (`Ctrl+Alt+S`), choose JavaScript under **Languages and Frameworks** and then choose **ESLint** under **Code Quality Tools**.
+On the **ESLint page** that opens, select the *Enable* checkbox.
+
+If your ESLint configuration is updated (manually or from your version control), open it in the editor and choose **Apply ESLint Code Style Rules** on the context menu.
+
+read more: [JetBrains - ESLint](https://www.jetbrains.com/help/idea/eslint.html)
+
+## :question: FAQ
+
+### What is the "Use the latest vue-eslint-parser" error?
+
+The most rules of `eslint-plugin-vue` require `vue-eslint-parser` to check `` 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:
+
+```diff
+- "parser": "babel-eslint",
+ "parserOptions": {
++ "parser": "babel-eslint",
+ "ecmaVersion": 2017,
+ "sourceType": "module"
+ }
+```
+
+See also: "[Use together with custom parsers](#use-together-with-custom-parsers)" section.
+
+### 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 `