From 9122b405f79c640f5cc30746993de76bfef4a637 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Sat, 23 May 2020 11:15:44 +0900
Subject: [PATCH 1/3] Add `vue/no-extra-parens` rule

---
 docs/rules/README.md               |   2 +
 docs/rules/no-extra-parens.md      |  45 +++++++
 lib/configs/no-layout-rules.js     |   1 +
 lib/index.js                       |   2 +
 lib/rules/no-extra-parens.js       | 177 +++++++++++++++++++++++++++
 lib/utils/index.js                 |  55 ++++++---
 tests/lib/rules/no-extra-parens.js | 188 +++++++++++++++++++++++++++++
 7 files changed, 451 insertions(+), 19 deletions(-)
 create mode 100644 docs/rules/no-extra-parens.md
 create mode 100644 lib/rules/no-extra-parens.js
 create mode 100644 tests/lib/rules/no-extra-parens.js

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 8916464e6..2d40a8a3e 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -291,6 +291,7 @@ For example:
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
 | [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
 | [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns |  |
+| [vue/no-extra-parens](./no-extra-parens.md) | disallow unnecessary parentheses | :wrench: |
 | [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace |  |
 | [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property |  |
 | [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  |
@@ -308,6 +309,7 @@ For example:
 | [vue/require-name-property](./require-name-property.md) | require a name property in Vue components |  |
 | [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: |
 | [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components |  |
+| [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: |
 | [vue/space-unary-ops](./space-unary-ops.md) | enforce consistent spacing before or after unary operators | :wrench: |
 | [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: |
diff --git a/docs/rules/no-extra-parens.md b/docs/rules/no-extra-parens.md
new file mode 100644
index 000000000..4726907d3
--- /dev/null
+++ b/docs/rules/no-extra-parens.md
@@ -0,0 +1,45 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-extra-parens
+description: disallow unnecessary parentheses
+---
+# vue/no-extra-parens
+> disallow unnecessary parentheses
+
+- :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 [no-extra-parens] rule but it applies to the expressions in `<template>`.
+
+## :book: Rule Details
+
+This rule restricts the use of parentheses to only where they are necessary.  
+This rule extends the core [no-extra-parens] rule and applies it to the `<template>`. This rule also checks some Vue.js syntax.
+
+<eslint-code-block fix :rules="{'vue/no-extra-parens': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div :class="foo + bar" />
+  {{ foo + bar }}
+  {{ foo + bar | filter }}
+  <!-- ✗ BAD -->
+  <div :class="(foo + bar)" />
+  {{ (foo + bar) }}
+  {{ (foo + bar) | filter }}
+</template>
+```
+
+</eslint-code-block>
+
+## :books: Further reading
+
+- [no-extra-parens]
+
+[no-extra-parens]: https://eslint.org/docs/rules/no-extra-parens
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-extra-parens.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-extra-parens.js)
diff --git a/lib/configs/no-layout-rules.js b/lib/configs/no-layout-rules.js
index 5a9487caa..ca7a6c35b 100644
--- a/lib/configs/no-layout-rules.js
+++ b/lib/configs/no-layout-rules.js
@@ -26,6 +26,7 @@ module.exports = {
     'vue/max-len': 'off',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/mustache-interpolation-spacing': 'off',
+    'vue/no-extra-parens': 'off',
     'vue/no-multi-spaces': 'off',
     'vue/no-spaces-around-equal-signs-in-attribute': 'off',
     'vue/object-curly-spacing': 'off',
diff --git a/lib/index.js b/lib/index.js
index 66c381b39..4749b6dd0 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -63,6 +63,7 @@ module.exports = {
     'no-duplicate-attr-inheritance': require('./rules/no-duplicate-attr-inheritance'),
     'no-duplicate-attributes': require('./rules/no-duplicate-attributes'),
     'no-empty-pattern': require('./rules/no-empty-pattern'),
+    'no-extra-parens': require('./rules/no-extra-parens'),
     'no-irregular-whitespace': require('./rules/no-irregular-whitespace'),
     'no-lifecycle-after-await': require('./rules/no-lifecycle-after-await'),
     'no-multi-spaces': require('./rules/no-multi-spaces'),
@@ -114,6 +115,7 @@ module.exports = {
     'script-indent': require('./rules/script-indent'),
     'singleline-html-element-content-newline': require('./rules/singleline-html-element-content-newline'),
     'sort-keys': require('./rules/sort-keys'),
+    'space-in-parens': require('./rules/space-in-parens'),
     'space-infix-ops': require('./rules/space-infix-ops'),
     'space-unary-ops': require('./rules/space-unary-ops'),
     'static-class-names-order': require('./rules/static-class-names-order'),
diff --git a/lib/rules/no-extra-parens.js b/lib/rules/no-extra-parens.js
new file mode 100644
index 000000000..c32969de2
--- /dev/null
+++ b/lib/rules/no-extra-parens.js
@@ -0,0 +1,177 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const { isParenthesized } = require('eslint-utils')
+const { wrapCoreRule } = require('../utils')
+
+// eslint-disable-next-line no-invalid-meta, no-invalid-meta-docs-categories
+module.exports = wrapCoreRule(
+  require('eslint/lib/rules/no-extra-parens'),
+  {
+    skipDynamicArguments: true,
+    create: createForVueSyntax
+  }
+)
+
+/**
+ * @typedef {import('vue-eslint-parser').AST.Token} Token
+ * @typedef {import('vue-eslint-parser').AST.ESLintExpression} Expression
+ * @typedef {import('vue-eslint-parser').AST.VExpressionContainer} VExpressionContainer
+ * @typedef {import('vue-eslint-parser').AST.VFilterSequenceExpression} VFilterSequenceExpression
+ */
+
+/**
+ * Check whether the given token is a left parenthesis.
+ * @param {Token} token The token to check.
+ * @returns {boolean} `true` if the token is a left parenthesis.
+ */
+function isLeftParen (token) {
+  return token.type === 'Punctuator' && token.value === '('
+}
+
+/**
+ * Check whether the given token is a right parenthesis.
+ * @param {Token} token The token to check.
+ * @returns {boolean} `true` if the token is a right parenthesis.
+ */
+function isRightParen (token) {
+  return token.type === 'Punctuator' && token.value === ')'
+}
+
+/**
+ * Check whether the given token is a left brace.
+ * @param {Token} token The token to check.
+ * @returns {boolean} `true` if the token is a left brace.
+ */
+function isLeftBrace (token) {
+  return token.type === 'Punctuator' && token.value === '{'
+}
+
+/**
+ * Check whether the given token is a right brace.
+ * @param {Token} token The token to check.
+ * @returns {boolean} `true` if the token is a right brace.
+ */
+function isRightBrace (token) {
+  return token.type === 'Punctuator' && token.value === '}'
+}
+
+/**
+ * Check whether the given token is a left bracket.
+ * @param {Token} token The token to check.
+ * @returns {boolean} `true` if the token is a left bracket.
+ */
+function isLeftBracket (token) {
+  return token.type === 'Punctuator' && token.value === '['
+}
+
+/**
+ * Check whether the given token is a right bracket.
+ * @param {Token} token The token to check.
+ * @returns {boolean} `true` if the token is a right bracket.
+ */
+function isRightBracket (token) {
+  return token.type === 'Punctuator' && token.value === ']'
+}
+
+/**
+ * Determines if a given expression node is an IIFE
+ * @param {ASTNode} node The node to check
+ * @returns {boolean} `true` if the given node is an IIFE
+ */
+function isIIFE (node) {
+  return node.type === 'CallExpression' && node.callee.type === 'FunctionExpression'
+}
+
+function createForVueSyntax (context) {
+  const tokenStore = context.parserServices.getTemplateBodyTokenStore && context.parserServices.getTemplateBodyTokenStore()
+
+  /**
+   * Checks if the given node turns into a filter when unwraped.
+   * @param {Expression} node node to evaluate
+   * @returns {boolean} `true` if the given node turns into a filter when unwraped.
+   */
+  function isUnwrapChangeToFilter (expression) {
+    let parenStack = null
+    for (const token of tokenStore.getTokens(expression)) {
+      if (!parenStack) {
+        if (token.value === '|') {
+          return true
+        }
+      } else {
+        if (parenStack.isUpToken(token)) {
+          parenStack = parenStack.upper
+          continue
+        }
+      }
+      if (isLeftParen(token)) {
+        parenStack = { isUpToken: isRightParen, upper: parenStack }
+      } else if (isLeftBracket(token)) {
+        parenStack = { isUpToken: isRightBracket, upper: parenStack }
+      } else if (isLeftBrace(token)) {
+        parenStack = { isUpToken: isRightBrace, upper: parenStack }
+      }
+    }
+    return false
+  }
+  /**
+   * @param {VExpressionContainer} node
+   */
+  function verify (node) {
+    let expression = node.expression
+    if (!expression) {
+      return
+    }
+
+    if (expression.type === 'VFilterSequenceExpression') {
+      expression = expression.expression
+    }
+
+    if (!isParenthesized(expression, tokenStore)) {
+      return
+    }
+
+    if (!isParenthesized(2, expression, tokenStore)) {
+      if (isIIFE(expression) && !isParenthesized(expression.callee, tokenStore)) {
+        return
+      }
+      if (expression.parent.type !== 'VFilterSequenceExpression' && isUnwrapChangeToFilter(expression)) {
+        return
+      }
+    }
+    report(expression)
+  }
+
+  /**
+   * Report the node
+   * @param {Expression} node node to evaluate
+   * @returns {void}
+   * @private
+   */
+  function report (node) {
+    const sourceCode = context.getSourceCode()
+    const leftParenToken = tokenStore.getTokenBefore(node)
+    const rightParenToken = tokenStore.getTokenAfter(node)
+
+    context.report({
+      node,
+      loc: leftParenToken.loc,
+      messageId: 'unexpected',
+      fix (fixer) {
+        const parenthesizedSource = sourceCode.text.slice(leftParenToken.range[1], rightParenToken.range[0])
+
+        return fixer.replaceTextRange([
+          leftParenToken.range[0],
+          rightParenToken.range[1]
+        ], parenthesizedSource)
+      }
+    })
+  }
+
+  return {
+    "VAttribute[directive=true][key.name.name='bind'] > VExpressionContainer": verify,
+    'VElement > VExpressionContainer': verify
+  }
+}
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 0f68bf11f..e4c8ec1fc 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -22,6 +22,7 @@
 
 /**
  * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ * @typedef {import('eslint').Rule.RuleModule} RuleModule
  * @typedef {import('vue-eslint-parser').AST.Token} Token
  */
 
@@ -154,28 +155,20 @@ module.exports = {
    * @param {Object} [scriptVisitor] The visitor to traverse the script.
    * @returns {Object} The merged visitor.
    */
-  defineTemplateBodyVisitor (context, templateBodyVisitor, scriptVisitor) {
-    if (context.parserServices.defineTemplateBodyVisitor == null) {
-      context.report({
-        loc: { line: 1, column: 0 },
-        message: 'Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error'
-      })
-      return {}
-    }
-    return context.parserServices.defineTemplateBodyVisitor(templateBodyVisitor, scriptVisitor)
-  },
+  defineTemplateBodyVisitor,
 
   /**
    * Wrap a given core rule to apply it to Vue.js template.
-   * @param {Rule} coreRule The core rule implementation to wrap.
+   * @param {RuleModule} coreRule The core rule implementation to wrap.
    * @param {Object} [options] The option of this rule.
-   * @param {string|undefined} options.category The category of this rule.
-   * @param {boolean|undefined} options.skipDynamicArguments If `true`, skip validation within dynamic arguments.
-   * @param {boolean|undefined} options.skipDynamicArgumentsReport If `true`, skip report within dynamic arguments.
-   * @returns {Rule} The wrapped rule implementation.
+   * @param {string} [options.category] The category of this rule.
+   * @param {boolean} [options.skipDynamicArguments] If `true`, skip validation within dynamic arguments.
+   * @param {boolean} [options.skipDynamicArgumentsReport] If `true`, skip report within dynamic arguments.
+   * @param {RuleModule["create"]} [options.create] If define, extend core rule.
+   * @returns {RuleModule} The wrapped rule implementation.
    */
   wrapCoreRule (coreRule, options) {
-    const { category, skipDynamicArguments, skipDynamicArgumentsReport } = options || {}
+    const { category, skipDynamicArguments, skipDynamicArgumentsReport, create } = options || {}
     return {
       create (context) {
         const tokenStore =
@@ -216,8 +209,12 @@ module.exports = {
           handlers['VDirectiveKey > VExpressionContainer:exit'] = () => { withinDynamicArguments = false }
         }
 
+        if (create) {
+          compositingVisitors(handlers, create(context))
+        }
+
         // Apply the handlers to templates.
-        return module.exports.defineTemplateBodyVisitor(context, handlers)
+        return defineTemplateBodyVisitor(context, handlers)
       },
 
       meta: Object.assign({}, coreRule.meta, {
@@ -1089,6 +1086,27 @@ module.exports = {
   }
 }
 
+/**
+ * Register the given visitor to parser services.
+ * If the parser service of `vue-eslint-parser` was not found,
+ * this generates a warning.
+ *
+ * @param {RuleContext} context The rule context to use parser services.
+ * @param {Object} templateBodyVisitor The visitor to traverse the template body.
+ * @param {Object} [scriptVisitor] The visitor to traverse the script.
+ * @returns {Object} The merged visitor.
+ */
+function defineTemplateBodyVisitor (context, templateBodyVisitor, scriptVisitor) {
+  if (context.parserServices.defineTemplateBodyVisitor == null) {
+    context.report({
+      loc: { line: 1, column: 0 },
+      message: 'Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error'
+    })
+    return {}
+  }
+  return context.parserServices.defineTemplateBodyVisitor(templateBodyVisitor, scriptVisitor)
+}
+
 /**
  * Unwrap typescript types like "X as F"
  * @template T
@@ -1294,8 +1312,7 @@ function getComponentComments (context) {
   return tokens
 }
 
-function compositingVisitors (...visitors) {
-  const visitor = {}
+function compositingVisitors (visitor, ...visitors) {
   for (const v of visitors) {
     for (const key in v) {
       if (visitor[key]) {
diff --git a/tests/lib/rules/no-extra-parens.js b/tests/lib/rules/no-extra-parens.js
new file mode 100644
index 000000000..693907e49
--- /dev/null
+++ b/tests/lib/rules/no-extra-parens.js
@@ -0,0 +1,188 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const { RuleTester } = require('eslint')
+const rule = require('../../../lib/rules/no-extra-parens')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2015 }
+})
+
+tester.run('no-extra-parens', rule, {
+  valid: [
+    `<template>
+      <button
+        :class="{
+          a: b || c,
+          [d + e]: f
+        }"
+      />
+    </template>`,
+    `<template>
+      <button
+        :class="a + b + c * d"
+        :class="[a + b + c * d]"
+      />
+    </template>`,
+    `<template>
+      <button
+        :[(a+b)+c]="foo"
+      />
+    </template>`,
+    `<template>
+      <button
+        :[(a+b)]="foo"
+      />
+    </template>`,
+
+    '<template><button :class="(a+b | bitwise)" /></template>',
+    '<template><button>{{ (foo + bar | bitwise) }}</button></template>',
+    '<template><button>{{ (function () {} ()) }}</button></template>'
+  ],
+  invalid: [
+    {
+      code: `
+      <template>
+        <button
+          :class="a + b + (c * d)"
+          :class="[a + b + (c * d)]"
+        />
+      </template>`,
+      output: `
+      <template>
+        <button
+          :class="a + b + c * d"
+          :class="[a + b + c * d]"
+        />
+      </template>`,
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 4
+        },
+        {
+          messageId: 'unexpected',
+          line: 5
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <button
+          :class="{
+            a: (b || c),
+            [(d + e)]: f
+          }"
+        />
+      </template>`,
+      output: `
+      <template>
+        <button
+          :class="{
+            a: b || c,
+            [d + e]: f
+          }"
+        />
+      </template>`,
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 5
+        },
+        {
+          messageId: 'unexpected',
+          line: 6
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <button
+          :class="(a+b)+c"
+        />
+      </template>`,
+      output: `
+      <template>
+        <button
+          :class="a+b+c"
+        />
+      </template>`,
+      errors: [
+        {
+          messageId: 'unexpected',
+          line: 4
+        }
+      ]
+    },
+    {
+      code: '<template><button :class="(a+b)" /></template>',
+      output: '<template><button :class="a+b" /></template>',
+      errors: [
+        {
+          messageId: 'unexpected',
+          column: 27
+        }
+      ]
+    },
+    {
+      code: '<template><button :class="(a+b) | filter" /></template>',
+      output: '<template><button :class="a+b | filter" /></template>',
+      errors: [{ messageId: 'unexpected' }]
+    },
+    {
+      code: '<template><button :class="((a+b | bitwise))" /></template>',
+      output: '<template><button :class="(a+b | bitwise)" /></template>',
+      errors: [{ messageId: 'unexpected' }]
+    },
+    {
+      code: '<template><button>{{ (foo + bar) }}</button></template>',
+      output: '<template><button>{{ foo + bar }}</button></template>',
+      errors: [
+        {
+          messageId: 'unexpected',
+          column: 22
+        }
+      ]
+    },
+    {
+      code: '<template><button>{{ (foo + bar) | filter }}</button></template>',
+      output: '<template><button>{{ foo + bar | filter }}</button></template>',
+      errors: [{ messageId: 'unexpected' }]
+    },
+    {
+      code: '<template><button>{{ ((foo + bar | bitwise)) }}</button></template>',
+      output: '<template><button>{{ (foo + bar | bitwise) }}</button></template>',
+      errors: [{ messageId: 'unexpected' }]
+    },
+    {
+      code: '<template><button>{{ (foo(bar|bitwise)) }}</button></template>',
+      output: '<template><button>{{ foo(bar|bitwise) }}</button></template>',
+      errors: [{ messageId: 'unexpected' }]
+    },
+    {
+      code: '<template><button>{{ ([foo|bitwise]) }}</button></template>',
+      output: '<template><button>{{ [foo|bitwise] }}</button></template>',
+      errors: [{ messageId: 'unexpected' }]
+    },
+    {
+      code: '<template><button>{{ ({foo:bar|bitwise}) }}</button></template>',
+      output: '<template><button>{{ {foo:bar|bitwise} }}</button></template>',
+      errors: [{ messageId: 'unexpected' }]
+    },
+    {
+      code: '<template><button>{{ ((function () {} ())) }}</button></template>',
+      output: '<template><button>{{ (function () {} ()) }}</button></template>',
+      errors: [{ messageId: 'unexpected' }]
+    },
+    {
+      code: '<template><button>{{ ((function () {})()) }}</button></template>',
+      output: '<template><button>{{ (function () {})() }}</button></template>',
+      errors: [{ messageId: 'unexpected' }]
+    }
+  ]
+})

From 81bb2092383bd577ee47c34af44dfd5dfa92f42e Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sat, 23 May 2020 18:22:17 +0900
Subject: [PATCH 2/3] update

---
 tests/lib/rules/no-extra-parens.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/tests/lib/rules/no-extra-parens.js b/tests/lib/rules/no-extra-parens.js
index 693907e49..35a571f9e 100644
--- a/tests/lib/rules/no-extra-parens.js
+++ b/tests/lib/rules/no-extra-parens.js
@@ -75,7 +75,7 @@ tester.run('no-extra-parens', rule, {
         <button
           :class="{
             a: (b || c),
-            [(d + e)]: f
+            // [(d + e)]: f // valid in eslint v6.0
           }"
         />
       </template>`,
@@ -84,7 +84,7 @@ tester.run('no-extra-parens', rule, {
         <button
           :class="{
             a: b || c,
-            [d + e]: f
+            // [(d + e)]: f // valid in eslint v6.0
           }"
         />
       </template>`,
@@ -92,11 +92,12 @@ tester.run('no-extra-parens', rule, {
         {
           messageId: 'unexpected',
           line: 5
-        },
-        {
-          messageId: 'unexpected',
-          line: 6
         }
+        // valid in eslint v6.0
+        // {
+        //   messageId: 'unexpected',
+        //   line: 6
+        // }
       ]
     },
     {

From dc499a398f8287c6ccf1b0639582609ba5a7c892 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sun, 24 May 2020 06:33:38 +0900
Subject: [PATCH 3/3] update

---
 lib/rules/no-extra-parens.js       | 2 +-
 tests/lib/rules/no-extra-parens.js | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/lib/rules/no-extra-parens.js b/lib/rules/no-extra-parens.js
index c32969de2..d875659b5 100644
--- a/lib/rules/no-extra-parens.js
+++ b/lib/rules/no-extra-parens.js
@@ -137,7 +137,7 @@ function createForVueSyntax (context) {
       if (isIIFE(expression) && !isParenthesized(expression.callee, tokenStore)) {
         return
       }
-      if (expression.parent.type !== 'VFilterSequenceExpression' && isUnwrapChangeToFilter(expression)) {
+      if (isUnwrapChangeToFilter(expression)) {
         return
       }
     }
diff --git a/tests/lib/rules/no-extra-parens.js b/tests/lib/rules/no-extra-parens.js
index 35a571f9e..b4851272a 100644
--- a/tests/lib/rules/no-extra-parens.js
+++ b/tests/lib/rules/no-extra-parens.js
@@ -40,6 +40,7 @@ tester.run('no-extra-parens', rule, {
 
     '<template><button :class="(a+b | bitwise)" /></template>',
     '<template><button>{{ (foo + bar | bitwise) }}</button></template>',
+    '<template><button>{{ (foo | bitwise) | filter }}</button></template>',
     '<template><button>{{ (function () {} ()) }}</button></template>'
   ],
   invalid: [
@@ -160,6 +161,11 @@ tester.run('no-extra-parens', rule, {
       output: '<template><button>{{ (foo + bar | bitwise) }}</button></template>',
       errors: [{ messageId: 'unexpected' }]
     },
+    {
+      code: '<template><button>{{ ((foo | bitwise)) | filter }}</button></template>',
+      output: '<template><button>{{ (foo | bitwise) | filter }}</button></template>',
+      errors: [{ messageId: 'unexpected' }]
+    },
     {
       code: '<template><button>{{ (foo(bar|bitwise)) }}</button></template>',
       output: '<template><button>{{ foo(bar|bitwise) }}</button></template>',