vuejs · armano2 · Nov 12, 2018 · Nov 12, 2018 · Nov 12, 2018 · Nov 13, 2018
diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
@@ -7,21 +7,27 @@
         class="eslint-code-block"
         filename="example.vue"
         language="html"
+        :preprocess="preprocess"
+        :postprocess="postprocess"
         dark
-        fix
+        :fix="fix"
     />
 </template>
 
 <script>
 // https://github.com/vuejs/vuepress/issues/451
 import EslintEditor from '../../../node_modules/vue-eslint-editor'
-import { rules } from '../../../'
+import { rules, processors } from '../../../'
 
 export default {
   name: 'ESLintCodeBlock',
   components: { EslintEditor },
 
   props: {
+    fix: {
+      type: Boolean,
+      default: false
+    },
     rules: {
       type: Object,
       default () {
@@ -32,7 +38,9 @@ export default {
 
   data () {
     return {
-      linter: null
+      linter: null,
+      preprocess: processors['.vue'].preprocess,
+      postprocess: processors['.vue'].postprocess
     }
   },
 

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -4,9 +4,28 @@
  */
 'use strict'
 
-const uncategorizedRules = require('../../tools/lib/rules').filter(rule => !rule.meta.docs.category)
+const rules = require('../../tools/lib/rules')
 const categories = require('../../tools/lib/categories')
 
+const uncategorizedRules = rules.filter(rule => !rule.meta.docs.category && !rule.meta.deprecated)
+const deprecatedRules = rules.filter(rule => rule.meta.deprecated)
+
+const extraCategories = []
+if (uncategorizedRules.length > 0) {
+  extraCategories.push({
+    title: 'Uncategorized',
+    collapsable: false,
+    children: uncategorizedRules.map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
+  })
+}
+if (deprecatedRules.length > 0) {
+  extraCategories.push({
+    title: 'Deprecated',
+    collapsable: false,
+    children: deprecatedRules.map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
+  })
+}
+
 module.exports = {
   base: '/eslint-plugin-vue/',
   title: 'eslint-plugin-vue',
@@ -43,11 +62,7 @@ module.exports = {
         })),
 
         // Rules in no category.
-        {
-          title: 'Uncategorized',
-          collapsable: false,
-          children: uncategorizedRules.map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
-        }
+        ...extraCategories
       ],
 
       '/': ['/', '/user-guide/', '/developer-guide/', '/rules/']

diff --git a/docs/developer-guide/README.md b/docs/developer-guide/README.md
@@ -2,13 +2,13 @@
 
 Contributing is welcome.
 
-## 🐛 Bug reporting
+## :bug: Bug reporting
 
-If you think you’ve found a bug in ESLint, please [create a new issue](https://github.com/vuejs/eslint-plugin-vue/issues/new) or a pull request on GitHub.
+If you think you’ve found a bug in ESLint, please [create a new issue](https://github.com/vuejs/eslint-plugin-vue/issues/new?labels=&template=bug_report.md) or a pull request on GitHub.
 
 Please include as much detail as possible to help us properly address your issue. If we need to triage issues and constantly ask people for more detail, that’s time taken away from actually fixing issues. Help us be as efficient as possible by including a lot of detail in your issues.
 
-## ✨ Proposing a new rule or a rule change
+## :sparkles: Proposing a new rule or a rule change
 
 In order to add a new rule or a rule change, you should:
 
@@ -23,7 +23,7 @@ In order to add a new rule or a rule change, you should:
 
 We're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new [issue](https://github.com/vuejs/eslint-plugin-vue/issues), but first please make sure your question does not repeat previous ones.
 
-## 🔥 Working with rules
+## :fire: Working with rules
 
 Before you start writing new rule, please read the [official ESLint guide](https://eslint.org/docs/developer-guide/working-with-rules).
 

diff --git a/docs/rules/README.md b/docs/rules/README.md
@@ -40,9 +40,11 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  |
 | [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  |
 | [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  |
+| [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  |
 | [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |  |
 | [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  |
 | [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  |
+| [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: |
 | [vue/require-render-return](./require-render-return.md) | enforce render function to always return value |  |
 | [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives |  |
 | [vue/require-valid-default-prop](./require-valid-default-prop.md) | enforce props default values to be valid |  |
@@ -127,7 +129,11 @@ For example:
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
+| [vue/multiline-html-element-content-newline](./multiline-html-element-content-newline.md) | require a line break before and after the contents of a multiline element | :wrench: |
+| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute | :wrench: |
 | [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: |
+| [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md) | require a line break before and after the contents of a singleline element | :wrench: |
+| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |  |
 
 ## Deprecated
 

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
@@ -3,17 +3,40 @@
 - :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.
 
-## :wrench: Options
+## :book: Rule Details
 
-Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to be ignored
+<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
+```
+<template>
+  <!-- ✔ GOOD -->
+  <MyComponent my-prop="prop" />
 
+  <!-- ✘ BAD -->
+  <MyComponent myProp="prop" />
+</template>
 ```
-'vue/attribute-hyphenation': [2, 'always'|'never', { 'ignore': ['custom-prop'] }]
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/attribute-hyphenation": [2, "always" | "never", {
+    "ignore": []
+  }]
+}
 ```
 
-### `["error", "always"]` - Use hyphenated name. (It errors on upper case letters.)
+Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to be ignored
+
+- `"always"` (default) ... Use hyphenated name.
+- `"never"` ... Don't use hyphenated name except `data-`, `aria-` and `slot-scope`.
+- `"ignore"` ... Array of ignored names
+
+### `"always"`
+It errors on upper case letters.
 
-<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
+<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
 ```
 <template>
   <!-- ✔ GOOD -->
@@ -25,9 +48,10 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to
 ```
 </eslint-code-block>
 
-### `["error", "never"]` - Don't use hyphenated name. (It errors on hyphens except `data-`, `aria-` and `slot-scope`.)
+### `"never"`
+It errors on hyphens except `data-`, `aria-` and `slot-scope`.
 
-<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'never']}">
+<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never']}">
 ```
 <template>
   <!-- ✔ GOOD -->
@@ -42,9 +66,10 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to
 ```
 </eslint-code-block>
 
-### `["error", "never", { "ignore": ["custom-prop"] }]` - Don't use hyphenated name but allow custom attributes
+### `"never", { "ignore": ["custom-prop"] }` 
+Don't use hyphenated name but allow custom attributes
 
-<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'never', {'ignore': ['custom-prop']}]}">
+<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never', { ignore: ['custom-prop']}]}">
 ```
 <template>
   <!-- ✔ GOOD -->

diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
@@ -32,7 +32,7 @@ This rule aims to enforce ordering of component attributes. The default order is
 
 ### the default order
 
-<eslint-code-block :rules="{'vue/attributes-order': ['error']}">
+<eslint-code-block fix :rules="{'vue/attributes-order': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -80,11 +80,32 @@ This rule aims to enforce ordering of component attributes. The default order is
 ```
 </eslint-code-block>
 
-### 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']`
 
-<eslint-code-block :rules="{'vue/attributes-order': ['error', {order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
+<eslint-code-block fix :rules="{'vue/attributes-order': ['error', {order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -107,7 +128,7 @@ This rule aims to enforce ordering of component attributes. The default order is
 
 #### `[['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
 
-<eslint-code-block :rules="{'vue/attributes-order': ['error', {order: [['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
+<eslint-code-block fix :rules="{'vue/attributes-order': ['error', {order: [['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
 ```
 <template>
   <!-- ✓ GOOD -->

diff --git a/docs/rules/comment-directive.md b/docs/rules/comment-directive.md
@@ -22,7 +22,7 @@ ESLint doesn't provide any API to enhance `eslint-disable` functionality and ESL
 
 This rule sends all `eslint-disable`-like comments as errors to the post-process of the `.vue` file processor, then the post-process removes all `vue/comment-directive` errors and the reported errors in disabled areas.
 
-<eslint-code-block :rules="{'vue/comment-directive': ['error']}">
+<eslint-code-block :rules="{'vue/comment-directive': ['error'], 'vue/max-attributes-per-line': ['error']}">
 ```vue
 <template>
   <!-- eslint-disable-next-line vue/max-attributes-per-line -->

diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
@@ -12,11 +12,9 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 
 ```json
 {
-  "vue/component-name-in-template-casing": [
-    "error",
-    "PascalCase" | "kebab-case",
-    { "ignores": [] }
-  ]
+  "vue/component-name-in-template-casing": ["error", "PascalCase" | "kebab-case", { 
+    "ignores": []
+  }]
 }
 ```
 
@@ -26,7 +24,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 
 ### `"PascalCase"`
 
-<eslint-code-block :rules="{'vue/component-name-in-template-casing': ['error']}">
+<eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -42,7 +40,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 
 ### `"kebab-case"`
 
-<eslint-code-block :rules="{'vue/component-name-in-template-casing': ['error', 'kebab-case']}">
+<eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error', 'kebab-case']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -60,7 +58,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 
 ### `"PascalCase", { ignores: ["custom-element"] }`
 
-<eslint-code-block :rules="{'vue/component-name-in-template-casing': ['error', 'PascalCase', {ignores: ['custom-element']}]}">
+<eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error', 'PascalCase', {ignores: ['custom-element']}]}">
 ```
 <template>
   <!-- ✓ GOOD -->

diff --git a/docs/rules/html-closing-bracket-newline.md b/docs/rules/html-closing-bracket-newline.md
@@ -23,7 +23,7 @@ This rule enforces a line break (or no line break) before tag's closing brackets
 
 This rule aims to warn the right angle brackets which are at the location other than the configured location.
 
-<eslint-code-block :rules="{'vue/html-closing-bracket-newline': ['error']}">
+<eslint-code-block fix :rules="{'vue/html-closing-bracket-newline': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -55,17 +55,17 @@ This rule aims to warn the right angle brackets which are at the location other
 ```
 
 - `singleline` ... the configuration for single-line elements. It's a single-line element if the element does not have attributes or the last attribute is on the same line as the opening bracket.
-    - `"never"` ... disallow line breaks before the closing bracket. This is the default.
+    - `"never"` (default) ... disallow line breaks before the closing bracket.
     - `"always"` ... require one line break before the closing bracket.
 - `multiline` ... the configuration for multiline elements. It's a multiline element if the last attribute is not on the same line of the opening bracket.
     - `"never"` ... disallow line breaks before the closing bracket.
-    - `"always"` ... require one line break before the closing bracket. This is the default.
+    - `"always"` (default) ... require one line break before the closing bracket.
 
 Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-level of the closing brackets.
 
-### `{ "multiline": "never" }`
+### `"multiline": "never"`
 
-<eslint-code-block :rules="{'vue/html-closing-bracket-newline': ['error', { 'multiline': 'never' }]}">
+<eslint-code-block fix :rules="{'vue/html-closing-bracket-newline': ['error', { 'multiline': 'never' }]}">
 ```
 <template>
   <!-- ✓ GOOD -->

diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
@@ -7,7 +7,7 @@
 
 This rule aims to enforce consistent spacing style before closing brackets `>` of tags.
 
-<eslint-code-block :rules="{'vue/html-closing-bracket-spacing': ['error']}">
+<eslint-code-block fix :rules="{'vue/html-closing-bracket-spacing': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -53,9 +53,9 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
     - `"always"` ... requires one or more spaces.
     - `"never"` ... disallows spaces.
 
-### `{ "startTag": "always", "endTag": "always", "selfClosingTag": "always" }`
+### `"startTag": "always", "endTag": "always", "selfClosingTag": "always"`
 
-<eslint-code-block :rules="{'vue/html-closing-bracket-spacing': ['error', {startTag: 'always', endTag: 'always', selfClosingTag: 'always' }]}">
+<eslint-code-block fix :rules="{'vue/html-closing-bracket-spacing': ['error', {startTag: 'always', endTag: 'always', selfClosingTag: 'always' }]}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -70,7 +70,7 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
 ```
 </eslint-code-block>
 
-## :bookmark: Related rules
+## :couple: Related rules
 
 - [vue/no-multi-spaces](./no-multi-spaces.md)
 - [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md)

diff --git a/docs/rules/html-end-tags.md b/docs/rules/html-end-tags.md
@@ -7,7 +7,7 @@
 
 This rule aims to disallow lacking end tags.
 
-<eslint-code-block :rules="{'vue/html-end-tags': ['error']}">
+<eslint-code-block fix :rules="{'vue/html-end-tags': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->