update

- require-v-for-key
- require-valid-default-prop
- return-in-computed-property

Author: armano2

docs/rules/require-v-for-key.md

@@ -12,20 +12,19 @@ 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
-<div v-for="todo in todos"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div
-  v-for="todo in todos"
-  :key="todo.id"
-/>
+<eslint-code-block :rules="{'vue/require-v-for-key': ['error']}">
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div
+    v-for="todo in todos"
+    :key="todo.id"
+  />
+  <!-- ✗ BAD -->
+  <div v-for="todo in todos"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

docs/rules/require-valid-default-prop.md

@@ -2,65 +2,64 @@
 
 - :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' }
+<eslint-code-block :rules="{'vue/require-valid-default-prop': ['error']}">
+```vue
+<script>
+export default {
+  props: {
+    /* ✓ GOOD */
+    // 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 []
+      }
+    },
+    /* ✗ BAD */
+    propA: {
+      type: String,
+      default: {}
+    },
+    propB: {
+      type: String,
+      default: []
+    },
+    propC: {
+      type: Object,
+      default: []
+    },
+    propD: {
+      type: Array,
+      default: []
+    },
+    propE: {
+      type: Object,
+      default: { message: 'hello' }
     }
-  },
-  propF: {
-    type: Array,
-    default() {
-      return []
-    }
-  }  
+  }
 }
+</script>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

docs/rules/return-in-computed-property.md

@@ -8,29 +8,34 @@ This rule enforces that a `return` statement is present in `computed` properties
 
 :-1: Examples of **incorrect** code for this rule:
 
-```js
-export default {
-  computed: {
-    foo () {},
-    bar: function () {}
-  }
-}
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```js
+<eslint-code-block :rules="{'vue/return-in-computed-property': ['error']}">
+```vue
+<script>
 export default {
   computed: {
+    /* ✓ GOOD */
     foo () {
-      return true
+      if (this.bar) {
+        return this.baz
+      } else {
+        return this.baf
+      }
     },
     bar: function () {
       return false
-    }
+    },
+    /* ✗ BAD */
+    baz () {
+      if (this.baf) {
+        return this.baf
+      }
+    },
+    baf: function () {}
   }
 }
+</script>
 ```
+</eslint-code-block>
 
 ## :wrench: Options