useVueConsistentVOnStyle (HTML)
Language HTML
Summary
Section titled “Summary”- Rule available since:
v2.3.11 - Diagnostic Category:
lint/style/useVueConsistentVOnStyle - This rule is recommended, meaning it is enabled by default.
- This rule has an unsafe fix.
- The default severity of this rule is information.
- This rule belongs to the following domains:
- Sources:
- Same as
vue/v-on-style
- Same as
How to configure
Section titled “How to configure”{ "linter": { "rules": { "style": { "useVueConsistentVOnStyle": "error" } } }}Description
Section titled “Description”Enforce a consistent style for v-on in Vue templates.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<div v-on:click="onClick" />code-block.vue:1:6 lint/style/useVueConsistentVOnStyle FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ Use shorthand '@' syntax instead of 'v-on'.
> 1 │ <div v-on:click="onClick" />
│ ^^^^^^^^^^^^^^^^^^^^
2 │
ℹ This project prefers to use shorthand syntax for v-on.
ℹ Unsafe fix: Rewrite to shorthand '@' syntax.
1 │ - <div·v-on:click="onClick"·/>
1 │ + <div·@click="onClick"·/>
2 2 │
<div @click="onClick" />Options
Section titled “Options”Configures the preferred directive style. Accepts "shorthand" or "longhand". Default: "shorthand".
{ "linter": { "rules": { "style": { "useVueConsistentVOnStyle": { "level": "on", "options": { "style": "longhand" } } } } }}Invalid
Section titled “Invalid”<div @click="onClick" />code-block.vue:1:6 lint/style/useVueConsistentVOnStyle FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ℹ Use longhand 'v-on' syntax instead of '@'.
> 1 │ <div @click="onClick" />
│ ^^^^^^^^^^^^^^^^
2 │
ℹ This project prefers to use longhand syntax for v-on.
ℹ Unsafe fix: Rewrite to longhand 'v-on' syntax.
1 │ - <div·@click="onClick"·/>
1 │ + <div·v-on:click="onClick"·/>
2 2 │
<div v-on:click="onClick" />Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.