Add rules of HTML comment styles

vuejs · Jan 6, 2019 · 7f401a2 · 7f401a2
1 parent ebd07e6
commit 7f401a2
Show file tree

Hide file tree

Showing 47 changed files with 3,590 additions and 0 deletions.
diff --git a/docs/rules/README.md b/docs/rules/README.md
@@ -142,6 +142,9 @@ For example:
 | [vue/array-bracket-spacing](./array-bracket-spacing.md) | enforce consistent spacing inside array brackets | :wrench: |
 | [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
 | [vue/eqeqeq](./eqeqeq.md) | require the use of `===` and `!==` | :wrench: |
+| [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: |
+| [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |
+| [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
 | [vue/key-spacing](./key-spacing.md) | enforce consistent spacing between keys and values in object literal properties | :wrench: |
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
 | [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces | :wrench: |

diff --git a/docs/rules/html-comment-content-newline.md b/docs/rules/html-comment-content-newline.md
@@ -0,0 +1,229 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/html-comment-content-newline
+description: enforce unified line brake in HTML comments
+---
+# vue/html-comment-content-newline
+> enforce unified line brake in HTML comments
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule will enforce consistency of line break after the `<!--` and before the `-->` of comment. It also provides several exceptions for various documentation styles.
+
+<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <!-- singleline comment -->
+  <!--
+    multiline
+    comment
+  -->
+
+  <!--
+    ✗ BAD
+  -->
+  <!--
+    singleline comment
+  -->
+  <!-- multiline
+    comment -->
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/html-comment-content-newline": ["error",
+    {
+      "singleline": "always" | "never" | "ignore",
+      "multiline": "always" | "never" | "ignore",
+    },
+    {
+      "exceptions": []
+    }
+  ]
+}
+```
+
+- The first option is either an object with `"singleline"` and `"multiline"` keys.
+    - `singleline` ... the configuration for single-line comments.
+        - `"never"` (default) ... disallow line breaks after the `<!--` and before the `-->`.
+        - `"always"` ... require one line break after the `<!--` and before the `-->`.
+    - `multiline` ... the configuration for multiline comments.
+        - `"never"` ... disallow line breaks after the `<!--` and before the `-->`.
+        - `"always"` (default) ... require one line break after the `<!--` and before the `-->`.
+
+    You can also set the same value for both `singleline` and `multiline` by specifies a string.
+
+- This rule can also take a 2nd option, an object with the following key: `"exceptions"`.
+    - The `"exceptions"` value is an array of string patterns which are considered exceptions to the rule.
+
+    ```
+    "vue/html-comment-content-newline": ["error", { ... }, { "exceptions": ["*"] }]
+    ```
+
+### `"always"`
+
+<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error', { 'singleline': 'always', 'multiline': 'always' }]}">
+
+```vue
+<template>
+  <!--
+    ✓ GOOD
+  -->
+  <!--
+    singleline comment
+  -->
+  <!--
+    multiline
+    comment
+  -->
+
+  <!-- ✗ BAD -->
+  <!-- singleline comment -->
+  <!-- multiline
+    comment -->
+</template>
+```
+
+</eslint-code-block>
+
+### `"never"`
+
+<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error', { 'singleline': 'never', 'multiline': 'never' }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <!-- singleline comment -->
+  <!-- multiline
+    comment -->
+
+  <!--
+    ✗ BAD
+  -->
+  <!--
+    singleline comment
+  -->
+  <!--
+    multiline
+    comment
+  -->
+</template>
+```
+
+</eslint-code-block>
+
+### `{"singleline": "always", "multiline": "ignore"}`
+
+<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error', { 'singleline': 'always', 'multiline': 'ignore' }]}">
+
+```vue
+<template>
+  <!--
+    ✓ GOOD
+  -->
+  <!--
+    singleline comment
+  -->
+  <!--
+
+    singleline comment
+
+  -->
+  <!-- multiline
+    comment -->
+  <!--
+    multiline
+    comment
+  -->
+  <!--
+
+    multiline
+    comment
+
+  -->
+
+  <!-- ✗ BAD -->
+  <!-- singleline comment -->
+  <!--     singleline comment     -->
+</template>
+```
+
+</eslint-code-block>
+
+
+### `{"singleline": "ignore", "multiline": "always"}`
+
+<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error', { 'singleline': 'ignore', 'multiline': 'always' }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <!--
+    multiline
+    comment
+  -->
+  <!--
+
+    multiline
+    comment
+
+  -->
+  <!-- singleline comment -->
+  <!--
+    singleline comment
+  -->
+  <!--
+
+    singleline comment
+
+  -->
+
+  <!-- ✗ BAD -->
+  <!-- multiline
+    comment -->
+</template>
+```
+
+</eslint-code-block>
+
+### `"always", { "exceptions": ["*"] }`
+
+<eslint-code-block fix :rules="{'vue/html-comment-content-newline': ['error', 'always', { 'exceptions': ['*'] }]}">
+
+```vue
+<template>
+  <!--*******
+    ✓ GOOD
+    *******-->
+  <!--*******
+    comment
+    *******-->
+
+  <!--******* ✗ BAD *******-->
+  <!--******* multiline
+    comment *******-->
+</template>
+```
+
+</eslint-code-block>
+
+## :couple: Related rules
+
+- [vue/html-comment-indent](./html-comment-indent.md)
+- [vue/html-comment-content-spacing](./html-comment-content-spacing.md)
+- [spaced-comment](https://eslint.org/docs/rules/spaced-comment)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-comment-content-newline.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-comment-content-newline.js)
diff --git a/docs/rules/html-comment-content-spacing.md b/docs/rules/html-comment-content-spacing.md
@@ -0,0 +1,115 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/html-comment-content-spacing
+description: enforce unified spacing in HTML comments
+---
+# vue/html-comment-content-spacing
+> enforce unified spacing in HTML comments
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule will enforce consistency of spacing after the `<!--` and before the `-->` of comment. It also provides several exceptions for various documentation styles.
+
+Whitespace after the `<!--` and before the `-->` makes it easier to read text in comments.
+
+<eslint-code-block fix :rules="{'vue/html-comment-content-spacing': ['error']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <!-- comment -->
+  <!--
+    comment
+  -->
+
+  <!--✗ BAD-->
+  <!--comment-->
+</template>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/html-comment-content-spacing": ["error",
+    "always" | "never",
+    {
+      "exceptions": []
+    }
+  ]
+}
+```
+
+- The first is a string which be either `"always"` or `"never"`. The default is `"always"`.
+    - `"always"` ... there must be at least one whitespace at after the `<!--` and before the `-->`.
+    - `"never"` ... there should be no whitespace at after the `<!--` and before the `-->`.
+
+
+- This rule can also take a 2nd option, an object with the following key: `"exceptions"`.
+    - The `"exceptions"` value is an array of string patterns which are considered exceptions to the rule.
+    Please note that exceptions are ignored if the first argument is `"never"`.
+
+    ```
+    "vue/html-comment-content-spacing": ["error", "always", { "exceptions": ["*"] }]
+    ```
+
+### `"always"`
+
+<eslint-code-block fix :rules="{'vue/html-comment-content-spacing': ['error', 'always']}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+
+  <!--✗ BAD-->
+</template>
+```
+
+</eslint-code-block>
+
+### `"never"`
+
+<eslint-code-block fix :rules="{'vue/html-comment-content-spacing': ['error', 'never']}">
+
+```vue
+<template>
+  <!--✓ GOOD-->
+
+  <!-- ✗ BAD -->
+  <!--       comment      -->
+</template>
+```
+
+</eslint-code-block>
+
+### `"always", { "exceptions": ["*"] }`
+
+<eslint-code-block fix :rules="{'vue/html-comment-content-spacing': ['error', 'always', { 'exceptions': ['*'] }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <!--*******
+    comment
+    *******-->
+
+  <!--*******✗ BAD*******-->
+</template>
+```
+
+</eslint-code-block>
+
+## :couple: Related rules
+
+- [spaced-comment](https://eslint.org/docs/rules/spaced-comment)
+- [vue/html-comment-content-newline](./html-comment-content-newline.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-comment-content-spacing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-comment-content-spacing.js)