Skip to content

Commit bf7c2b7

Browse files
ota-meshimichalsnik
ota-meshi
authored and
michalsnik
committed
⭐️New: Add vue/no-spaces-around-equal-signs-in-attribute (#542)
* Add `vue/no-spaces-around-equal-signs-in-attribute` rule * Add check that error message location is correct. * Fix rule URL
1 parent ab624da commit bf7c2b7

5 files changed

+315
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
232232
| | Rule ID | Description |
233233
|:---|:--------|:------------|
234234
| :wrench: | [vue/component-name-in-template-casing](./docs/rules/component-name-in-template-casing.md) | enforce specific casing for the component naming style in template |
235+
| :wrench: | [vue/no-spaces-around-equal-signs-in-attribute](./docs/rules/no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute |
235236
| :wrench: | [vue/script-indent](./docs/rules/script-indent.md) | enforce consistent indentation in `<script>` |
236237

237238
### Deprecated

‎docs/rules/no-spaces-around-equal-signs-in-attribute.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# disallow spaces around equal signs in attribute (vue/no-spaces-around-equal-signs-in-attribute)
2+
3+
- :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.
4+
5+
This rule disallow spaces around equal signs in attribute.
6+
7+
HTML5 allows spaces around equal signs. But space-less is easier to read, and groups entities better together.
8+
9+
## :book: Rule Details
10+
11+
:-1: Examples of **incorrect** code for this rule:
12+
13+
```html
14+
<div class = "item">
15+
```
16+
17+
:+1: Examples of **correct** code for this rule:
18+
19+
```html
20+
<div class="item">
21+
```
22+
23+
## Further Reading
24+
25+
* [HTML5 Style Guide - W3Schools *Spaces and Equal Signs*](https://www.w3schools.com/html/html5_syntax.asp)

‎lib/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ module.exports = {
3030
'no-reserved-keys': require('./rules/no-reserved-keys'),
3131
'no-shared-component-data': require('./rules/no-shared-component-data'),
3232
'no-side-effects-in-computed-properties': require('./rules/no-side-effects-in-computed-properties'),
33+
'no-spaces-around-equal-signs-in-attribute': require('./rules/no-spaces-around-equal-signs-in-attribute'),
3334
'no-template-key': require('./rules/no-template-key'),
3435
'no-template-shadow': require('./rules/no-template-shadow'),
3536
'no-textarea-mustache': require('./rules/no-textarea-mustache'),

‎lib/rules/no-spaces-around-equal-signs-in-attribute.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/**
2+
* @author Yosuke Ota
3+
* issue https://github.com/vuejs/eslint-plugin-vue/issues/460
4+
*/
5+
'use strict'
6+
7+
// ------------------------------------------------------------------------------
8+
// Requirements
9+
// ------------------------------------------------------------------------------
10+
11+
const utils = require('../utils')
12+
13+
// ------------------------------------------------------------------------------
14+
// Rule Definition
15+
// ------------------------------------------------------------------------------
16+
17+
module.exports = {
18+
meta: {
19+
docs: {
20+
description: 'disallow spaces around equal signs in attribute',
21+
category: undefined,
22+
url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.2/docs/rules/no-spaces-around-equal-signs-in-attribute.md'
23+
},
24+
fixable: 'whitespace',
25+
schema: []
26+
},
27+
28+
create (context) {
29+
const sourceCode = context.getSourceCode()
30+
return utils.defineTemplateBodyVisitor(context, {
31+
'VAttribute' (node) {
32+
if (!node.value) {
33+
return
34+
}
35+
const range = [node.key.range[1], node.value.range[0]]
36+
const eqText = sourceCode.text.slice(range[0], range[1])
37+
const expect = eqText.trim()
38+
39+
if (eqText !== expect) {
40+
context.report({
41+
node: node.key,
42+
loc: {
43+
start: node.key.loc.end,
44+
end: node.value.loc.start
45+
},
46+
message: 'Unexpected spaces found around equal signs.',
47+
data: {},
48+
fix: fixer => fixer.replaceTextRange(range, expect)
49+
})
50+
}
51+
}
52+
})
53+
}
54+
}

‎tests/lib/rules/no-spaces-around-equal-signs-in-attribute.js

+234
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
/**
2+
* @author Yosuke Ota
3+
*/
4+
'use strict'
5+
6+
// ------------------------------------------------------------------------------
7+
// Requirements
8+
// ------------------------------------------------------------------------------
9+
10+
const rule = require('../../../lib/rules/no-spaces-around-equal-signs-in-attribute')
11+
const RuleTester = require('eslint').RuleTester
12+
13+
// ------------------------------------------------------------------------------
14+
// Tests
15+
// ------------------------------------------------------------------------------
16+
17+
const tester = new RuleTester({
18+
parser: 'vue-eslint-parser'
19+
})
20+
21+
tester.run('no-spaces-around-equal-signs-in-attribute', rule, {
22+
valid: [
23+
'<template><div attr="value" /></template>',
24+
'<template><div attr="" /></template>',
25+
'<template><div attr=\'value\' /></template>',
26+
'<template><div attr=value /></template>',
27+
'<template><div attr /></template>',
28+
'<template><div/></template>',
29+
`<template>
30+
<div
31+
is="header"
32+
v-for="item in items"
33+
v-if="!visible"
34+
v-once
35+
id="uniqueID"
36+
ref="header"
37+
v-model="headerData"
38+
myProp="prop"
39+
@click="functionCall"
40+
v-text="textContent">
41+
</div>
42+
</template>`
43+
],
44+
invalid: [
45+
{
46+
code: '<template><div attr = "value" /></template>',
47+
output: '<template><div attr="value" /></template>',
48+
errors: [
49+
{
50+
message: 'Unexpected spaces found around equal signs.',
51+
line: 1,
52+
column: 20,
53+
endLine: 1,
54+
endColumn: 23
55+
}
56+
]
57+
},
58+
{
59+
code: '<template><div attr = "" /></template>',
60+
output: '<template><div attr="" /></template>',
61+
errors: [
62+
{
63+
message: 'Unexpected spaces found around equal signs.',
64+
line: 1,
65+
column: 20,
66+
endLine: 1,
67+
endColumn: 23
68+
}
69+
]
70+
},
71+
{
72+
code: '<template><div attr = \'value\' /></template>',
73+
output: '<template><div attr=\'value\' /></template>',
74+
errors: [
75+
{
76+
message: 'Unexpected spaces found around equal signs.',
77+
line: 1,
78+
column: 20,
79+
endLine: 1,
80+
endColumn: 23
81+
}
82+
]
83+
},
84+
{
85+
code: '<template><div attr = value /></template>',
86+
output: '<template><div attr=value /></template>',
87+
errors: [
88+
{
89+
message: 'Unexpected spaces found around equal signs.',
90+
line: 1,
91+
column: 20,
92+
endLine: 1,
93+
endColumn: 23
94+
}
95+
]
96+
},
97+
{
98+
code: '<template><div attr \t\n = \t\n "value" /></template>',
99+
output: '<template><div attr="value" /></template>',
100+
errors: [
101+
{
102+
message: 'Unexpected spaces found around equal signs.',
103+
line: 1,
104+
column: 20,
105+
endLine: 3,
106+
endColumn: 2
107+
}
108+
]
109+
},
110+
{
111+
code: '<template><div attr ="value" /></template>',
112+
output: '<template><div attr="value" /></template>',
113+
errors: [
114+
{
115+
message: 'Unexpected spaces found around equal signs.',
116+
line: 1,
117+
column: 20,
118+
endLine: 1,
119+
endColumn: 22
120+
}
121+
]
122+
},
123+
{
124+
code: '<template><div attr= "value" /></template>',
125+
output: '<template><div attr="value" /></template>',
126+
errors: [
127+
{
128+
message: 'Unexpected spaces found around equal signs.',
129+
line: 1,
130+
column: 20,
131+
endLine: 1,
132+
endColumn: 22
133+
}
134+
]
135+
},
136+
{
137+
code:
138+
`<template>
139+
<div
140+
is = "header"
141+
v-for = "item in items"
142+
v-if = "!visible"
143+
v-once
144+
id = "uniqueID"
145+
ref = "header"
146+
v-model = "headerData"
147+
myProp = "prop"
148+
@click = "functionCall"
149+
v-text = "textContent">
150+
</div>
151+
</template>`,
152+
output:
153+
`<template>
154+
<div
155+
is="header"
156+
v-for="item in items"
157+
v-if="!visible"
158+
v-once
159+
id="uniqueID"
160+
ref="header"
161+
v-model="headerData"
162+
myProp="prop"
163+
@click="functionCall"
164+
v-text="textContent">
165+
</div>
166+
</template>`,
167+
errors: [
168+
{
169+
message: 'Unexpected spaces found around equal signs.',
170+
line: 3,
171+
column: 15,
172+
endLine: 3,
173+
endColumn: 18
174+
},
175+
{
176+
message: 'Unexpected spaces found around equal signs.',
177+
line: 4,
178+
column: 18,
179+
endLine: 4,
180+
endColumn: 21
181+
},
182+
{
183+
message: 'Unexpected spaces found around equal signs.',
184+
line: 5,
185+
column: 17,
186+
endLine: 5,
187+
endColumn: 20
188+
},
189+
{
190+
message: 'Unexpected spaces found around equal signs.',
191+
line: 7,
192+
column: 15,
193+
endLine: 7,
194+
endColumn: 18
195+
},
196+
{
197+
message: 'Unexpected spaces found around equal signs.',
198+
line: 8,
199+
column: 16,
200+
endLine: 8,
201+
endColumn: 19
202+
},
203+
{
204+
message: 'Unexpected spaces found around equal signs.',
205+
line: 9,
206+
column: 20,
207+
endLine: 9,
208+
endColumn: 23
209+
},
210+
{
211+
message: 'Unexpected spaces found around equal signs.',
212+
line: 10,
213+
column: 19,
214+
endLine: 10,
215+
endColumn: 22
216+
},
217+
{
218+
message: 'Unexpected spaces found around equal signs.',
219+
line: 11,
220+
column: 19,
221+
endLine: 11,
222+
endColumn: 22
223+
},
224+
{
225+
message: 'Unexpected spaces found around equal signs.',
226+
line: 12,
227+
column: 19,
228+
endLine: 12,
229+
endColumn: 22
230+
}
231+
]
232+
}
233+
]
234+
})

0 commit comments

Comments
 (0)