Skip to content

Commit 7f401a2

Browse files
ota-meshiota-meshi
committed
Add rules of HTML comment styles
1 parent ebd07e6 commit 7f401a2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+3590
-0
lines changed

‎docs/rules/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,9 @@ For example:
142142
| [vue/array-bracket-spacing](./array-bracket-spacing.md) | enforce consistent spacing inside array brackets | :wrench: |
143143
| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
144144
| [vue/eqeqeq](./eqeqeq.md) | require the use of `===` and `!==` | :wrench: |
145+
| [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: |
146+
| [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |
147+
| [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
145148
| [vue/key-spacing](./key-spacing.md) | enforce consistent spacing between keys and values in object literal properties | :wrench: |
146149
| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name | |
147150
| [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces | :wrench: |

‎docs/rules/html-comment-content-newline.md

+229
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/html-comment-content-newline
5+
description: enforce unified line brake in HTML comments
6+
---
7+
# vue/html-comment-content-newline
8+
> enforce unified line brake in HTML comments
9+
10+
- :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.
11+
12+
## :book: Rule Details
13+
14+
This rule will enforce consistency of line break after the `<!--` and before the `-->` of comment. It also provides several exceptions for various documentation styles.
15+
16+
<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error']}">
17+
18+
```vue
19+
<template>
20+
<!-- ✓ GOOD -->
21+
<!-- singleline comment -->
22+
<!--
23+
multiline
24+
comment
25+
-->
26+
27+
<!--
28+
✗ BAD
29+
-->
30+
<!--
31+
singleline comment
32+
-->
33+
<!-- multiline
34+
comment -->
35+
</template>
36+
```
37+
38+
</eslint-code-block>
39+
40+
## :wrench: Options
41+
42+
```json
43+
{
44+
"vue/html-comment-content-newline": ["error",
45+
{
46+
"singleline": "always" | "never" | "ignore",
47+
"multiline": "always" | "never" | "ignore",
48+
},
49+
{
50+
"exceptions": []
51+
}
52+
]
53+
}
54+
```
55+
56+
- The first option is either an object with `"singleline"` and `"multiline"` keys.
57+
- `singleline` ... the configuration for single-line comments.
58+
- `"never"` (default) ... disallow line breaks after the `<!--` and before the `-->`.
59+
- `"always"` ... require one line break after the `<!--` and before the `-->`.
60+
- `multiline` ... the configuration for multiline comments.
61+
- `"never"` ... disallow line breaks after the `<!--` and before the `-->`.
62+
- `"always"` (default) ... require one line break after the `<!--` and before the `-->`.
63+
64+
You can also set the same value for both `singleline` and `multiline` by specifies a string.
65+
66+
- This rule can also take a 2nd option, an object with the following key: `"exceptions"`.
67+
- The `"exceptions"` value is an array of string patterns which are considered exceptions to the rule.
68+
69+
```
70+
"vue/html-comment-content-newline": ["error", { ... }, { "exceptions": ["*"] }]
71+
```
72+
73+
### `"always"`
74+
75+
<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error', { 'singleline': 'always', 'multiline': 'always' }]}">
76+
77+
```vue
78+
<template>
79+
<!--
80+
✓ GOOD
81+
-->
82+
<!--
83+
singleline comment
84+
-->
85+
<!--
86+
multiline
87+
comment
88+
-->
89+
90+
<!-- ✗ BAD -->
91+
<!-- singleline comment -->
92+
<!-- multiline
93+
comment -->
94+
</template>
95+
```
96+
97+
</eslint-code-block>
98+
99+
### `"never"`
100+
101+
<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error', { 'singleline': 'never', 'multiline': 'never' }]}">
102+
103+
```vue
104+
<template>
105+
<!-- ✓ GOOD -->
106+
<!-- singleline comment -->
107+
<!-- multiline
108+
comment -->
109+
110+
<!--
111+
✗ BAD
112+
-->
113+
<!--
114+
singleline comment
115+
-->
116+
<!--
117+
multiline
118+
comment
119+
-->
120+
</template>
121+
```
122+
123+
</eslint-code-block>
124+
125+
### `{"singleline": "always", "multiline": "ignore"}`
126+
127+
<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error', { 'singleline': 'always', 'multiline': 'ignore' }]}">
128+
129+
```vue
130+
<template>
131+
<!--
132+
✓ GOOD
133+
-->
134+
<!--
135+
singleline comment
136+
-->
137+
<!--
138+
139+
singleline comment
140+
141+
-->
142+
<!-- multiline
143+
comment -->
144+
<!--
145+
multiline
146+
comment
147+
-->
148+
<!--
149+
150+
multiline
151+
comment
152+
153+
-->
154+
155+
<!-- ✗ BAD -->
156+
<!-- singleline comment -->
157+
<!-- singleline comment -->
158+
</template>
159+
```
160+
161+
</eslint-code-block>
162+
163+
164+
### `{"singleline": "ignore", "multiline": "always"}`
165+
166+
<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error', { 'singleline': 'ignore', 'multiline': 'always' }]}">
167+
168+
```vue
169+
<template>
170+
<!-- ✓ GOOD -->
171+
<!--
172+
multiline
173+
comment
174+
-->
175+
<!--
176+
177+
multiline
178+
comment
179+
180+
-->
181+
<!-- singleline comment -->
182+
<!--
183+
singleline comment
184+
-->
185+
<!--
186+
187+
singleline comment
188+
189+
-->
190+
191+
<!-- ✗ BAD -->
192+
<!-- multiline
193+
comment -->
194+
</template>
195+
```
196+
197+
</eslint-code-block>
198+
199+
### `"always", { "exceptions": ["*"] }`
200+
201+
<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error', 'always', { 'exceptions': ['*'] }]}">
202+
203+
```vue
204+
<template>
205+
<!--*******
206+
✓ GOOD
207+
*******-->
208+
<!--*******
209+
comment
210+
*******-->
211+
212+
<!--******* ✗ BAD *******-->
213+
<!--******* multiline
214+
comment *******-->
215+
</template>
216+
```
217+
218+
</eslint-code-block>
219+
220+
## :couple: Related rules
221+
222+
- [vue/html-comment-indent](./html-comment-indent.md)
223+
- [vue/html-comment-content-spacing](./html-comment-content-spacing.md)
224+
- [spaced-comment](https://eslint.org/docs/rules/spaced-comment)
225+
226+
## :mag: Implementation
227+
228+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-comment-content-newline.js)
229+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-comment-content-newline.js)

‎docs/rules/html-comment-content-spacing.md

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/html-comment-content-spacing
5+
description: enforce unified spacing in HTML comments
6+
---
7+
# vue/html-comment-content-spacing
8+
> enforce unified spacing in HTML comments
9+
10+
- :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.
11+
12+
## :book: Rule Details
13+
14+
This rule will enforce consistency of spacing after the `<!--` and before the `-->` of comment. It also provides several exceptions for various documentation styles.
15+
16+
Whitespace after the `<!--` and before the `-->` makes it easier to read text in comments.
17+
18+
<eslint-code-block fix :rules="{'vue/html-comment-content-spacing': ['error']}">
19+
20+
```vue
21+
<template>
22+
<!-- ✓ GOOD -->
23+
<!-- comment -->
24+
<!--
25+
comment
26+
-->
27+
28+
<!--✗ BAD-->
29+
<!--comment-->
30+
</template>
31+
```
32+
33+
</eslint-code-block>
34+
35+
## :wrench: Options
36+
37+
```json
38+
{
39+
"vue/html-comment-content-spacing": ["error",
40+
"always" | "never",
41+
{
42+
"exceptions": []
43+
}
44+
]
45+
}
46+
```
47+
48+
- The first is a string which be either `"always"` or `"never"`. The default is `"always"`.
49+
- `"always"` ... there must be at least one whitespace at after the `<!--` and before the `-->`.
50+
- `"never"` ... there should be no whitespace at after the `<!--` and before the `-->`.
51+
52+
53+
- This rule can also take a 2nd option, an object with the following key: `"exceptions"`.
54+
- The `"exceptions"` value is an array of string patterns which are considered exceptions to the rule.
55+
Please note that exceptions are ignored if the first argument is `"never"`.
56+
57+
```
58+
"vue/html-comment-content-spacing": ["error", "always", { "exceptions": ["*"] }]
59+
```
60+
61+
### `"always"`
62+
63+
<eslint-code-block fix :rules="{'vue/html-comment-content-spacing': ['error', 'always']}">
64+
65+
```vue
66+
<template>
67+
<!-- ✓ GOOD -->
68+
69+
<!--✗ BAD-->
70+
</template>
71+
```
72+
73+
</eslint-code-block>
74+
75+
### `"never"`
76+
77+
<eslint-code-block fix :rules="{'vue/html-comment-content-spacing': ['error', 'never']}">
78+
79+
```vue
80+
<template>
81+
<!--✓ GOOD-->
82+
83+
<!-- ✗ BAD -->
84+
<!-- comment -->
85+
</template>
86+
```
87+
88+
</eslint-code-block>
89+
90+
### `"always", { "exceptions": ["*"] }`
91+
92+
<eslint-code-block fix :rules="{'vue/html-comment-content-spacing': ['error', 'always', { 'exceptions': ['*'] }]}">
93+
94+
```vue
95+
<template>
96+
<!-- ✓ GOOD -->
97+
<!--*******
98+
comment
99+
*******-->
100+
101+
<!--*******✗ BAD*******-->
102+
</template>
103+
```
104+
105+
</eslint-code-block>
106+
107+
## :couple: Related rules
108+
109+
- [spaced-comment](https://eslint.org/docs/rules/spaced-comment)
110+
- [vue/html-comment-content-newline](./html-comment-content-newline.md)
111+
112+
## :mag: Implementation
113+
114+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-comment-content-spacing.js)
115+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-comment-content-spacing.js)

0 commit comments

Comments
 (0)