Add vue/operator-linebreak rule (#1200)

* Add `vue/operator-linebreak` rule

* fix

Author: ota-meshi

docs/rules/README.md

@@ -333,6 +333,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
 | [vue/object-curly-newline](./object-curly-newline.md) | enforce consistent line breaks inside braces | :wrench: |
 | [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces | :wrench: |
 | [vue/object-property-newline](./object-property-newline.md) | enforce placing object properties on separate lines | :wrench: |
+| [vue/operator-linebreak](./operator-linebreak.md) | enforce consistent linebreak style for operators | :wrench: |
 | [vue/prefer-template](./prefer-template.md) | require template literals instead of string concatenation | :wrench: |
 | [vue/space-in-parens](./space-in-parens.md) | enforce consistent spacing inside parentheses | :wrench: |
 | [vue/space-infix-ops](./space-infix-ops.md) | require spacing around infix operators | :wrench: |

docs/rules/operator-linebreak.md

@@ -0,0 +1,25 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/operator-linebreak
+description: enforce consistent linebreak style for operators
+---
+# vue/operator-linebreak
+> enforce consistent linebreak style for operators
+
+- :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 [operator-linebreak] rule but it applies to the expressions in `<template>`.
+
+## :books: Further reading
+
+- [operator-linebreak]
+
+[operator-linebreak]: https://eslint.org/docs/rules/operator-linebreak
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/operator-linebreak.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/operator-linebreak.js)
+
+<sup>Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/operator-linebreak)</sup>

lib/configs/no-layout-rules.js

@@ -33,6 +33,7 @@ module.exports = {
     'vue/object-curly-newline': 'off',
     'vue/object-curly-spacing': 'off',
     'vue/object-property-newline': 'off',
+    'vue/operator-linebreak': 'off',
     'vue/padding-line-between-blocks': 'off',
     'vue/script-indent': 'off',
     'vue/singleline-html-element-content-newline': 'off',

lib/index.js

@@ -108,6 +108,7 @@ module.exports = {
     'object-curly-spacing': require('./rules/object-curly-spacing'),
     'object-property-newline': require('./rules/object-property-newline'),
     'one-component-per-file': require('./rules/one-component-per-file'),
+    'operator-linebreak': require('./rules/operator-linebreak'),
     'order-in-components': require('./rules/order-in-components'),
     'padding-line-between-blocks': require('./rules/padding-line-between-blocks'),
     'prefer-template': require('./rules/prefer-template'),

lib/rules/operator-linebreak.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/operator-linebreak'))

tests/lib/rules/operator-linebreak.js

@@ -0,0 +1,129 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/operator-linebreak')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2020 }
+})
+
+tester.run('operator-linebreak', rule, {
+  valid: [
+    `
+    <template>
+      <div :foo="1 + 2" />
+    </template>
+    `,
+    {
+      code: `
+      <template>
+        <div :foo="1 + 2" />
+      </template>
+      `,
+      options: ['before']
+    },
+    {
+      code: `
+      <template>
+        <div :foo="1 + 2" />
+      </template>
+      `,
+      options: ['none']
+    },
+    `
+    <template>
+      <div :[foo+bar]="value" />
+    </template>
+    `,
+    {
+      code: `
+      <template>
+        <div :[foo+bar]="value" />
+      </template>
+      `,
+      options: ['before']
+    },
+    {
+      code: `
+      <template>
+        <div :[foo+bar]="value" />
+      </template>
+      `,
+      options: ['none']
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <template>
+        <div :foo="1
+          + 2" />
+      </template>
+      `,
+      output: `
+      <template>
+        <div :foo="1 +
+          2" />
+      </template>
+      `,
+      errors: [
+        {
+          message: "'+' should be placed at the end of the line.",
+          line: 4
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div :foo="1 +
+          2" />
+      </template>
+      `,
+      output: `
+      <template>
+        <div :foo="1
+          + 2" />
+      </template>
+      `,
+      options: ['before'],
+      errors: [
+        {
+          message: "'+' should be placed at the beginning of the line.",
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div :foo="1 +
+          2" />
+        <div :foo="1
+          + 2" />
+      </template>
+      `,
+      output: `
+      <template>
+        <div :foo="1 +          2" />
+        <div :foo="1          + 2" />
+      </template>
+      `,
+      options: ['none'],
+      errors: [
+        {
+          message: "There should be no line break before or after '+'.",
+          line: 3
+        },
+        {
+          message: "There should be no line break before or after '+'.",
+          line: 6
+        }
+      ]
+    }
+  ]
+})