feat: ignore anchor tags in multiline rule (#738)

* feat: ignore anchor tags in multiline rule * Update singleline-html-element-content-newline.js * Update singleline-html-element-content-newline.md * Update multiline-html-element-content-newline.md * feat(singleline-html-element-content-newline): Ignore all inline elements * feat(multiline-html-element-content-newline): Ignore all inline elements * chore(*-element-content-newline): Simplify configuration
vuejs · Feb 3, 2019 · 98f7bbd · 98f7bbd
1 parent 617139e
commit 98f7bbd
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 23 deletions.
diff --git a/docs/rules/multiline-html-element-content-newline.md b/docs/rules/multiline-html-element-content-newline.md
@@ -74,23 +74,27 @@ This rule enforces a line break before and after the contents of a multiline ele
 
 ## :wrench: Options
 
-```json
+```js
 {
     "vue/multiline-html-element-content-newline": ["error", {
         "ignoreWhenEmpty": true,
-        "ignores": ["pre", "textarea"],
+        "ignores": ["pre", "textarea", ...INLINE_ELEMENTS],
         "allowEmptyLines": false
     }]
 }
 ```
 
 - `ignoreWhenEmpty` ... disables reporting when element has no content.
     default `true`
-- `ignores` ... the configuration for element names to ignore line breaks style.  
-    default `["pre", "textarea"]`
+- `ignores` ... the configuration for element names to ignore line breaks style.
+    default `["pre", "textarea", ...INLINE_ELEMENTS]`.
 - `allowEmptyLines` ... if `true`, it allows empty lines around content. If you want to disallow multiple empty lines, use [no-multiple-empty-lines] in combination.  
     default `false`
 
+::: info
+  All inline non void elements can be found [here](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/inline-non-void-elements.json).
+:::
+
 ### `"ignores": ["VueComponent", "pre", "textarea"]`
 
 <eslint-code-block fix :rules="{'vue/multiline-html-element-content-newline': ['error', { ignores: ['VueComponent', 'pre', 'textarea'] }]}">

diff --git a/docs/rules/singleline-html-element-content-newline.md b/docs/rules/singleline-html-element-content-newline.md
@@ -50,12 +50,12 @@ This rule enforces a line break before and after the contents of a singleline el
 
 ## :wrench: Options
 
-```json
+```js
 {
   "vue/singleline-html-element-content-newline": ["error", {
     "ignoreWhenNoAttributes": true,
     "ignoreWhenEmpty": true,
-    "ignores": ["pre", "textarea"]
+    "ignores": ["pre", "textarea", ...INLINE_ELEMENTS]
   }]
 }
 ```
@@ -64,8 +64,13 @@ This rule enforces a line break before and after the contents of a singleline el
     default `true`
 - `ignoreWhenEmpty` ... disables reporting when element has no content.
     default `true`
-- `ignores` ... the configuration for element names to ignore line breaks style.  
-    default `["pre", "textarea"]`
+- `ignores` ... the configuration for element names to ignore line breaks style.
+    default `["pre", "textarea", ...INLINE_ELEMENTS]`.
+
+
+::: info
+  All inline non void elements can be found [here](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/inline-non-void-elements.json).
+:::
 
 
 ### `"ignoreWhenNoAttributes": true`

diff --git a/lib/rules/multiline-html-element-content-newline.js b/lib/rules/multiline-html-element-content-newline.js
@@ -10,6 +10,7 @@
 
 const utils = require('../utils')
 const casing = require('../utils/casing')
+const INLINE_ELEMENTS = require('../utils/inline-non-void-elements.json')
 
 // ------------------------------------------------------------------------------
 // Helpers
@@ -21,7 +22,7 @@ function isMultilineElement (element) {
 
 function parseOptions (options) {
   return Object.assign({
-    ignores: ['pre', 'textarea'],
+    ignores: ['pre', 'textarea'].concat(INLINE_ELEMENTS),
     ignoreWhenEmpty: true,
     allowEmptyLines: false
   }, options)

diff --git a/lib/rules/singleline-html-element-content-newline.js b/lib/rules/singleline-html-element-content-newline.js
@@ -10,6 +10,7 @@
 
 const utils = require('../utils')
 const casing = require('../utils/casing')
+const INLINE_ELEMENTS = require('../utils/inline-non-void-elements.json')
 
 // ------------------------------------------------------------------------------
 // Helpers
@@ -21,7 +22,7 @@ function isSinglelineElement (element) {
 
 function parseOptions (options) {
   return Object.assign({
-    ignores: ['pre', 'textarea'],
+    ignores: ['pre', 'textarea'].concat(INLINE_ELEMENTS),
     ignoreWhenNoAttributes: true,
     ignoreWhenEmpty: true
   }, options)

diff --git a/lib/utils/inline-non-void-elements.json b/lib/utils/inline-non-void-elements.json
@@ -0,0 +1,40 @@
+[
+  "a",
+  "abbr",
+  "audio",
+  "b",
+  "bdi",
+  "bdo",
+  "canvas",
+  "cite",
+  "code",
+  "data",
+  "del",
+  "dfn",
+  "em",
+  "i",
+  "iframe",
+  "ins",
+  "kbd",
+  "label",
+  "map",
+  "mark",
+  "noscript",
+  "object",
+  "output",
+  "picture",
+  "q",
+  "ruby",
+  "s",
+  "samp",
+  "small",
+  "span",
+  "strong",
+  "sub",
+  "sup",
+  "svg",
+  "time",
+  "u",
+  "var",
+  "video"
+]
diff --git a/tests/lib/rules/multiline-html-element-content-newline.js b/tests/lib/rules/multiline-html-element-content-newline.js
@@ -44,15 +44,80 @@ tester.run('multiline-html-element-content-newline', rule, {
         <div class="panel">
           content
         </div>
-      </template>`,
+      </template>
+    `,
     `
       <template>
         <div
           class="panel"
         >
           content
         </div>
-      </template>`,
+      </template>
+    `,
+    `
+      <template>
+        <a
+          href="/"
+          class="link"
+        >Home</a>
+      </template>
+    `,
+    `
+      <template>
+        <a
+          href="/"
+          class="link"
+        >Home
+        </a>
+      </template>
+    `,
+    `
+      <template>
+        <a
+          href="/"
+          class="link"
+        >
+          Home
+        </a>
+      </template>
+    `,
+    `
+      <template>
+        <div>
+          <label
+            for="test"
+            class="label"
+          >Foo</label>
+          <input id="test">
+        </div>
+      </template>
+    `,
+    `
+      <template>
+        <div>
+          <label
+            for="test"
+            class="label"
+          >Foo
+          </label>
+          <input id="test">
+        </div>
+      </template>
+    `,
+    `
+      <template>
+        <div>
+          <label
+            for="test"
+            class="label"
+          >
+            Foo
+          </label>
+          <input id="test">
+        </div>
+      </template>
+    `,
     `
       <template>
         <div>
@@ -61,17 +126,23 @@ tester.run('multiline-html-element-content-newline', rule, {
             content
           </div>
         </div>
-      </template>`,
-    `<div>multiline end tag</div
-      >`,
+      </template>
+    `,
+    `
+      <div>multiline end tag</div
+      >
+    `,
+
     // empty
     `<template><div class="panel"></div></template>`,
     `
       <template>
         <div
           class="panel">
         </div>
-      </template>`,
+      </template>
+    `,
+
     // allowEmptyLines
     {
       code: `
@@ -109,11 +180,14 @@ tester.run('multiline-html-element-content-newline', rule, {
         </template>`,
       options: [{ allowEmptyLines: true }]
     },
+
     // self closing
     `
       <template>
         <self-closing />
-      </template>`,
+      </template>
+    `,
+
     // ignores
     `
       <template>
@@ -180,6 +254,7 @@ tester.run('multiline-html-element-content-newline', rule, {
         ignores: ['IgnoreTag']
       }]
     },
+
     // Ignore if no closing brackets
     `
       <template>

diff --git a/tests/lib/rules/singleline-html-element-content-newline.js b/tests/lib/rules/singleline-html-element-content-newline.js
@@ -33,39 +33,59 @@ tester.run('singleline-html-element-content-newline', rule, {
         <div class="panel">
           content
         </div>
-      </template>`,
+      </template>
+    `,
     `
       <template>
         <div class="panel">
           <div>
           </div>
         </div>
-      </template>`,
+      </template>
+    `,
     `
       <template>
         <div class="panel">
           <!-- comment -->
         </div>
-      </template>`,
+      </template>
+    `,
     `
       <template>
         <div>
           content
         </div>
-      </template>`,
+      </template>
+    `,
     `
       <template>
         <div>
           <div>
           </div>
         </div>
-      </template>`,
+      </template>
+    `,
     `
       <template>
         <div>
           <!-- comment -->
         </div>
-      </template>`,
+      </template>
+    `,
+    `
+      <template>
+        <a href="/">Home</a>
+      </template>
+    `,
+    `
+      <template>
+        <form>
+          <label for="test">Home</label>
+          <input id="test" name="test">
+        </form>
+      </template>
+    `,
+
     // ignoreWhenNoAttributes: true
     `
       <template>
@@ -91,6 +111,7 @@ tester.run('singleline-html-element-content-newline', rule, {
       <template>
         <div>    </div>
       </template>`,
+
     // ignoreWhenNoAttributes: false
     {
       code: `