useVueHyphenatedAttributes
¥Summary
-
规则生效日期：
v2.3.6¥Rule available since:
v2.3.6 -
诊断类别：
lint/nursery/useVueHyphenatedAttributes¥Diagnostic Category:
lint/nursery/useVueHyphenatedAttributes -
此规则包含 unsafe 修复程序。
¥This rule has an unsafe fix.
-
此规则的默认严重级别为 information。
¥The default severity of this rule is information.
-
此规则属于以下域：
¥This rule belongs to the following domains:
-
来源：
¥Sources:
-
与
vue/attribute-hyphenation相同¥Same as
vue/attribute-hyphenation
-
¥How to configure
{ "linter": { "rules": { "nursery": { "useVueHyphenatedAttributes": "error" } } }}¥Description
强制 Vue 模板中的属性名称使用连字符（kebab-case）。
¥Enforce hyphenated (kebab-case) attribute names in Vue templates.
Vue 风格指南建议在模板中使用连字符连接的属性（和 prop）名称，以保持一致性，并将其与使用驼峰式/帕斯卡式命名的 JavaScript 标识符区分开来。
¥Vue style guide recommends using hyphenated attribute (and prop) names in templates to keep them consistent and distinguish them from JavaScript identifiers written in camelCase/PascalCase.
此规则标记被检测为驼峰式命名法 (camelCase)、帕斯卡式命名法 (PascalCase)、常量式命名法 (CONSTANT_CASE)、蛇形命名法 (snake_case) 或包含任何大写 ASCII 字母的属性。它使用 Biome 的内部 Case::identify 辅助函数。
¥This rule flags attributes that are detected as camelCase, PascalCase, CONSTANT_CASE, snake_case
or that contain any uppercase ASCII letter. It uses Biome’s internal Case::identify helper.
允许：
¥Allowed:
-
kebab-case 属性（例如
data-test-id）¥kebab-case attributes (e.g.
data-test-id) -
纯小写单字属性（例如
class、id）¥pure lowercase single word attributes (e.g.
class,id)
¥Examples
¥Invalid
<div fooBar="x"></div><MyComp :someProp="x" />¥Valid
<div data-test-id="x"></div><div class="foo"></div><MyComp :some-prop="x" />¥Options
该规则支持以下选项：
¥The rule supports the following options:
ignore
Section titled “ignore”规则应忽略的属性名称列表（无需连字符）。当你有意允许使用一组固定的驼峰式/帕斯卡式 prop 名称时，请使用此选项。
¥A list of attribute names that should be ignored by the rule (they won’t be required to be hyphenated). Use this when you have a fixed set of camelCase / PascalCase prop names you intentionally allow.
{ "linter": { "rules": { "nursery": { "useVueHyphenatedAttributes": { "options": { "ignore": [ "someProp", "fooBar" ] } } } } }}有效（使用 ignore）
Section titled “有效（使用 ignore）”¥Valid (using ignore)
<div fooBar="x"></div>ignoreTags
Section titled “ignoreTags”应完全跳过其属性的标签名称列表。这对于故意暴露非连字符属性名称的第三方或内部组件非常有用。
¥A list of tag names whose attributes should be skipped entirely. This is useful for third-party or internal components that deliberately expose non‑hyphenated prop names.
{ "linter": { "rules": { "nursery": { "useVueHyphenatedAttributes": { "options": { "ignoreTags": [ "MyComp", "AnotherWidget" ] } } } } }}有效（使用 ignoreTags）
Section titled “有效（使用 ignoreTags）”¥Valid (using ignoreTags)
<MyComp :someProp="x" />¥Related links
Biome v2.1 中文网 - 粤ICP备13048890号