Skip to content

Commit 5e0bd2c

Browse files
ItMagaItMaga
authored
Add padding-lines-in-component-definition rule (#2052)
1 parent abdd93d commit 5e0bd2c

6 files changed

+1765
-0
lines changed

Diff for: ‎docs/rules/index.md

+1
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,7 @@ For example:
253253
| [vue/no-v-text](./no-v-text.md) | disallow use of v-text | | :hammer: |
254254
| [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: | :lipstick: |
255255
| [vue/padding-line-between-tags](./padding-line-between-tags.md) | require or disallow newlines between sibling tags in template | :wrench: | :lipstick: |
256+
| [vue/padding-lines-in-component-definition](./padding-lines-in-component-definition.md) | require or disallow padding lines in component definition | :wrench: | :lipstick: |
256257
| [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
257258
| [vue/prefer-separate-static-class](./prefer-separate-static-class.md) | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
258259
| [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |

Diff for: ‎docs/rules/padding-lines-in-component-definition.md

+163
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/padding-lines-in-component-definition
5+
description: require or disallow padding lines in component definition
6+
---
7+
# vue/padding-lines-in-component-definition
8+
9+
> require or disallow padding lines in component definition
10+
11+
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
12+
- :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.
13+
14+
## :book: Rule Details
15+
16+
This rule requires or disallows blank lines in the component definition. Properly blank lines help developers improve code readability and code style flexibility.
17+
18+
<eslint-code-block fix :rules="{'vue/padding-lines-in-component-definition': ['error']}">
19+
20+
```vue
21+
<script>
22+
/* ✗ BAD */
23+
export default {
24+
props: {
25+
modelValue: {
26+
type: String,
27+
default: '',
28+
},
29+
},
30+
data() {
31+
return {
32+
count: 0,
33+
};
34+
}
35+
}
36+
</script>
37+
```
38+
39+
</eslint-code-block>
40+
41+
<eslint-code-block fix :rules="{'vue/padding-lines-in-component-definition': ['error']}">
42+
43+
```vue
44+
<script>
45+
/* ✓ GOOD */
46+
export default {
47+
props: {
48+
modelValue: {
49+
type: String,
50+
default: '',
51+
},
52+
},
53+
54+
data() {
55+
return {
56+
count: 0,
57+
};
58+
}
59+
}
60+
</script>
61+
```
62+
63+
</eslint-code-block>
64+
65+
## :wrench: Options
66+
67+
```json
68+
{
69+
"vue/padding-lines-in-component-definition": ["error", {
70+
"betweenOptions": "always" | "never",
71+
72+
"withinOption": {
73+
"props": {
74+
"betweenItems": "always" | "never" | "ignore",
75+
"withinEach": "always" | "never" | "ignore",
76+
} | "always" | "never" | "ignore", // shortcut to set both
77+
78+
"data": {
79+
"betweenItems": "always" | "never" | "ignore",
80+
"withinEach": "always" | "never" | "ignore",
81+
} | "always" | "never" | "ignore" // shortcut to set both
82+
83+
// ... all options
84+
} | "always" | "never" | "ignore",
85+
86+
"groupSingleLineProperties": true | false
87+
}]
88+
}
89+
```
90+
91+
- `betweenOptions` ... Setting padding lines between options. default `always`
92+
- `withinOption` ... Setting padding lines within option
93+
- `emits` ... Setting padding between lines between `emits` and `defineEmits`. default `always`
94+
- `props` ... Setting padding between lines between `props` and `defineProps`. default `always`
95+
- ...
96+
- `groupSingleLineProperties` ... Setting groupings of multiple consecutive single-line properties (e.g. `name`, `inheritAttrs`), default `true`
97+
98+
### Group single-line properties
99+
100+
<eslint-code-block fix :rules="{'vue/padding-lines-in-component-definition': ['error', { betweenOptions: 'always', withinOption: 'always', groupSingleLineProperties: true}]}">
101+
102+
```vue
103+
<script>
104+
export default {
105+
name: 'GroupSingleLineProperties',
106+
inheritAttrs: false,
107+
108+
props: {
109+
modelValue: {
110+
type: String,
111+
default: '',
112+
},
113+
},
114+
115+
data() {
116+
return {
117+
count: 0,
118+
};
119+
}
120+
}
121+
</script>
122+
```
123+
124+
</eslint-code-block>
125+
126+
### With custom options
127+
128+
<eslint-code-block fix :rules="{'vue/padding-lines-in-component-definition': ['error', { betweenOptions: 'always', withinOption: { props: { betweenItems: 'always', withinEach: 'never' }, customOption: { betweenItems: 'always', withinEach: 'ignore' } }, groupSingleLineProperties: true}]}">
129+
130+
```vue
131+
<script>
132+
export default {
133+
props: {
134+
modelValue: {
135+
type: String,
136+
default: '',
137+
},
138+
139+
isActive: {
140+
type: Boolean,
141+
default: false,
142+
},
143+
},
144+
145+
customOption: {
146+
foo: () => {
147+
return 'foo'
148+
},
149+
150+
bar: () => {
151+
return 'bar'
152+
}
153+
},
154+
}
155+
</script>
156+
```
157+
158+
</eslint-code-block>
159+
160+
## :mag: Implementation
161+
162+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/padding-lines-in-component-definition.js)
163+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/padding-lines-in-component-definition.js)

Diff for: ‎lib/configs/no-layout-rules.js

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ module.exports = {
4444
'vue/operator-linebreak': 'off',
4545
'vue/padding-line-between-blocks': 'off',
4646
'vue/padding-line-between-tags': 'off',
47+
'vue/padding-lines-in-component-definition': 'off',
4748
'vue/script-indent': 'off',
4849
'vue/singleline-html-element-content-newline': 'off',
4950
'vue/space-in-parens': 'off',

Diff for: ‎lib/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@ module.exports = {
163163
'order-in-components': require('./rules/order-in-components'),
164164
'padding-line-between-blocks': require('./rules/padding-line-between-blocks'),
165165
'padding-line-between-tags': require('./rules/padding-line-between-tags'),
166+
'padding-lines-in-component-definition': require('./rules/padding-lines-in-component-definition'),
166167
'prefer-import-from-vue': require('./rules/prefer-import-from-vue'),
167168
'prefer-prop-type-boolean-first': require('./rules/prefer-prop-type-boolean-first'),
168169
'prefer-separate-static-class': require('./rules/prefer-separate-static-class'),

0 commit comments

Comments
 (0)