New Rule vue/sort-keys (#997)

* sort keys

* fix for eslint 6.7

* ignore children/grandchildren

* more finegrained parent analysis

* expand the test

* Update docs/rules/sort-keys.md

Co-Authored-By: Yosuke Ota <[email protected]>

Co-authored-by: Yosuke Ota <[email protected]>

Author: loren138

.eslintignore

@@ -2,7 +2,7 @@
 /coverage
 /node_modules
 /tests/fixtures
-/tests/integrations/*/node_modules
+/tests/integrations/eslint-plugin-import
 
 !.vuepress
 /docs/.vuepress/dist

docs/rules/README.md

@@ -168,6 +168,7 @@ For example:
 | [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported |  |
 | [vue/require-name-property](./require-name-property.md) | require a name property in Vue components |  |
 | [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: |
+| [vue/sort-keys](./sort-keys.md) | enforce sort-keys within components after the top level details |  |
 | [vue/space-infix-ops](./space-infix-ops.md) | require spacing around infix operators | :wrench: |
 | [vue/space-unary-ops](./space-unary-ops.md) | enforce consistent spacing before or after unary operators | :wrench: |
 | [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: |

docs/rules/sort-keys.md

@@ -0,0 +1,109 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/sort-keys
+description: enforce sort-keys in a manner that is compatible with order-in-components
+---
+# vue/sort-keys
+> enforce sort-keys within components after the top level details
+
+This rule is almost the same rule as core [sorts-keys] rule but it will not error on top component properties allowing that order to be enforced with `order-in-components`.
+
+## Options
+
+```json
+{
+    "sort-keys": ["error", "asc", {
+        "caseSensitive": true,
+        "ignoreChildrenOf": ["model"],
+        "ignoreGrandchildrenOf": ["computed", "directives", "inject", "props", "watch"],
+        "minKeys": 2,
+        "natural": false
+  }]
+}
+```
+
+The 1st option is `"asc"` or `"desc"`.
+
+* `"asc"` (default) - enforce properties to be in ascending order.
+* `"desc"` - enforce properties to be in descending order.
+
+The 2nd option is an object which has 5 properties.
+
+* `caseSensitive` - if `true`, enforce properties to be in case-sensitive order. Default is `true`.
+* `ignoreChildrenOf` - an array of properties to ignore the children of.  Default is `["model"]`
+* `ignoreGrandchildrenOf` - an array of properties to ignore the grandchildren sort order. Default is `["computed", "directives", "inject", "props", "watch"]`
+* `minKeys` - Specifies the minimum number of keys that an object should have in order for the object's unsorted keys to produce an error. Default is `2`, which means by default all objects with unsorted keys will result in lint errors.
+* `natural` - if `true`, enforce properties to be in natural order. Default is `false`. Natural Order compares strings containing combination of letters and numbers in the way a human being would sort. It basically sorts numerically, instead of sorting alphabetically. So the number 10 comes after the number 3 in Natural Sorting.
+
+While using this rule, you may disable the normal `sort-keys` rule.  This rule will apply to plain js files as well as Vue component scripts.
+
+## :book: Rule Details
+
+This rule forces many dictionary properties to be in alphabetical order while allowing `order-in-components`, property details,
+and other similar fields not to be in alphabetical order.
+
+<eslint-code-block fix :rules="{'vue/sort-keys': ['error']}">
+
+```vue
+<script>
+/* ✓ GOOD */
+export default {
+  name: 'app',
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    propA: {
+      type: String,
+      default: 'abc',
+    },
+    propB: {
+      type: String,
+      default: 'abc',
+    },
+  },
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/sort-keys': ['error']}">
+
+```vue
+<script>
+/* ✗ BAD */
+export default {
+  name: 'app',
+  model: {
+    prop: 'checked',
+    event: 'change'
+  },
+  props: {
+    propB: {
+      type: String,
+      default: 'abc',
+    },
+    propA: {
+      type: String,
+      default: 'abc',
+    },
+  },
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :books: Further reading
+
+- [sorts-keys]
+
+[sort-keys]: https://eslint.org/docs/rules/sort-keys
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/sort-keys.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/sort-keys.js)

lib/index.js

@@ -78,6 +78,7 @@ module.exports = {
     'return-in-computed-property': require('./rules/return-in-computed-property'),
     'script-indent': require('./rules/script-indent'),
     'singleline-html-element-content-newline': require('./rules/singleline-html-element-content-newline'),
+    'sort-keys': require('./rules/sort-keys'),
     'space-infix-ops': require('./rules/space-infix-ops'),
     'space-unary-ops': require('./rules/space-unary-ops'),
     'static-class-names-order': require('./rules/static-class-names-order'),