Skip to content

Commit a663270

Browse files
committed
docs: add sameNameShorthand
1 parent 5cf4ba5 commit a663270

File tree

3 files changed

+44
-6
lines changed

3 files changed

+44
-6
lines changed

docs/rules/v-bind-style.md

+40-2
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,22 @@ This rule enforces `v-bind` directive style which you should use shorthand or lo
3232

3333
## :wrench: Options
3434

35-
Default is set to `shorthand`.
35+
Default style is set to `shorthand`. And default same-name shorthand is `ignore`.
3636

3737
```json
3838
{
39-
"vue/v-bind-style": ["error", "shorthand" | "longform"]
39+
"vue/v-bind-style": ["error", "shorthand" | "longform", {
40+
"sameNameShorthand": "ignore" | "always" | "never"
41+
}]
4042
}
4143
```
4244

4345
- `"shorthand"` (default) ... requires using shorthand.
4446
- `"longform"` ... requires using long form.
47+
- `sameNameShorthand` ... enforce the `v-bind` same-name shorthand style (Vue 3.4+).
48+
- `"ignore"` (default) ... ignores the same-name shorthand style.
49+
- `"always"` ... always enforces same-name shorthand where possible.
50+
- `"never"` ... always disallow same-name shorthand where possible.
4551

4652
### `"longform"`
4753

@@ -59,6 +65,38 @@ Default is set to `shorthand`.
5965

6066
</eslint-code-block>
6167

68+
### `{ "sameNameShorthand": "always" }`
69+
70+
<eslint-code-block fix :rules="{'vue/v-bind-style': ['error', 'shorthand', { 'sameNameShorthand': 'always' }]}">
71+
72+
```vue
73+
<template>
74+
<!-- ✓ GOOD -->
75+
<div :foo />
76+
77+
<!-- ✗ BAD -->
78+
<div :foo="foo" />
79+
</template>
80+
```
81+
82+
</eslint-code-block>
83+
84+
### `{ "sameNameShorthand": "never" }`
85+
86+
<eslint-code-block fix :rules="{'vue/v-bind-style': ['error', 'shorthand', { 'sameNameShorthand': 'never' }]}">
87+
88+
```vue
89+
<template>
90+
<!-- ✓ GOOD -->
91+
<div :foo="foo" />
92+
93+
<!-- ✗ BAD -->
94+
<div :foo />
95+
</template>
96+
```
97+
98+
</eslint-code-block>
99+
62100
## :books: Further Reading
63101

64102
- [Style guide - Directive shorthands](https://vuejs.org/style-guide/rules-strongly-recommended.html#directive-shorthands)

lib/rules/v-bind-style.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@ module.exports = {
8080
expectedLonghand: "Expected 'v-bind' before ':'.",
8181
unexpectedLonghand: "Unexpected 'v-bind' before ':'.",
8282
expectedLonghandForProp: "Expected 'v-bind:' instead of '.'.",
83-
expectedShorthand: 'Expected shorthand same name.',
84-
unexpectedShorthand: 'Unexpected shorthand same name.'
83+
expectedShorthand: 'Expected same-name shorthand.',
84+
unexpectedShorthand: 'Unexpected same-name shorthand.'
8585
}
8686
},
8787
/** @param {RuleContext} context */

tests/lib/rules/v-bind-style.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ const tester = new RuleTester({
1212
languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
1313
})
1414

15-
const expectedShorthand = 'Expected shorthand same name.'
16-
const unexpectedShorthand = 'Unexpected shorthand same name.'
15+
const expectedShorthand = 'Expected same-name shorthand.'
16+
const unexpectedShorthand = 'Unexpected same-name shorthand.'
1717

1818
tester.run('v-bind-style', rule, {
1919
valid: [

0 commit comments

Comments
 (0)