update order-in-components

Author: mysticatea

docs/rules/order-in-components.md

@@ -3,76 +3,82 @@
 - :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'
+<eslint-code-block :rules="{'vue/order-in-components': ['error']}">
+```
+<script>
+/* ✓ GOOD */
+export default {
+  name: 'app',
+  props: {
+    propA: Number
+  },
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
   }
-},
-props: {
-  propA: Number,
 }
+</script>
 ```
+</eslint-code-block>
 
-Examples of **correct** code for this rule:
-
-```js
-
+<eslint-code-block :rules="{'vue/order-in-components': ['error']}">
+```
+<script>
+/* ✗ BAD */
 export default {
   name: 'app',
-  props: {
-    propA: Number,
-  },
   data () {
     return {
       msg: 'Welcome to Your Vue.js App'
     }
   },
+  props: {
+    propA: Number
+  }
 }
-
+</script>
 ```
-
-### Options
-
-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"
-  ]
-}]
+</eslint-code-block>
+
+## :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"
+    ]
+  }]
+}
 ```
 
-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`.
+- `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.
+
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Component/instance options order](https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended)