Skip to content

Commit

Permalink
Add vue/block-tag-newline rule (#1328)
Browse files Browse the repository at this point in the history
  • Loading branch information
ota-meshi committed Oct 18, 2020
1 parent f4c21e5 commit bebb9b3
Show file tree
Hide file tree
Showing 6 changed files with 787 additions and 1 deletion.
3 changes: 2 additions & 1 deletion docs/rules/README.md
Expand Up @@ -281,13 +281,14 @@ For example:
```json
{
"rules": {
"vue/component-name-in-template-casing": "error"
"vue/block-tag-newline": "error"
}
}
```

| Rule ID | Description | |
|:--------|:------------|:---|
| [vue/block-tag-newline](./block-tag-newline.md) | enforce line breaks after opening and before closing block-level tags | :wrench: |
| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
| [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: |
| [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |
Expand Down
161 changes: 161 additions & 0 deletions docs/rules/block-tag-newline.md
@@ -0,0 +1,161 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/block-tag-newline
description: enforce line breaks after opening and before closing block-level tags
---
# vue/block-tag-newline
> enforce line breaks after opening and before closing block-level tags
- :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 enforces a line break (or no line break) after opening and before closing block tags.

<eslint-code-block fix :rules="{'vue/block-tag-newline': ['error']}">

```vue
<!-- ✓ GOOD -->
<template><input></template>
<script>
export default {}
</script>
```

</eslint-code-block>

<eslint-code-block fix :rules="{'vue/block-tag-newline': ['error']}">

```vue
<!-- ✗ BAD -->
<template>
<input></template>
<script>
export default {}</script>
```

</eslint-code-block>

## :wrench: Options

```json
{
"vue/block-tag-newline": ["error", {
"singleline": "always" | "never" | "consistent" | "ignore",
"multiline": "always" | "never" | "consistent" | "ignore",
"maxEmptyLines": 0,
"blocks": {
"template": {
"singleline": "always" | "never" | "consistent" | "ignore",
"multiline": "always" | "never" | "consistent" | "ignore",
"maxEmptyLines": 0,
},
"script": {
"singleline": "always" | "never" | "consistent" | "ignore",
"multiline": "always" | "never" | "consistent" | "ignore",
"maxEmptyLines": 0,
},
"my-block": {
"singleline": "always" | "never" | "consistent" | "ignore",
"multiline": "always" | "never" | "consistent" | "ignore",
"maxEmptyLines": 0,
}
}
}]
}
```

- `singleline` ... the configuration for single-line blocks.
- `"consistent"` ... (default) requires consistent usage of line breaks for each pair of tags. It reports an error if one tag in the pair has a linebreak inside it and the other tag does not.
- `"always"` ... require one line break after opening and before closing block tags.
- `"never"` ... disallow line breaks after opening and before closing block tags.
- `multiline` ... the configuration for multi-line blocks.
- `"consistent"` ... requires consistent usage of line breaks for each pair of tags. It reports an error if one tag in the pair has a linebreak inside it and the other tag does not.
- `"always"` ... (default) require one line break after opening and before closing block tags.
- `"never"` ... disallow line breaks after opening and before closing block tags.
- `maxEmptyLines` ... specifies the maximum number of empty lines allowed. default 0.
- `blocks` ... specifies for each block name.

### `{ "singleline": "never", "multiline": "always" }`

<eslint-code-block fix :rules="{'vue/block-tag-newline': ['error', { 'singleline': 'never', 'multiline': 'always' }]}">

```vue
<!-- ✓ GOOD -->
<template><input></template>
<script>
export default {
}
</script>
```

</eslint-code-block>

<eslint-code-block fix :rules="{'vue/block-tag-newline': ['error', { 'singleline': 'never', 'multiline': 'always' }]}">

```vue
<!-- ✗ BAD -->
<template>
<input>
</template>
<script>export default {
}</script>
```

</eslint-code-block>

### `{ "singleline": "always", "multiline": "always", "maxEmptyLines": 1 }`

<eslint-code-block fix :rules="{'vue/block-tag-newline': ['error', { 'singleline': 'always', 'multiline': 'always', 'maxEmptyLines': 1 }]}">

```vue
<!-- ✓ GOOD -->
<template>
<input>
</template>
<script>
export default {
}
</script>
```

</eslint-code-block>

<eslint-code-block fix :rules="{'vue/block-tag-newline': ['error', { 'singleline': 'always', 'multiline': 'always', 'maxEmptyLines': 1 }]}">

```vue
<!-- ✗ BAD -->
<template>
<input>
</template>
<script>
export default {
}
</script>
```

</eslint-code-block>

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/block-tag-newline.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/block-tag-newline.js)
1 change: 1 addition & 0 deletions lib/configs/no-layout-rules.js
Expand Up @@ -8,6 +8,7 @@ module.exports = {
'vue/array-bracket-spacing': 'off',
'vue/arrow-spacing': 'off',
'vue/block-spacing': 'off',
'vue/block-tag-newline': 'off',
'vue/brace-style': 'off',
'vue/comma-dangle': 'off',
'vue/comma-spacing': 'off',
Expand Down
1 change: 1 addition & 0 deletions lib/index.js
Expand Up @@ -12,6 +12,7 @@ module.exports = {
'attribute-hyphenation': require('./rules/attribute-hyphenation'),
'attributes-order': require('./rules/attributes-order'),
'block-spacing': require('./rules/block-spacing'),
'block-tag-newline': require('./rules/block-tag-newline'),
'brace-style': require('./rules/brace-style'),
camelcase: require('./rules/camelcase'),
'comma-dangle': require('./rules/comma-dangle'),
Expand Down

0 comments on commit bebb9b3

Please sign in to comment.