Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* 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 <otameshiyo23@gmail.com> Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>
- Loading branch information
Showing
7 changed files
with
1,573 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.