Skip to content

Commit

Permalink
Fixed the usage of '✗ BAD' and '✓ GOOD' in the documentation (#1202)
Browse files Browse the repository at this point in the history
  • Loading branch information
danyadev committed Jun 7, 2020
1 parent 376048e commit ba6ae96
Show file tree
Hide file tree
Showing 7 changed files with 36 additions and 37 deletions.
18 changes: 9 additions & 9 deletions docs/rules/attribute-hyphenation.md
Expand Up @@ -18,10 +18,10 @@ This rule enforces using hyphenated attribute names on custom components in Vue

```vue
<template>
<!-- GOOD -->
<!-- GOOD -->
<MyComponent my-prop="prop" />
<!-- BAD -->
<!-- BAD -->
<MyComponent myProp="prop" />
</template>
```
Expand Down Expand Up @@ -51,10 +51,10 @@ It errors on upper case letters.

```vue
<template>
<!-- GOOD -->
<!-- GOOD -->
<MyComponent my-prop="prop" />
<!-- BAD -->
<!-- BAD -->
<MyComponent myProp="prop" />
</template>
```
Expand All @@ -68,34 +68,34 @@ It errors on hyphens except `data-`, `aria-` and `slot-scope`.

```vue
<template>
<!-- GOOD -->
<!-- GOOD -->
<MyComponent myProp="prop" />
<MyComponent data-id="prop" />
<MyComponent aria-role="button" />
<MyComponent slot-scope="prop" />
<!-- BAD -->
<!-- BAD -->
<MyComponent my-prop="prop" />
</template>
```

</eslint-code-block>

### `"never", { "ignore": ["custom-prop"] }`
### `"never", { "ignore": ["custom-prop"] }`
Don't use hyphenated name but allow custom attributes

<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never', { ignore: ['custom-prop']}]}">

```vue
<template>
<!-- GOOD -->
<!-- GOOD -->
<MyComponent myProp="prop" />
<MyComponent custom-prop="prop" />
<MyComponent data-id="prop" />
<MyComponent aria-role="button" />
<MyComponent slot-scope="prop" />
<!-- BAD -->
<!-- BAD -->
<MyComponent my-prop="prop" />
</template>
```
Expand Down
8 changes: 4 additions & 4 deletions docs/rules/custom-event-name-casing.md
Expand Up @@ -23,21 +23,21 @@ See [Guide - Custom Events] for more details.

```vue
<template>
<!-- GOOD -->
<!-- GOOD -->
<button @click="$emit('my-event')" />
<!-- BAD -->
<!-- BAD -->
<button @click="$emit('myEvent')" />
</template>
<script>
export default {
methods: {
onClick () {
/* GOOD */
/* GOOD */
this.$emit('my-event')
this.$emit('update:myProp', myProp)
/* BAD */
/* BAD */
this.$emit('myEvent')
}
}
Expand Down
25 changes: 12 additions & 13 deletions docs/rules/no-potential-component-option-typo.md
Expand Up @@ -18,8 +18,7 @@ This rule disallow a potential typo in your component options
"vue/no-potential-component-option-typo": ["error", {
"presets": ["all"],
"custom": ["test"]
}
]
}]
}
```

Expand All @@ -30,21 +29,21 @@ This rule disallow a potential typo in your component options
export default {
/* ✓ GOOD */
props: {
},
/* × BAD */
/* BAD */
method: {
},
/* ✓ GOOD */
data: {
},
/* × BAD */
/* BAD */
beforeRouteEnteR() {
},
/* × BAD due to custom option 'test'*/
/* BAD due to custom option 'test' */
testt: {
}
Expand Down Expand Up @@ -72,19 +71,19 @@ export default {
```vue
<script>
export default {
/* ✓ BAD, due to threshold is 5 */
/* ✓ GOOD, due to threshold is 5 */
props: {
},
/* ✓ BAD, due to threshold is 5 */
/* ✓ GOOD, due to threshold is 5 */
method: {
},
/* ✓ BAD, due to threshold is 5 */
/* ✓ GOOD, due to threshold is 5 */
data: {
},
/* × GOOD, due to we don't choose vue-router preset or add a custom option */
/* ✗ BAD, due to we don't choose vue-router preset or add a custom option */
beforeRouteEnteR() {
}
Expand Down
6 changes: 3 additions & 3 deletions docs/rules/no-restricted-static-attribute.md
Expand Up @@ -25,7 +25,7 @@ This rule takes a list of strings, where each string is a attribute name or patt

```vue
<template>
<!-- BAD -->
<!-- BAD -->
<div foo="x" />
<div bar />
</template>
Expand Down Expand Up @@ -62,7 +62,7 @@ The following properties can be specified for the object.
<!-- ✓ GOOD -->
<div foo="foo" />
<!-- BAD -->
<!-- BAD -->
<div foo="bar" />
</template>
```
Expand All @@ -78,7 +78,7 @@ The following properties can be specified for the object.
<!-- ✓ GOOD -->
<CoolButton foo="x" />
<!-- BAD -->
<!-- BAD -->
<MyButton foo="x" />
</template>
```
Expand Down
4 changes: 2 additions & 2 deletions docs/rules/no-restricted-syntax.md
Expand Up @@ -25,11 +25,11 @@ Forbids call expressions inside mustache interpolation.

```vue
<template>
<!-- GOOD -->
<!-- GOOD -->
<div> {{ foo }} </div>
<div> {{ foo.bar }} </div>
<!-- BAD -->
<!-- BAD -->
<div> {{ foo() }} </div>
<div> {{ foo.bar() }} </div>
<div> {{ foo().bar }} </div>
Expand Down
8 changes: 4 additions & 4 deletions docs/rules/no-restricted-v-bind.md
Expand Up @@ -25,7 +25,7 @@ This rule takes a list of strings, where each string is a argument name or patte

```vue
<template>
<!-- BAD -->
<!-- BAD -->
<div v-bind:foo="x" />
<div :bar="x" />
</template>
Expand All @@ -39,7 +39,7 @@ By default, `'/^v-/'` is set. This prevents mistakes intended to be directives.

```vue
<template>
<!-- BAD -->
<!-- BAD -->
<MyInput :v-model="x" />
<div :v-if="x" />
</template>
Expand Down Expand Up @@ -84,7 +84,7 @@ The following properties can be specified for the object.
<!-- ✓ GOOD -->
<div :foo="x" />
<!-- BAD -->
<!-- BAD -->
<div :foo.prop="x" />
</template>
```
Expand All @@ -100,7 +100,7 @@ The following properties can be specified for the object.
<!-- ✓ GOOD -->
<CoolButton :foo="x" />
<!-- BAD -->
<!-- BAD -->
<MyButton :foo="x" />
</template>
```
Expand Down
4 changes: 2 additions & 2 deletions docs/rules/no-unused-properties.md
Expand Up @@ -89,7 +89,7 @@ This rule cannot be checked for use in other components (e.g. `mixins`, Property
<eslint-code-block :rules="{'vue/no-unused-properties': ['error', {groups: ['props', 'data']}]}">

```vue
<!-- BAD (`count` data not used) -->
<!-- BAD (`count` data not used) -->
<script>
export default {
data() {
Expand Down Expand Up @@ -136,7 +136,7 @@ This rule cannot be checked for use in other components (e.g. `mixins`, Property
<eslint-code-block :rules="{'vue/no-unused-properties': ['error', {groups: ['props', 'computed']}]}">

```vue
<!-- BAD (`reversedMessage` computed property not used) -->
<!-- BAD (`reversedMessage` computed property not used) -->
<template>
<p>{{ message }}</p>
</template>
Expand Down

0 comments on commit ba6ae96

Please sign in to comment.