diff --git a/README.md b/README.md
index 2c72fcd..8961861 100644
--- a/README.md
+++ b/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
+
+
+
+
+
+
+```
+
+But for known _void_ HTML elements, Prettier always uses the self-closing style.
+For example, `` is turned into ``.
+
+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
diff --git a/bin/validators.js b/bin/validators.js
index ae07c74..aee527d 100644
--- a/bin/validators.js
+++ b/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"
+ );
}
};
diff --git a/test/cli.test.js b/test/cli.test.js
index cd0de1a..cc578c3 100644
--- a/test/cli.test.js
+++ b/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
diff --git a/test/validators.test.js b/test/validators.test.js
index 98bd1af..095c96c 100644
--- a/test/validators.test.js
+++ b/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);
+});
diff --git a/vue.js b/vue.js
index db1f07a..8b64b3c 100644
--- a/vue.js
+++ b/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",