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",