Add vue/html-self-closing

Fixes #64.

README.md

@@ -591,6 +591,44 @@ Prettier:
 }
 ```
 
+### [vue/html-self-closing]
+
+This rule enforces whether elements should be self-closing or not.
+
+Prettier generally preserves the way you wrote your elements:
+
+```vue
+<div />
+<div></div>
+<MyComponent />
+<MyComponent></MyComponent>
+<svg><path d="" /></svg>
+<svg><path d=""></path></svg>
+```
+
+But for known _void_ HTML elements, Prettier always uses the self-closing style.
+For example, `<img>` is turned into `<img />`.
+
+If you like this rule, it can be used just fine with Prettier as long as you
+set `html.void` to `"any"`.
+
+Example ESLint configuration:
+
+```json
+{
+  "rules": {
+    "vue/html-self-closing": [
+      "error",
+      {
+        "html": {
+          "void": "any"
+        }
+      }
+    ]
+  }
+}
+```
+
 ## Other rules worth mentioning
 
 These rules don’t conflict with Prettier, but have some gotchas when used with
@@ -754,3 +792,4 @@ several other npm scripts:
 [string formatting rules]: https://prettier.io/docs/en/rationale.html#strings
 [travis-badge]: https://travis-ci.org/prettier/eslint-config-prettier.svg?branch=master
 [travis]: https://travis-ci.org/prettier/eslint-config-prettier
+[vue/html-self-closing]: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-self-closing.md

bin/validators.js

@@ -1,5 +1,8 @@
 "use strict";
 
+// These validator functions answer the question “Is the config valid?” – return
+// `false` if the options DO conflict with Prettier, and `true` if they don’t.
+
 module.exports = {
   curly(options) {
     if (options.length === 0) {
@@ -34,5 +37,18 @@ module.exports = {
 
     const firstOption = options[0];
     return !(firstOption && firstOption.allowParens);
+  },
+
+  "vue/html-self-closing"(options) {
+    if (options.length === 0) {
+      return false;
+    }
+
+    const firstOption = options[0];
+    return Boolean(
+      firstOption && (firstOption.html && firstOption.html.void === "any")
+      // Enable when Prettier supports SVG: https://github.com/prettier/prettier/issues/5322
+      // && firstOption.svg === "any"
+    );
   }
 };

test/cli.test.js

@@ -124,7 +124,8 @@ test("all the things", () => {
     ["curly", "multi-or-nest", "consistent"],
     ["no-confusing-arrow", { allowParens: true }],
     "react/jsx-indent",
-    "flowtype/semi"
+    "flowtype/semi",
+    "vue/html-self-closing"
   ];
   expect(cli.processString(createRules(rules, "error"))).toMatchInlineSnapshot(`
 Object {
@@ -142,6 +143,7 @@ https://github.com/prettier/eslint-config-prettier#special-rules
 - curly
 - lines-around-comment
 - no-confusing-arrow
+- vue/html-self-closing
 
 The following rules are enabled but cannot be automatically checked. See:
 https://github.com/prettier/eslint-config-prettier#special-rules

test/validators.test.js

@@ -46,3 +46,28 @@ test("no-confusing-arrow", () => {
   expect(validators["no-confusing-arrow"]([{ allowParens: true }])).toBe(false);
   expect(validators["no-confusing-arrow"]([null])).toBe(true);
 });
+
+test("vue/html-self-closing", () => {
+  expect(validators["vue/html-self-closing"]([])).toBe(false);
+  expect(validators["vue/html-self-closing"]([{ html: { void: "any" } }])).toBe(
+    true
+  );
+  expect(
+    validators["vue/html-self-closing"]([
+      {
+        html: {
+          void: "any",
+          html: "never",
+          component: "never"
+        },
+        svg: "never",
+        math: "never"
+      }
+    ])
+  ).toBe(true);
+  expect(validators["vue/html-self-closing"]([null])).toBe(false);
+  expect(validators["vue/html-self-closing"]([{ html: null }])).toBe(false);
+  expect(
+    validators["vue/html-self-closing"]([{ html: { void: "always" } }])
+  ).toBe(false);
+});

vue.js

@@ -2,6 +2,8 @@
 
 module.exports = {
   rules: {
+    "vue/html-self-closing": 0,
+
     "vue/html-closing-bracket-newline": "off",
     "vue/html-closing-bracket-spacing": "off",
     "vue/html-end-tags": "off",