Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

⭐️New: Add rules of HTML comment styles #755

Merged
merged 3 commits into from May 17, 2020
Merged

⭐️New: Add rules of HTML comment styles #755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79eb091
Add rules of HTML comment styles
ota-meshi Dec 13, 2018
7508003
update
ota-meshi May 10, 2020
ba010c7
Fixed types
ota-meshi May 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions docs/rules/README.md
View file
Open in desktop
Expand Up @@ -274,6 +274,9 @@ For example:
| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
| [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots | :wrench: |
| [vue/eqeqeq](./eqeqeq.md) | require the use of `===` and `!==` | :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: |
| [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
| [vue/key-spacing](./key-spacing.md) | enforce consistent spacing between keys and values in object literal properties | :wrench: |
| [vue/keyword-spacing](./keyword-spacing.md) | enforce consistent spacing before and after keywords | :wrench: |
| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name | |
Expand Down
229 changes: 229 additions & 0 deletions docs/rules/html-comment-content-newline.md
View file
Open in desktop
@@ -0,0 +1,229 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/html-comment-content-newline
description: enforce unified line brake in HTML comments
---
# vue/html-comment-content-newline
> enforce unified line brake in HTML comments

- :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 will enforce consistency of line break after the `<!--` and before the `-->` of comment. It also provides several exceptions for various documentation styles.

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

```vue
<template>
<!-- ✓ GOOD -->
<!-- singleline comment -->
<!--
multiline
comment
-->

<!--
✗ BAD
-->
<!--
singleline comment
-->
<!-- multiline
comment -->
</template>
```

</eslint-code-block>

## :wrench: Options

```json
{
"vue/html-comment-content-newline": ["error",
{
"singleline": "always" | "never" | "ignore",
"multiline": "always" | "never" | "ignore",
},
{
"exceptions": []
}
]
}
```

- The first option is either an object with `"singleline"` and `"multiline"` keys.
- `singleline` ... the configuration for single-line comments.
- `"never"` (default) ... disallow line breaks after the `<!--` and before the `-->`.
- `"always"` ... require one line break after the `<!--` and before the `-->`.
- `multiline` ... the configuration for multiline comments.
- `"never"` ... disallow line breaks after the `<!--` and before the `-->`.
- `"always"` (default) ... require one line break after the `<!--` and before the `-->`.

You can also set the same value for both `singleline` and `multiline` by specifies a string.

- This rule can also take a 2nd option, an object with the following key: `"exceptions"`.
- The `"exceptions"` value is an array of string patterns which are considered exceptions to the rule.

```json
"vue/html-comment-content-newline": ["error", { ... }, { "exceptions": ["*"] }]
```

### `"always"`

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

```vue
<template>
<!--
✓ GOOD
-->
<!--
singleline comment
-->
<!--
multiline
comment
-->

<!-- ✗ BAD -->
<!-- singleline comment -->
<!-- multiline
comment -->
</template>
```

</eslint-code-block>

### `"never"`

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

```vue
<template>
<!-- ✓ GOOD -->
<!-- singleline comment -->
<!-- multiline
comment -->

<!--
✗ BAD
-->
<!--
singleline comment
-->
<!--
multiline
comment
-->
</template>
```

</eslint-code-block>

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

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

```vue
<template>
<!--
✓ GOOD
-->
<!--
singleline comment
-->
<!--

singleline comment

-->
<!-- multiline
comment -->
<!--
multiline
comment
-->
<!--

multiline
comment

-->

<!-- ✗ BAD -->
<!-- singleline comment -->
<!-- singleline comment -->
</template>
```

</eslint-code-block>


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

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

```vue
<template>
<!-- ✓ GOOD -->
<!--
multiline
comment
-->
<!--

multiline
comment

-->
<!-- singleline comment -->
<!--
singleline comment
-->
<!--

singleline comment

-->

<!-- ✗ BAD -->
<!-- multiline
comment -->
</template>
```

</eslint-code-block>

### `"always", { "exceptions": ["*"] }`

<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error', 'always', { 'exceptions': ['*'] }]}">

```vue
<template>
<!--*******
✓ GOOD
*******-->
<!--*******
comment
*******-->

<!--******* ✗ BAD *******-->
<!--******* multiline
comment *******-->
</template>
```

</eslint-code-block>

## :couple: Related rules

- [vue/html-comment-indent](./html-comment-indent.md)
- [vue/html-comment-content-spacing](./html-comment-content-spacing.md)
- [spaced-comment](https://eslint.org/docs/rules/spaced-comment)

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-comment-content-newline.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-comment-content-newline.js)
115 changes: 115 additions & 0 deletions docs/rules/html-comment-content-spacing.md
View file
Open in desktop
@@ -0,0 +1,115 @@
---
pageClass: rule-details
sidebarDepth: 0
title: vue/html-comment-content-spacing
description: enforce unified spacing in HTML comments
---
# vue/html-comment-content-spacing
> enforce unified spacing in HTML comments

- :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 will enforce consistency of spacing after the `<!--` and before the `-->` of comment. It also provides several exceptions for various documentation styles.

Whitespace after the `<!--` and before the `-->` makes it easier to read text in comments.

<eslint-code-block fix :rules="{'vue/html-comment-content-spacing': ['error']}">

```vue
<template>
<!-- ✓ GOOD -->
<!-- comment -->
<!--
comment
-->

<!--✗ BAD-->
<!--comment-->
</template>
```

</eslint-code-block>

## :wrench: Options

```json
{
"vue/html-comment-content-spacing": ["error",
"always" | "never",
{
"exceptions": []
}
]
}
```

- The first is a string which be either `"always"` or `"never"`. The default is `"always"`.
- `"always"` (default) ... there must be at least one whitespace at after the `<!--` and before the `-->`.
- `"never"` ... there should be no whitespace at after the `<!--` and before the `-->`.


- This rule can also take a 2nd option, an object with the following key: `"exceptions"`.
- The `"exceptions"` value is an array of string patterns which are considered exceptions to the rule.
Please note that exceptions are ignored if the first argument is `"never"`.

```json
"vue/html-comment-content-spacing": ["error", "always", { "exceptions": ["*"] }]
```

### `"always"`

<eslint-code-block fix :rules="{'vue/html-comment-content-spacing': ['error', 'always']}">

```vue
<template>
<!-- ✓ GOOD -->

<!--✗ BAD-->
</template>
```

</eslint-code-block>

### `"never"`

<eslint-code-block fix :rules="{'vue/html-comment-content-spacing': ['error', 'never']}">

```vue
<template>
<!--✓ GOOD-->

<!-- ✗ BAD -->
<!-- comment -->
</template>
```

</eslint-code-block>

### `"always", { "exceptions": ["*"] }`

<eslint-code-block fix :rules="{'vue/html-comment-content-spacing': ['error', 'always', { 'exceptions': ['*'] }]}">

```vue
<template>
<!-- ✓ GOOD -->
<!--*******
comment
*******-->

<!--*******✗ BAD*******-->
</template>
```

</eslint-code-block>

## :couple: Related rules

- [spaced-comment](https://eslint.org/docs/rules/spaced-comment)
- [vue/html-comment-content-newline](./html-comment-content-newline.md)

## :mag: Implementation

- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-comment-content-spacing.js)
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-comment-content-spacing.js)