Skip to content

Commit

Permalink
Add padding-lines-in-component-definition rule (#2052)
Browse files Browse the repository at this point in the history
  • Loading branch information
ItMaga authored Jan 11, 2023
1 parent abdd93d commit 5e0bd2c
Show file tree
Hide file tree
Showing 6 changed files with 1,765 additions and 0 deletions.
1 change: 1 addition & 0 deletions docs/rules/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,7 @@ For example:
| [vue/no-v-text](./no-v-text.md) | disallow use of v-text | | :hammer: |
| [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: | :lipstick: |
| [vue/padding-line-between-tags](./padding-line-between-tags.md) | require or disallow newlines between sibling tags in template | :wrench: | :lipstick: |
| [vue/padding-lines-in-component-definition](./padding-lines-in-component-definition.md) | require or disallow padding lines in component definition | :wrench: | :lipstick: |
| [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
| [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: |
| [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
Expand Down
163 changes: 163 additions & 0 deletions docs/rules/padding-lines-in-component-definition.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/padding-lines-in-component-definition
description: require or disallow padding lines in component definition
---
# vue/padding-lines-in-component-definition

> require or disallow padding lines in component definition
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
- :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.

## :book: Rule Details

This rule requires or disallows blank lines in the component definition. Properly blank lines help developers improve code readability and code style flexibility.

<eslint-code-block fix :rules="{'vue/padding-lines-in-component-definition': ['error']}">

```vue
<script>
/* ✗ BAD */
export default {
props: {
modelValue: {
type: String,
default: '',
},
},
data() {
return {
count: 0,
};
}
}
</script>
```

</eslint-code-block>

<eslint-code-block fix :rules="{'vue/padding-lines-in-component-definition': ['error']}">

```vue
<script>
/* ✓ GOOD */
export default {
props: {
modelValue: {
type: String,
default: '',
},
},
data() {
return {
count: 0,
};
}
}
</script>
```

</eslint-code-block>

## :wrench: Options

```json
{
"vue/padding-lines-in-component-definition": ["error", {
"betweenOptions": "always" | "never",

"withinOption": {
"props": {
"betweenItems": "always" | "never" | "ignore",
"withinEach": "always" | "never" | "ignore",
} | "always" | "never" | "ignore", // shortcut to set both

"data": {
"betweenItems": "always" | "never" | "ignore",
"withinEach": "always" | "never" | "ignore",
} | "always" | "never" | "ignore" // shortcut to set both

// ... all options
} | "always" | "never" | "ignore",

"groupSingleLineProperties": true | false
}]
}
```

- `betweenOptions` ... Setting padding lines between options. default `always`
- `withinOption` ... Setting padding lines within option
- `emits` ... Setting padding between lines between `emits` and `defineEmits`. default `always`
- `props` ... Setting padding between lines between `props` and `defineProps`. default `always`
- ...
- `groupSingleLineProperties` ... Setting groupings of multiple consecutive single-line properties (e.g. `name`, `inheritAttrs`), default `true`

### Group single-line properties

<eslint-code-block fix :rules="{'vue/padding-lines-in-component-definition': ['error', { betweenOptions: 'always', withinOption: 'always', groupSingleLineProperties: true}]}">

```vue
<script>
export default {
name: 'GroupSingleLineProperties',
inheritAttrs: false,
props: {
modelValue: {
type: String,
default: '',
},
},
data() {
return {
count: 0,
};
}
}
</script>
```

</eslint-code-block>

### With custom options

<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}]}">

```vue
<script>
export default {
props: {
modelValue: {
type: String,
default: '',
},
isActive: {
type: Boolean,
default: false,
},
},
customOption: {
foo: () => {
return 'foo'
},
bar: () => {
return 'bar'
}
},
}
</script>
```

</eslint-code-block>

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/padding-lines-in-component-definition.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/padding-lines-in-component-definition.js)
1 change: 1 addition & 0 deletions lib/configs/no-layout-rules.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ module.exports = {
'vue/operator-linebreak': 'off',
'vue/padding-line-between-blocks': 'off',
'vue/padding-line-between-tags': 'off',
'vue/padding-lines-in-component-definition': 'off',
'vue/script-indent': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/space-in-parens': 'off',
Expand Down
1 change: 1 addition & 0 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,7 @@ module.exports = {
'order-in-components': require('./rules/order-in-components'),
'padding-line-between-blocks': require('./rules/padding-line-between-blocks'),
'padding-line-between-tags': require('./rules/padding-line-between-tags'),
'padding-lines-in-component-definition': require('./rules/padding-lines-in-component-definition'),
'prefer-import-from-vue': require('./rules/prefer-import-from-vue'),
'prefer-prop-type-boolean-first': require('./rules/prefer-prop-type-boolean-first'),
'prefer-separate-static-class': require('./rules/prefer-separate-static-class'),
Expand Down
Loading

0 comments on commit 5e0bd2c

Please sign in to comment.