Skip to content

Commit e031275

Browse files
azat-ioazat-io
committed
feat: add sort-vue-attributes rule
1 parent 8ed4773 commit e031275

8 files changed

+1345
-5
lines changed

Diff for: ‎docs/rules/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -26,5 +26,6 @@ description: ESLint Plugin Perfectionist list of rules
2626
| [sort-objects](/rules/sort-objects) | enforce sorted objects | 🔧 |
2727
| [sort-svelte-attributes](/rules/sort-svelte-attributes) | enforce sorted Svelte attributes | 🔧 |
2828
| [sort-union-types](/rules/sort-union-types) | enforce sorted union types | 🔧 |
29+
| [sort-vue-attributes](/rules/sort-vue-attributes) | enforce sorted Vue attributes | 🔧 |
2930

3031
<!-- end auto-generated rules list -->

Diff for: ‎docs/rules/sort-vue-attributes.md

+187
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
---
2+
title: sort-vue-attributes
3+
description: ESLint Plugin Perfectionist rule which enforce sorted attributes in Vue elements
4+
---
5+
6+
# sort-vue-attributes
7+
8+
💼 This rule is enabled in the following [configs](/configs/): `recommended-alphabetical`, `recommended-line-length`, `recommended-natural`.
9+
10+
🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
11+
12+
<!-- end auto-generated rule header -->
13+
14+
## 📖 Rule Details
15+
16+
Enforce sorted attributes in Vue elements.
17+
18+
## 💡 Examples
19+
20+
::: code-group
21+
22+
```vue [Alphabetical and Natural Sorting]
23+
<!-- ❌ Incorrect -->
24+
<template>
25+
<v-avatar
26+
size="s"
27+
color="info"
28+
variant="circle"
29+
name="Jonah Jameson"
30+
></v-avatar>
31+
</template>
32+
33+
<!-- ✅ Correct -->
34+
<template>
35+
<v-avatar
36+
color="info"
37+
name="Jonah Jameson"
38+
size="s"
39+
variant="circle"
40+
></v-avatar>
41+
</template>
42+
```
43+
44+
```vue [Sorting by Line Length]
45+
<!-- ❌ Incorrect -->
46+
<template>
47+
<v-avatar
48+
size="s"
49+
color="info"
50+
variant="circle"
51+
name="Jonah Jameson"
52+
></v-avatar>
53+
</template>
54+
55+
<!-- ✅ Correct -->
56+
<template>
57+
<v-avatar
58+
name="Jonah Jameson"
59+
variant="circle"
60+
color="info"
61+
size="s"
62+
></v-avatar>
63+
</template>
64+
```
65+
66+
:::
67+
68+
## 🔧 Options
69+
70+
This rule accepts an options object with the following properties:
71+
72+
```ts
73+
type Group = 'multiline' | 'shorthand' | 'unknown'
74+
75+
interface Options {
76+
type?: 'alphabetical' | 'natural' | 'line-length'
77+
order?: 'asc' | 'desc'
78+
'ignore-case'?: boolean
79+
groups?: (Group | Group[])[]
80+
'custom-groups': { [key in T[number]]: string[] | string }
81+
}
82+
```
83+
84+
### type
85+
86+
<sub>(default: `'alphabetical'`)</sub>
87+
88+
- `alphabetical` - sort alphabetically.
89+
- `natural` - sort in natural order.
90+
- `line-length` - sort by code line length.
91+
92+
### order
93+
94+
<sub>(default: `'asc'`)</sub>
95+
96+
- `asc` - enforce properties to be in ascending order.
97+
- `desc` - enforce properties to be in descending order.
98+
99+
### ignore-case
100+
101+
<sub>(default: `false`)</sub>
102+
103+
Only affects alphabetical and natural sorting. When `true` the rule ignores the case-sensitivity of the order.
104+
105+
### groups
106+
107+
<sub>(default: `[]`)</sub>
108+
109+
You can set up a list of Vue attribute groups for sorting. Groups can be combined. There are predefined groups: `'multiline'`, `'shorthand'`.
110+
111+
### custom-groups
112+
113+
<sub>(default: `{}`)</sub>
114+
115+
You can define your own groups for Vue attributes. The [minimatch](https://github.com/isaacs/minimatch) library is used for pattern matching.
116+
117+
Example:
118+
119+
```
120+
{
121+
"custom-groups": {
122+
"callback": "on*"
123+
}
124+
}
125+
```
126+
127+
## ⚙️ Usage
128+
129+
:::info Important
130+
In order to start using this rule, you need to install additional dependencies:
131+
132+
- `vue-eslint-parser`
133+
134+
:::
135+
136+
::: code-group
137+
138+
```json [Legacy Config]
139+
// .eslintrc
140+
{
141+
"plugins": ["perfectionist"],
142+
"rules": {
143+
"perfectionist/sort-vue-attributes": [
144+
"error",
145+
{
146+
"type": "natural",
147+
"order": "asc",
148+
"groups": ["multiline", "unknown", "shorthand"]
149+
}
150+
]
151+
}
152+
}
153+
```
154+
155+
```js [Flat Config]
156+
// eslint.config.js
157+
import perfectionist from 'eslint-plugin-perfectionist'
158+
159+
export default [
160+
{
161+
plugins: {
162+
perfectionist,
163+
},
164+
rules: {
165+
'perfectionist/sort-vue-attributes': [
166+
'error',
167+
{
168+
type: 'natural',
169+
order: 'asc',
170+
groups: ['multiline', 'unknown', 'shorthand'],
171+
},
172+
],
173+
},
174+
},
175+
]
176+
```
177+
178+
:::
179+
180+
## 🚀 Version
181+
182+
Coming soon.
183+
184+
## 📚 Resources
185+
186+
- [Rule source](https://github.com/azat-io/eslint-plugin-perfectionist/blob/main/rules/sort-vue-attributes.ts)
187+
- [Test source](https://github.com/azat-io/eslint-plugin-perfectionist/blob/main/test/sort-vue-attributes.test.ts)

Diff for: ‎index.ts

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import sortSvelteAttributes, { RULE_NAME as sortSvelteAttributesName } from './rules/sort-svelte-attributes'
22
import sortAstroAttributes, { RULE_NAME as sortAstroAttributesName } from './rules/sort-astro-attributes'
33
import sortArrayIncludes, { RULE_NAME as sortArrayIncludesName } from './rules/sort-array-includes'
4-
import sortNamedImports, { RULE_NAME as sortNamedImportsName } from './rules/sort-named-imports'
4+
import sortVueAttributes, { RULE_NAME as sortVueAttributesName } from './rules/sort-vue-attributes'
55
import sortNamedExports, { RULE_NAME as sortNamedExportsName } from './rules/sort-named-exports'
6+
import sortNamedImports, { RULE_NAME as sortNamedImportsName } from './rules/sort-named-imports'
67
import sortObjectTypes, { RULE_NAME as sortObjectTypesName } from './rules/sort-object-types'
78
import sortUnionTypes, { RULE_NAME as sortUnionTypesName } from './rules/sort-union-types'
89
import sortInterfaces, { RULE_NAME as sortInterfacesName } from './rules/sort-interfaces'
910
import sortJsxProps, { RULE_NAME as sortJsxPropsName } from './rules/sort-jsx-props'
10-
import sortObjects, { RULE_NAME as sortObjectsName } from './rules/sort-objects'
11+
import sortExports, { RULE_NAME as sortExportsName } from './rules/sort-exports'
1112
import sortImports, { RULE_NAME as sortImportsName } from './rules/sort-imports'
13+
import sortObjects, { RULE_NAME as sortObjectsName } from './rules/sort-objects'
1214
import sortClasses, { RULE_NAME as sortClassesName } from './rules/sort-classes'
13-
import sortExports, { RULE_NAME as sortExportsName } from './rules/sort-exports'
1415
import sortEnums, { RULE_NAME as sortEnumsName } from './rules/sort-enums'
1516
import sortMaps, { RULE_NAME as sortMapsName } from './rules/sort-maps'
1617
import { SortOrder, SortType } from './typings'
@@ -94,6 +95,7 @@ let createConfigWithOptions = (options: {
9495
],
9596
[sortSvelteAttributesName]: ['error'],
9697
[sortAstroAttributesName]: ['error'],
98+
[sortVueAttributesName]: ['error'],
9799
[sortNamedExportsName]: ['error'],
98100
[sortNamedImportsName]: ['error'],
99101
[sortObjectTypesName]: ['error'],
@@ -132,6 +134,7 @@ export default {
132134
[sortObjectsName]: sortObjects,
133135
[sortSvelteAttributesName]: sortSvelteAttributes,
134136
[sortUnionTypesName]: sortUnionTypes,
137+
[sortVueAttributesName]: sortVueAttributes,
135138
},
136139
configs: {
137140
'recommended-alphabetical': createConfigWithOptions({

Diff for: ‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -62,13 +62,17 @@
6262
},
6363
"svelte-eslint-parser": {
6464
"optional": true
65+
},
66+
"vue-eslint-parser": {
67+
"optional": true
6568
}
6669
},
6770
"peerDependencies": {
6871
"astro-eslint-parser": "^0.14.0",
6972
"eslint": ">=8.0.0",
7073
"svelte": ">=3.0.0",
71-
"svelte-eslint-parser": "^0.32.0"
74+
"svelte-eslint-parser": "^0.32.0",
75+
"vue-eslint-parser": ">=9.0.0"
7276
},
7377
"dependencies": {
7478
"@typescript-eslint/utils": "^5.62.0",

Diff for: ‎pnpm-lock.yaml

+21-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎readme.md

+1
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@ export default [
155155
| [sort-objects](https://eslint-plugin-perfectionist.azat.io/rules/sort-objects) | enforce sorted objects | 🔧 |
156156
| [sort-svelte-attributes](https://eslint-plugin-perfectionist.azat.io/rules/sort-svelte-attributes) | enforce sorted Svelte attributes | 🔧 |
157157
| [sort-union-types](https://eslint-plugin-perfectionist.azat.io/rules/sort-union-types) | enforce sorted union types | 🔧 |
158+
| [sort-vue-attributes](https://eslint-plugin-perfectionist.azat.io/rules/sort-vue-attributes) | enforce sorted Vue attributes | 🔧 |
158159

159160
<!-- end auto-generated rules list -->
160161

0 commit comments

Comments
 (0)