Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New Rule vue/sort-keys #997

Merged
merged 7 commits into from Feb 16, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eslintignore
Expand Up @@ -2,7 +2,7 @@
/coverage
/node_modules
/tests/fixtures
/tests/integrations/*/node_modules
/tests/integrations/eslint-plugin-import
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

EsLint 6.7.0 changes eslintignore parsing. The previous one seems to have ignored the whole folder which I'm now explicitly doing. Otherwise, you get errors about eslint-plugin-ignore not being installed when running npm run lint after a clean install.


!.vuepress
/docs/.vuepress/dist
1 change: 1 addition & 0 deletions docs/rules/README.md
Expand Up @@ -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: |
Expand Down
109 changes: 109 additions & 0 deletions 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)
1 change: 1 addition & 0 deletions lib/index.js
Expand Up @@ -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'),
Expand Down