Repository: vuejs/eslint-plugin-vue
Pull request #717 (2018-12-08 01:27:24)

Chore: improve editor style in vuepress
> The bottom padding of the interactive code examples seems a little excessive and I think might also be increasing a little with each line in the initial code.

https://github.com/vuejs/eslint-plugin-vue/pull/534#pullrequestreview-180095362

After: https://armano2.github.io/eslint-plugin-vue/rules/no-dupe-keys.html
Before: https://vuejs.github.io/eslint-plugin-vue/rules/no-dupe-keys.html

-----------

![image](https://user-images.githubusercontent.com/625469/49482120-1fc52d00-f82e-11e8-9d35-d1101f59f047.png)


Patch:
diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
index d7789c7b..13d824a5 100644
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ b/docs/.vuepress/components/eslint-code-block.vue
@@ -1,18 +1,20 @@
 <template>
-  <eslint-editor
-    :linter="linter"
-    :config="config"
-    :code="code"
-    :style="{ height }"
-    class="eslint-code-block"
-    filename="example.vue"
-    language="html"
-    :preprocess="preprocess"
-    :postprocess="postprocess"
-    dark
-    :format="format"
-    :fix="fix"
-  />
+  <div class="eslint-code-container">
+    <eslint-editor
+      :linter="linter"
+      :config="config"
+      :code="code"
+      :style="{ height }"
+      class="eslint-code-block"
+      filename="example.vue"
+      language="html"
+      :preprocess="preprocess"
+      :postprocess="postprocess"
+      dark
+      :format="format"
+      :fix="fix"
+    />
+  </div>
 </template>
 
 <script>
@@ -92,7 +94,7 @@ export default {
 
     height () {
       const lines = this.code.split('\n').length
-      return `${Math.max(120, 20 * (1 + lines))}px`
+      return `${Math.max(120, 19 * lines)}px`
     }
   },
 
@@ -129,8 +131,18 @@ export default {
 </script>
 
 <style>
+.eslint-code-container {
+  border-radius: 6px;
+  padding: 1.25rem 0;
+  margin: 1em 0;
+  background-color: #1e1e1e;
+}
+
 .eslint-code-block {
   width: 100%;
-  margin: 1em 0;
+}
+
+.eslint-editor-actions {
+  bottom: -0.9rem;
 }
 </style>
diff --git a/lib/utils/indent-common.js b/lib/utils/indent-common.js
index c86460da..28e68b0a 100644
--- a/lib/utils/indent-common.js
+++ b/lib/utils/indent-common.js
@@ -895,7 +895,7 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
       if (!PREFORMATTED_ELEMENT_NAMES.includes(node.name)) {
         const isTopLevel = node.parent.type !== 'VElement'
         const offset = isTopLevel ? options.baseIndent : 1
-        processNodeList(node.children.filter(isNotEmptyTextNode), node.startTag, node.endTag, offset)
+        processNodeList(node.children.filter(isNotEmptyTextNode), node.startTag, node.endTag, offset, false)
       } else {
         const startTagToken = tokenStore.getFirstToken(node)
         const endTagToken = node.endTag && tokenStore.getFirstToken(node.endTag)
@@ -991,7 +991,7 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
       const firstTokenInfo = offsets.get(tokenStore.getFirstToken(node))
 
       for (const token of tokens) {
-        offsets.set(token, firstTokenInfo)
+        offsets.set(token, Object.assign({}, firstTokenInfo))
       }
     },
 
diff --git a/package.json b/package.json
index f00a94c0..09bbdf61 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   "files": [
     "lib"
   ],
-  "homepage": "https://github.com/vuejs/eslint-plugin-vue#readme",
+  "homepage": "https://vuejs.github.io/eslint-plugin-vue/",
   "keywords": [
     "eslint",
     "eslint-plugin",


Test patch:
diff --git a/tests/fixtures/html-indent/issue729.vue b/tests/fixtures/html-indent/issue729.vue
new file mode 100644
index 00000000..d9d39660
--- /dev/null
+++ b/tests/fixtures/html-indent/issue729.vue
@@ -0,0 +1,29 @@
+<!--{}-->
+<template>
+  <div>
+    <div>text
+      <a/>
+    </div>
+    <div>text
+      text
+      <a/>
+    </div>
+    <div>text
+      <!-- comment -->
+      <a/>
+    </div>
+    <div>text
+      <!-- comment -->
+    </div>
+    <div><a/>
+      <a/>
+    </div>
+    <div><a/>
+      <!-- comment -->
+      <a/>
+    </div>
+    <div><a/>
+      <a/>
+    </div>
+  </div>
+</template>