Add vue/dot-notation rule (#1173)

Author: ota-meshi

docs/rules/README.md

@@ -283,6 +283,7 @@ For example:
 | [vue/comma-style](./comma-style.md) | enforce consistent comma style | :wrench: |
 | [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
 | [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots | :wrench: |
+| [vue/dot-notation](./dot-notation.md) | enforce dot notation whenever possible | :wrench: |
 | [vue/eqeqeq](./eqeqeq.md) | require the use of `===` and `!==` | :wrench: |
 | [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: |
 | [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |

docs/rules/dot-notation.md

@@ -0,0 +1,23 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/dot-notation
+description: enforce dot notation whenever possible
+---
+# vue/dot-notation
+> enforce dot notation whenever possible
+
+- :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.
+
+This rule is the same rule as core [dot-notation] rule but it applies to the expressions in `<template>`.
+
+## :books: Further reading
+
+- [dot-notation]
+
+[dot-notation]: https://eslint.org/docs/rules/dot-notation
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/dot-notation.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/dot-notation.js)

lib/index.js

@@ -23,6 +23,7 @@ module.exports = {
     'component-tags-order': require('./rules/component-tags-order'),
     'custom-event-name-casing': require('./rules/custom-event-name-casing'),
     'dot-location': require('./rules/dot-location'),
+    'dot-notation': require('./rules/dot-notation'),
     eqeqeq: require('./rules/eqeqeq'),
     'html-closing-bracket-newline': require('./rules/html-closing-bracket-newline'),
     'html-closing-bracket-spacing': require('./rules/html-closing-bracket-spacing'),

lib/rules/dot-notation.js

@@ -0,0 +1,9 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const { wrapCoreRule } = require('../utils')
+
+// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+module.exports = wrapCoreRule(require('eslint/lib/rules/dot-notation'))

tests/lib/rules/dot-notation.js

@@ -0,0 +1,34 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/dot-notation')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2015 }
+})
+
+tester.run('dot-notation', rule, {
+  valid: [
+    `<template><div :attr="foo.bar" /></template>`,
+    '<template><div attr="foo[\'bar\']" /></template>',
+    `<template><div :[foo.bar]="a" /></template>`,
+    `<template><div :attr="foo[bar]" /></template>`,
+    `<template><div :[foo[bar]]="a" /></template>`
+  ],
+  invalid: [
+    {
+      code: `<template><div :attr="foo['bar']" /></template>`,
+      output: `<template><div :attr="foo.bar" /></template>`,
+      errors: ['["bar"] is better written in dot notation.']
+    },
+    {
+      code: `<template><div :[foo[\`bar\`]]="a" /></template>`,
+      output: `<template><div :[foo.bar]="a" /></template>`,
+      errors: ['[`bar`] is better written in dot notation.']
+    }
+  ]
+})