Fix: html-indent about binary expressions (fixes #264)

Author: mysticatea

lib/rules/html-indent.js

@@ -387,6 +387,31 @@ function create (context) {
     return template.getFirstToken(node)
   }
 
+  /**
+   * Check whether a given token is the first token of a statement.
+   * @param {Token} token The token to check.
+   * @param {Node} belongingNode The node that the token is belonging to.
+   * @returns {boolean} `true` if the token is the first token of a statement.
+   */
+  function isFirstOfStatement (token, belongingNode) {
+    let node = belongingNode
+
+    while (node != null) {
+      const parent = node.parent
+      const t = parent && parent.type
+      if (t != null && (t.endsWith('Statement') || t.endsWith('Declaration'))) {
+        return parent.range[0] === token.range[0]
+      }
+      if (t === 'VExpressionContainer') {
+        return node.range[0] === token.range[0]
+      }
+
+      node = parent
+    }
+
+    return false
+  }
+
   /**
    * Ignore all tokens of the given node.
    * @param {Node} node The node to ignore.
@@ -722,8 +747,14 @@ function create (context) {
       const leftToken = getChainHeadToken(node)
       const opToken = template.getTokenAfter(node.left, isNotRightParen)
       const rightToken = template.getTokenAfter(opToken)
-
-      setOffset([opToken, rightToken], 1, leftToken)
+      const prevToken = template.getTokenBefore(leftToken)
+      const shouldIndent = (
+        prevToken == null ||
+        prevToken.loc.end.line === leftToken.loc.start.line ||
+        isFirstOfStatement(leftToken, node)
+      )
+
+      setOffset([opToken, rightToken], shouldIndent ? 1 : 0, leftToken)
     },
 
     'AwaitExpression, RestElement, SpreadElement, UnaryExpression' (node) {

tests/lib/rules/html-indent.js

@@ -255,10 +255,10 @@ tester.run('html-indent', rule, {
             a
               =
               b
-                +
-                c
-                +
-                d
+              +
+              c
+              +
+              d
           "
         ></div>
       </template>
@@ -1307,7 +1307,42 @@ tester.run('html-indent', rule, {
         // Ignore all :D
         ignores: ['*']
       }]
-    }
+    },
+
+    // https://github.com/vuejs/eslint-plugin-vue/issues/264
+    unIndent`
+      <template>
+        <div
+          :class="{
+            foo: (
+              a === b &&
+              c === d
+            )
+          }"
+        />
+      </template>
+    `,
+    unIndent`
+      <template>
+        <div
+          :class="{
+            foo:
+              a === b &&
+              c === d
+          }"
+        />
+      </template>
+    `,
+    unIndent`
+      <template>
+        <div
+          :class="{
+            foo: a === b &&
+              c === d
+          }"
+        />
+      </template>
+    `
   ],
 
   invalid: [
@@ -1779,10 +1814,10 @@ tester.run('html-indent', rule, {
                     a
                         =
                         b
-                            +
-                            c
-                            +
-                            d
+                        +
+                        c
+                        +
+                        d
                 "
             ></div>
         </template>
@@ -1800,10 +1835,10 @@ tester.run('html-indent', rule, {
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 16 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 17 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 18 },
-        { message: 'Expected indentation of 20 spaces but found 10 spaces.', line: 19 },
-        { message: 'Expected indentation of 20 spaces but found 10 spaces.', line: 20 },
-        { message: 'Expected indentation of 20 spaces but found 10 spaces.', line: 21 },
-        { message: 'Expected indentation of 20 spaces but found 10 spaces.', line: 22 }
+        { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 19 },
+        { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 20 },
+        { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 21 },
+        { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 22 }
       ]
     },