Skip to content

Commit 26e697d

Browse files
mysticateamysticatea
committed
Merge branch 'master' into script-indent/new
# Conflicts: # README.md
2 parents a37a3d3 + 41e7eee commit 26e697d

21 files changed

+1285
-5
lines changed

Diff for: ‎README.md

+18
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,20 @@ Vue.component('AsyncComponent', (resolve, reject) => {
7171
})
7272
```
7373

74+
### `eslint-disable` functionality in `<template>`
75+
76+
You can use `<!-- eslint-disable -->`-like HTML comments in `<template>` of `.vue` files. For example:
77+
78+
```html
79+
<template>
80+
<!-- eslint-disable-next-line vue/max-attributes-per-line -->
81+
<div a="1" b="2" c="3" d="4">
82+
</div>
83+
</template>
84+
```
85+
86+
If you want to disallow `eslint-disable` functionality, please disable [vue/comment-directive](./docs/rules/comment-directive.md) rule.
87+
7488
## :gear: Configs
7589

7690
This plugin provides two predefined configs:
@@ -95,6 +109,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
95109

96110
| | Rule ID | Description |
97111
|:---|:--------|:------------|
112+
| | [comment-directive](./docs/rules/comment-directive.md) | support comment-directives in `<template>` |
98113
| | [jsx-uses-vars](./docs/rules/jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |
99114

100115

@@ -183,8 +198,11 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
183198

184199
| | Rule ID | Description |
185200
|:---|:--------|:------------|
201+
| :wrench: | [html-closing-bracket-newline](./docs/rules/html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets |
202+
| :wrench: | [html-closing-bracket-spacing](./docs/rules/html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets |
186203
| :wrench: | [script-indent](./docs/rules/script-indent.md) | enforce consistent indentation in `<script>` |
187204

205+
188206
<!--RULES_TABLE_END-->
189207

190208
## :couple: FAQ

Diff for: ‎docs/rules/comment-directive.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# support comment-directives in `<template>` (comment-directive)
2+
3+
Sole purpose of this rule is to provide `eslint-disable` functionality in `<template>`.
4+
It supports usage of the following comments:
5+
6+
- `eslint-disable`
7+
- `eslint-enable`
8+
- `eslint-disable-line`
9+
- `eslint-disable-next-line`
10+
11+
For example:
12+
13+
```html
14+
<template>
15+
<!-- eslint-disable-next-line vue/max-attributes-per-line -->
16+
<div a="1" b="2" c="3" d="4">
17+
</div>
18+
</template>
19+
```
20+
21+
> Note: we can't write HTML comments in tags.
22+
23+
This rule doesn't throw any warning.
24+
25+
## :book: Rule Details
26+
27+
ESLint doesn't provide any API to enhance `eslint-disable` functionality and ESLint rules cannot affect other rules. But ESLint provides [processors API](https://eslint.org/docs/developer-guide/working-with-plugins#processors-in-plugins).
28+
29+
This rule sends all `eslint-disable`-like comments as errors to the post-process of the `.vue` file processor, then the post-process removes all `vue/comment-directive` errors and the reported errors in disabled areas.
30+
31+
## :books: Further reading
32+
33+
- [Disabling rules with inline comments](https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)

Diff for: ‎docs/rules/html-closing-bracket-newline.md

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
# require or disallow a line break before tag's closing brackets (html-closing-bracket-newline)
2+
3+
- :wrench: The `--fix` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.
4+
5+
People have own preference about the location of closing brackets.
6+
This rule enforces a line break (or no line break) before tag's closing brackets.
7+
8+
```html
9+
<div
10+
id="foo"
11+
class="bar"> <!-- On the same line with the last attribute. -->
12+
</div>
13+
14+
<div
15+
id="foo"
16+
class="bar"
17+
> <!-- On the next line. -->
18+
</div>
19+
```
20+
21+
## Rule Details
22+
23+
```json
24+
{
25+
"html-closing-bracket-newline": ["error", {
26+
"singleline": "never",
27+
"multiline": "never"
28+
}]
29+
}
30+
```
31+
32+
- `singleline` ... the configuration for single-line elements. It's a single-line element if the element does not have attributes or the last attribute is on the same line as the opening bracket.
33+
- `"never"` ... disallow line breaks before the closing bracket. This is the default.
34+
- `"always"` ... require one line break before the closing bracket.
35+
- `multiline` ... the configuration for multiline elements. It's a multiline element if the last attribute is not on the same line of the opening bracket.
36+
- `"never"` ... disallow line breaks before the closing bracket. This is the default.
37+
- `"always"` ... require one line break before the closing bracket.
38+
39+
Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-level of the closing brackets.
40+
41+
:-1: Examples of **incorrect** code for this rule:
42+
43+
```html
44+
/*eslint html-closing-bracket-newline: "error"*/
45+
46+
<div id="foo" class="bar"
47+
>
48+
<div
49+
id="foo"
50+
class="bar"
51+
>
52+
<div
53+
id="foo"
54+
class="bar"
55+
>
56+
```
57+
58+
:+1: Examples of **correct** code for this rule:
59+
60+
```html
61+
/*eslint html-closing-bracket-newline: "error"*/
62+
63+
<div id="foo" class="bar">
64+
<div
65+
id="foo"
66+
class="bar">
67+
```
68+
69+
:-1: Examples of **incorrect** code for `{ "multiline": "always" }`:
70+
71+
```html
72+
/*eslint html-closing-bracket-newline: ["error", { multiline: always }]*/
73+
74+
<div id="foo" class="bar"
75+
>
76+
<div
77+
id="foo"
78+
class="bar">
79+
```
80+
81+
:+1: Examples of **correct** code for `{ "multiline": "always" }`:
82+
83+
```html
84+
/*eslint html-closing-bracket-newline: ["error", { multiline: always }]*/
85+
86+
<div id="foo" class="bar">
87+
<div
88+
id="foo"
89+
class="bar"
90+
>
91+
<div
92+
id="foo"
93+
class="bar"
94+
>
95+
```

Diff for: ‎docs/rules/html-closing-bracket-spacing.md

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
# require or disallow a space before tag's closing brackets (html-closing-bracket-spacing)
2+
3+
- :wrench: The `--fix` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.
4+
5+
This rule enforces consistent spacing style before closing brackets `>` of tags.
6+
7+
```html
8+
<div class="foo"> or <div class="foo" >
9+
<div class="foo"/> or <div class="foo" />
10+
```
11+
12+
## Rule Details
13+
14+
This rule has options.
15+
16+
```json
17+
{
18+
"html-closing-bracket-spacing": ["error", {
19+
"startTag": "always" | "never",
20+
"endTag": "always" | "never",
21+
"selfClosingTag": "always" | "never"
22+
}]
23+
}
24+
```
25+
26+
- `startTag` (`"always" | "never"`) ... Setting for the `>` of start tags (e.g. `<div>`). Default is `"never"`.
27+
- `"always"` ... requires one or more spaces.
28+
- `"never"` ... disallows spaces.
29+
- `endTag` (`"always" | "never"`) ... Setting for the `>` of end tags (e.g. `</div>`). Default is `"never"`.
30+
- `"always"` ... requires one or more spaces.
31+
- `"never"` ... disallows spaces.
32+
- `selfClosingTag` (`"always" | "never"`) ... Setting for the `/>` of self-closing tags (e.g. `<div/>`). Default is `"always"`.
33+
- `"always"` ... requires one or more spaces.
34+
- `"never"` ... disallows spaces.
35+
36+
Examples of **incorrect** code for this rule:
37+
38+
```html
39+
<!--eslint html-closing-bracket-spacing: "error" -->
40+
41+
<div >
42+
<div foo >
43+
<div foo="bar" >
44+
</div >
45+
<div/>
46+
<div foo/>
47+
<div foo="bar"/>
48+
```
49+
50+
Examples of **correct** code for this rule:
51+
52+
```html
53+
<!--eslint html-closing-bracket-spacing: "error" -->
54+
55+
<div>
56+
<div foo>
57+
<div foo="bar">
58+
</div>
59+
<div />
60+
<div foo />
61+
<div foo="bar" />
62+
```
63+
64+
```html
65+
<!--eslint html-closing-bracket-spacing: ["error", {
66+
"startTag": "always",
67+
"endTag": "always",
68+
"selfClosingTag": "always"
69+
}] -->
70+
71+
<div >
72+
<div foo >
73+
<div foo="bar" >
74+
</div >
75+
<div />
76+
<div foo />
77+
<div foo="bar" />
78+
```
79+
80+
# Related rules
81+
82+
- [vue/no-multi-spaces](./no-multi-spaces.md)
83+
- [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md)

Diff for: ‎lib/base-rules.js

+1
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,6 @@
44
* in order to update it's content execute "npm run update"
55
*/
66
module.exports = {
7+
"vue/comment-directive": "error",
78
"vue/jsx-uses-vars": "error"
89
}

Diff for: ‎lib/essential-rules.js

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
* in order to update it's content execute "npm run update"
55
*/
66
module.exports = {
7+
"vue/comment-directive": "error",
78
"vue/jsx-uses-vars": "error",
89
"vue/no-async-in-computed-properties": "error",
910
"vue/no-dupe-keys": "error",

Diff for: ‎lib/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ const configs = requireAll({
1111
dirname: resolve(__dirname, 'config'),
1212
filter: /^([\w\-]+)\.js$/
1313
})
14+
const processor = require('./processor')
1415

1516
module.exports = {
1617
rules,
17-
configs
18+
configs,
19+
processors: { '.vue': processor }
1820
}

Diff for: ‎lib/processor.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/**
2+
* @author Toru Nagashima <https://github.com/mysticatea>
3+
*/
4+
'use strict'
5+
6+
module.exports = {
7+
preprocess (code) {
8+
return [code]
9+
},
10+
11+
postprocess (messages) {
12+
const state = {
13+
block: {
14+
disableAll: false,
15+
disableRules: new Set()
16+
},
17+
line: {
18+
disableAll: false,
19+
disableRules: new Set()
20+
}
21+
}
22+
23+
// Filter messages which are in disabled area.
24+
return messages[0].filter(message => {
25+
if (message.ruleId === 'vue/comment-directive') {
26+
const rules = message.message.split(' ')
27+
const type = rules.shift()
28+
const group = rules.shift()
29+
switch (type) {
30+
case '--':
31+
state[group].disableAll = true
32+
break
33+
case '++':
34+
state[group].disableAll = false
35+
break
36+
case '-':
37+
for (const rule of rules) {
38+
state[group].disableRules.add(rule)
39+
}
40+
break
41+
case '+':
42+
for (const rule of rules) {
43+
state[group].disableRules.delete(rule)
44+
}
45+
break
46+
}
47+
return false
48+
} else {
49+
return !(
50+
state.block.disableAll ||
51+
state.line.disableAll ||
52+
state.block.disableRules.has(message.ruleId) ||
53+
state.line.disableRules.has(message.ruleId)
54+
)
55+
}
56+
})
57+
},
58+
59+
supportsAutofix: true
60+
}

Diff for: ‎lib/recommended-rules.js

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66
module.exports = {
77
"vue/attribute-hyphenation": "error",
8+
"vue/comment-directive": "error",
89
"vue/html-end-tags": "error",
910
"vue/html-indent": "error",
1011
"vue/html-quotes": "error",

0 commit comments

Comments
 (0)