Skip to content

Commit 501cef9

Browse files
ota-meshiota-meshi
authored
Add vue/max-len rule (#959)
1 parent c19c37b commit 501cef9

File tree

6 files changed

+2067
-0
lines changed

6 files changed

+2067
-0
lines changed

‎docs/rules/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ For example:
153153
| [vue/key-spacing](./key-spacing.md) | enforce consistent spacing between keys and values in object literal properties | :wrench: |
154154
| [vue/keyword-spacing](./keyword-spacing.md) | enforce consistent spacing before and after keywords | :wrench: |
155155
| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name | |
156+
| [vue/max-len](./max-len.md) | enforce a maximum line length | |
156157
| [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
157158
| [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: |
158159
| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: |

‎docs/rules/max-len.md

+329
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,329 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/max-len
5+
description: enforce a maximum line length
6+
---
7+
# vue/max-len
8+
> enforce a maximum line length
9+
10+
## :book: Rule Details
11+
12+
This rule enforces a maximum line length to increase code readability and maintainability.
13+
This rule is the similar rule as core [max-len] rule but it applies to the source code in `.vue`.
14+
15+
<eslint-code-block :rules="{'vue/max-len': ['error']}">
16+
17+
```vue
18+
<template>
19+
<!-- ✓ GOOD -->
20+
<div>
21+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
22+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
23+
</div>
24+
25+
<!-- ✗ BAD -->
26+
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
27+
<div>
28+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
29+
</div>
30+
</template>
31+
32+
<script>
33+
/* ✓ GOOD */
34+
var foo = {
35+
"bar": "This is a bar.",
36+
"baz": { "qux": "This is a qux" },
37+
"easier": "to read"
38+
};
39+
40+
/* ✗ BAD */
41+
var foo = { "bar": "This is a bar.", "baz": { "qux": "This is a qux" }, "difficult": "to read" };
42+
</script>
43+
44+
<style>
45+
/* ignore */
46+
.ignore-stylesheet .blocks-other-than-script-and-template-are-ignored .this-line-has-a-length-of-100
47+
{}
48+
</style>
49+
```
50+
51+
</eslint-code-block>
52+
53+
## :wrench: Options
54+
55+
```js
56+
{
57+
"vue/max-len": ["error", {
58+
"code": 80,
59+
"template": 80,
60+
"tabWidth": 2,
61+
"comments": 80,
62+
"ignorePattern": "",
63+
"ignoreComments": false,
64+
"ignoreTrailingComments": false,
65+
"ignoreUrls": false,
66+
"ignoreStrings": false,
67+
"ignoreTemplateLiterals": false,
68+
"ignoreRegExpLiterals": false,
69+
"ignoreHTMLAttributeValues": false,
70+
"ignoreHTMLTextContents": false,
71+
}]
72+
}
73+
```
74+
75+
- `code` ... enforces a maximum line length. default `80`
76+
- `template` ... enforces a maximum line length for `<template>`. defaults to value of `code`
77+
- `tabWidth` ... specifies the character width for tab characters. default `2`
78+
- `comments` ... enforces a maximum line length for comments. defaults to value of `code`
79+
- `ignorePattern` ... ignores lines matching a regular expression. can only match a single line and need to be double escaped when written in YAML or JSON
80+
- `ignoreComments` ... if `true`, ignores all trailing comments and comments on their own line. default `false`
81+
- `ignoreTrailingComments` ... if `true`, ignores only trailing comments. default `false`
82+
- `ignoreUrls` ... if `true`, ignores lines that contain a URL. default `false`
83+
- `ignoreStrings` ... if `true`, ignores lines that contain a double-quoted or single-quoted string. default `false`
84+
- `ignoreTemplateLiterals` ... if `true`, ignores lines that contain a template literal. default `false`
85+
- `ignoreRegExpLiterals` ... if `true`, ignores lines that contain a RegExp literal. default `false`
86+
- `ignoreHTMLAttributeValues` ... if `true`, ignores lines that contain a HTML attribute value. default `false`
87+
- `ignoreHTMLTextContents` ... if `true`, ignores lines that contain a HTML text content. default `false`
88+
89+
### `"code": 40`
90+
91+
<eslint-code-block :rules="{'vue/max-len': ['error', {code: 40}]}">
92+
93+
```vue
94+
<template>
95+
<!-- ✓ GOOD -->
96+
<div>line length is 40 ........ </div>
97+
98+
<!-- ✗ BAD -->
99+
<div>line length is 50 .................. </div>
100+
</template>
101+
102+
<script>
103+
/* ✓ GOOD */
104+
var foo = ['line', 'length', 'is', '40']
105+
106+
/* ✗ BAD */
107+
var foo = ['line', 'length', 'is', '50', '......']
108+
</script>
109+
```
110+
111+
</eslint-code-block>
112+
113+
114+
### `"template": 120`
115+
116+
<eslint-code-block :rules="{'vue/max-len': ['error', {template: 120}]}">
117+
118+
```vue
119+
<template>
120+
<!-- ✓ GOOD -->
121+
<div>line length is 120 ....................................................................................... </div>
122+
123+
<!-- ✗ BAD -->
124+
<div>line length is 121 ........................................................................................ </div>
125+
</template>
126+
127+
<script>
128+
/* ✗ BAD */
129+
var foo = ['line', 'length', 'is', '81', '......', '......', '......', '......'];
130+
</script>
131+
```
132+
133+
</eslint-code-block>
134+
135+
### `"comments": 65`
136+
137+
<eslint-code-block :rules="{'vue/max-len': ['error', {comments: 65}]}">
138+
139+
```vue
140+
<template>
141+
<!-- ✓ GOOD -->
142+
<!--
143+
This is a comment that does not violates
144+
the maximum line length we have specified
145+
-->
146+
147+
<!-- ✗ BAD -->
148+
<!--
149+
This is a comment that violates the maximum line length we have specified
150+
-->
151+
</template>
152+
153+
<script>
154+
/* ✓ GOOD */
155+
/**
156+
* This is a comment that does not violates
157+
* the maximum line length we have specified
158+
*/
159+
160+
/* ✗ BAD */
161+
/**
162+
* This is a comment that violates the maximum line length we have specified
163+
*/
164+
</script>
165+
```
166+
167+
</eslint-code-block>
168+
169+
### `"ignoreComments": true`
170+
171+
<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreComments: true}]}">
172+
173+
```vue
174+
<template>
175+
<!-- ✓ GOOD -->
176+
<!-- This is a really really really really really really really really really long comment -->
177+
</template>
178+
179+
<script>
180+
/* ✓ GOOD */
181+
/**
182+
* This is a really really really really really really really really really long comment
183+
*/
184+
</script>
185+
```
186+
187+
</eslint-code-block>
188+
189+
### `"ignoreTrailingComments": true`
190+
191+
<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreTrailingComments: true}]}">
192+
193+
```vue
194+
<template>
195+
<!-- ✓ GOOD -->
196+
<div /><!-- This is a really really really really really really really really long comment -->
197+
198+
<!-- ✗ BAD -->
199+
<!-- This is a really really really really really really really really long comment -->
200+
</template>
201+
202+
<script>
203+
/* ✓ GOOD */
204+
var foo = 'bar'; // This is a really really really really really really really really long comment
205+
206+
/* ✗ BAD */
207+
// This is a really really really really really really really really long comment
208+
</script>
209+
```
210+
211+
</eslint-code-block>
212+
213+
### `"ignoreUrls": true`
214+
215+
<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreUrls: true}]}">
216+
217+
```vue
218+
<template>
219+
<!-- ✓ GOOD -->
220+
<div style="background-image: url('https://www.example.com/really/really/really/really/really/really/really/long')" />
221+
</template>
222+
223+
<script>
224+
/* ✓ GOOD */
225+
var url = 'https://www.example.com/really/really/really/really/really/really/really/long';
226+
</script>
227+
```
228+
229+
</eslint-code-block>
230+
231+
### `"ignoreStrings": true`
232+
233+
<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreStrings: true}]}">
234+
235+
```vue
236+
<template>
237+
<!-- ✓ GOOD -->
238+
<div :title="'this is a really really really really really really long string!'" />
239+
240+
<!-- ✗ BAD -->
241+
<div title="this is a really really really really really really long attribute value!" />
242+
<div>this is a really really really really really really really long text content!</div>
243+
</template>
244+
245+
<script>
246+
/* ✓ GOOD */
247+
var longString = 'this is a really really really really really really long string!';
248+
</script>
249+
```
250+
251+
</eslint-code-block>
252+
253+
### `"ignoreTemplateLiterals": true`
254+
255+
<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreTemplateLiterals: true}]}">
256+
257+
```vue
258+
<template>
259+
<!-- ✓ GOOD -->
260+
<div :title="`this is a really really really really really long template literal!`" />
261+
</template>
262+
263+
<script>
264+
/* ✓ GOOD */
265+
var longTemplateLiteral = `this is a really really really really really long template literal!`;
266+
</script>
267+
```
268+
269+
</eslint-code-block>
270+
271+
### `"ignoreRegExpLiterals": true`
272+
273+
<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreRegExpLiterals: true}]}">
274+
275+
```vue
276+
<template>
277+
<!-- ✓ GOOD -->
278+
<div :class="{
279+
foo: /this is a really really really really really long regular expression!/.test(bar)
280+
}" />
281+
</template>
282+
283+
<script>
284+
/* ✓ GOOD */
285+
var longRegExpLiteral = /this is a really really really really really long regular expression!/;
286+
</script>
287+
```
288+
289+
</eslint-code-block>
290+
291+
### `"ignoreHTMLAttributeValues": true`
292+
293+
<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreHTMLAttributeValues: true}]}">
294+
295+
```vue
296+
<template>
297+
<!-- ✓ GOOD -->
298+
<div title="this is a really really really really really really long attribute value!" />
299+
300+
<!-- ✗ BAD -->
301+
<div :title="'this is a really really really really really really long string!'" />
302+
</template>
303+
```
304+
305+
</eslint-code-block>
306+
307+
### `"ignoreHTMLTextContents": true`
308+
309+
<eslint-code-block :rules="{'vue/max-len': ['error', {ignoreHTMLTextContents: true}]}">
310+
311+
```vue
312+
<template>
313+
<!-- ✓ GOOD -->
314+
<div>this is a really really really really really really really long text content!</div>
315+
</template>
316+
```
317+
318+
</eslint-code-block>
319+
320+
## :books: Further reading
321+
322+
- [max-len]
323+
324+
[max-len]: https://eslint.org/docs/rules/max-len
325+
326+
## :mag: Implementation
327+
328+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/max-len.js)
329+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/max-len.js)

‎lib/configs/no-layout-rules.js

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ module.exports = {
1919
'vue/key-spacing': 'off',
2020
'vue/keyword-spacing': 'off',
2121
'vue/max-attributes-per-line': 'off',
22+
'vue/max-len': 'off',
2223
'vue/multiline-html-element-content-newline': 'off',
2324
'vue/mustache-interpolation-spacing': 'off',
2425
'vue/no-multi-spaces': 'off',

‎lib/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ module.exports = {
3232
'keyword-spacing': require('./rules/keyword-spacing'),
3333
'match-component-file-name': require('./rules/match-component-file-name'),
3434
'max-attributes-per-line': require('./rules/max-attributes-per-line'),
35+
'max-len': require('./rules/max-len'),
3536
'multiline-html-element-content-newline': require('./rules/multiline-html-element-content-newline'),
3637
'mustache-interpolation-spacing': require('./rules/mustache-interpolation-spacing'),
3738
'name-property-casing': require('./rules/name-property-casing'),

0 commit comments

Comments
 (0)