Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit af491ab

Browse files
Add vue/prefer-template rule (#1141)
1 parent e633212 commit af491ab

File tree

5 files changed

+99
-0
lines changed

5 files changed

+99
-0
lines changed

‎docs/rules/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,7 @@ For example:
294294
| [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: |
295295
| [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces | :wrench: |
296296
| [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: |
297+
| [vue/prefer-template](./prefer-template.md) | require template literals instead of string concatenation | :wrench: |
297298
| [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported | |
298299
| [vue/require-explicit-emits](./require-explicit-emits.md) | require `emits` option with name triggered by `$emit()` | |
299300
| [vue/require-name-property](./require-name-property.md) | require a name property in Vue components | |

‎docs/rules/prefer-template.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/prefer-template
5+
description: require template literals instead of string concatenation
6+
---
7+
# vue/prefer-template
8+
> require template literals instead of string concatenation
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+
This rule is the same rule as core [prefer-template] rule but it applies to the expressions in `<template>`.
13+
14+
## :books: Further reading
15+
16+
- [prefer-template]
17+
18+
[prefer-template]: https://eslint.org/docs/rules/prefer-template
19+
20+
## :mag: Implementation
21+
22+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-template.js)
23+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-template.js)

‎lib/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ module.exports = {
9191
'object-curly-spacing': require('./rules/object-curly-spacing'),
9292
'order-in-components': require('./rules/order-in-components'),
9393
'padding-line-between-blocks': require('./rules/padding-line-between-blocks'),
94+
'prefer-template': require('./rules/prefer-template'),
9495
'prop-name-casing': require('./rules/prop-name-casing'),
9596
'require-component-is': require('./rules/require-component-is'),
9697
'require-default-prop': require('./rules/require-default-prop'),

‎lib/rules/prefer-template.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* @author Yosuke Ota
3+
*/
4+
'use strict'
5+
6+
const { wrapCoreRule } = require('../utils')
7+
8+
// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
9+
module.exports = wrapCoreRule(
10+
require('eslint/lib/rules/prefer-template')
11+
)

‎tests/lib/rules/prefer-template.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/**
2+
* @author Yosuke Ota
3+
*/
4+
'use strict'
5+
6+
const RuleTester = require('eslint').RuleTester
7+
const rule = require('../../../lib/rules/prefer-template')
8+
9+
const tester = new RuleTester({
10+
parser: require.resolve('vue-eslint-parser'),
11+
parserOptions: { ecmaVersion: 2020 }
12+
})
13+
14+
tester.run('prefer-template', rule, {
15+
valid: [
16+
`
17+
<template>
18+
<div :class="[\`foo-\${bar}\`]" />
19+
</template>
20+
`,
21+
`
22+
<template>
23+
<div :[\`foo\${bar}\`]="value" />
24+
</template>
25+
`
26+
],
27+
invalid: [
28+
{
29+
code: `
30+
<template>
31+
<div :class="['foo-' + bar]" />
32+
</template>
33+
`,
34+
output: `
35+
<template>
36+
<div :class="[\`foo-\${ bar}\`]" />
37+
</template>
38+
`,
39+
errors: [
40+
{
41+
message: 'Unexpected string concatenation.',
42+
line: 3
43+
}
44+
]
45+
},
46+
{
47+
code: `
48+
<template>
49+
<div :['foo'+bar]="value" />
50+
</template>`,
51+
output: `
52+
<template>
53+
<div :[\`foo\${bar}\`]="value" />
54+
</template>`,
55+
errors: [
56+
{
57+
message: 'Unexpected string concatenation.',
58+
line: 3
59+
}
60+
]
61+
}
62+
]
63+
})

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /