Skip to content

Commit 7fd2e42

Browse files
authored
Add vue/dot-notation rule (#1173)
1 parent 4cd7734 commit 7fd2e42

File tree

5 files changed

+68
-0
lines changed

5 files changed

+68
-0
lines changed

docs/rules/README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,7 @@ For example:
283283
| [vue/comma-style](./comma-style.md) | enforce consistent comma style | :wrench: |
284284
| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
285285
| [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots | :wrench: |
286+
| [vue/dot-notation](./dot-notation.md) | enforce dot notation whenever possible | :wrench: |
286287
| [vue/eqeqeq](./eqeqeq.md) | require the use of `===` and `!==` | :wrench: |
287288
| [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: |
288289
| [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |

docs/rules/dot-notation.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/dot-notation
5+
description: enforce dot notation whenever possible
6+
---
7+
# vue/dot-notation
8+
> enforce dot notation whenever possible
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 [dot-notation] rule but it applies to the expressions in `<template>`.
13+
14+
## :books: Further reading
15+
16+
- [dot-notation]
17+
18+
[dot-notation]: https://eslint.org/docs/rules/dot-notation
19+
20+
## :mag: Implementation
21+
22+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/dot-notation.js)
23+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/dot-notation.js)

lib/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ module.exports = {
2323
'component-tags-order': require('./rules/component-tags-order'),
2424
'custom-event-name-casing': require('./rules/custom-event-name-casing'),
2525
'dot-location': require('./rules/dot-location'),
26+
'dot-notation': require('./rules/dot-notation'),
2627
eqeqeq: require('./rules/eqeqeq'),
2728
'html-closing-bracket-newline': require('./rules/html-closing-bracket-newline'),
2829
'html-closing-bracket-spacing': require('./rules/html-closing-bracket-spacing'),

lib/rules/dot-notation.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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(require('eslint/lib/rules/dot-notation'))

tests/lib/rules/dot-notation.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* @author Yosuke Ota
3+
*/
4+
'use strict'
5+
6+
const RuleTester = require('eslint').RuleTester
7+
const rule = require('../../../lib/rules/dot-notation')
8+
9+
const tester = new RuleTester({
10+
parser: require.resolve('vue-eslint-parser'),
11+
parserOptions: { ecmaVersion: 2015 }
12+
})
13+
14+
tester.run('dot-notation', rule, {
15+
valid: [
16+
`<template><div :attr="foo.bar" /></template>`,
17+
'<template><div attr="foo[\'bar\']" /></template>',
18+
`<template><div :[foo.bar]="a" /></template>`,
19+
`<template><div :attr="foo[bar]" /></template>`,
20+
`<template><div :[foo[bar]]="a" /></template>`
21+
],
22+
invalid: [
23+
{
24+
code: `<template><div :attr="foo['bar']" /></template>`,
25+
output: `<template><div :attr="foo.bar" /></template>`,
26+
errors: ['["bar"] is better written in dot notation.']
27+
},
28+
{
29+
code: `<template><div :[foo[\`bar\`]]="a" /></template>`,
30+
output: `<template><div :[foo.bar]="a" /></template>`,
31+
errors: ['[`bar`] is better written in dot notation.']
32+
}
33+
]
34+
})

0 commit comments

Comments
 (0)