# san/attribute-hyphenation
enforce attribute naming style on custom components in template
- ⚙️ This rule is included in all of
"plugin:san/strongly-recommended"
and"plugin:san/recommended"
. - 🔧 The
--fix
option on the command line (opens new window) can automatically fix some of the problems reported by this rule.
# 📖 Rule Details
This rule enforces using hyphenated attribute names on custom components in San templates.
<template>
<!-- ✓ GOOD -->
<MyComponent my-prop="prop" />
<!-- ✗ BAD -->
<MyComponent myProp="prop" />
</template>
# 🔧 Options
{
"san/attribute-hyphenation": ["error", "always" | "never", {
"ignore": []
}]
}
Default casing is set to always
with ['data-', 'aria-', 'slot-scope']
set to be ignored
"always"
(default) ... Use hyphenated name."never"
... Don't use hyphenated name exceptdata-
,aria-
andslot-scope
."ignore"
... Array of ignored names
# "always"
It errors on upper case letters.
<template>
<!-- ✓ GOOD -->
<MyComponent my-prop="prop" />
<!-- ✗ BAD -->
<MyComponent myProp="prop" />
</template>
# "never"
It errors on hyphens except data-
, aria-
and slot-scope
.
<template>
<!-- ✓ GOOD -->
<MyComponent myProp="prop" />
<MyComponent data-id="prop" />
<MyComponent aria-role="button" />
<MyComponent slot-scope="prop" />
<!-- ✗ BAD -->
<MyComponent my-prop="prop" />
</template>
# "never", { "ignore": ["custom-prop"] }
Don't use hyphenated name but allow custom attributes
<template>
<!-- ✓ GOOD -->
<MyComponent myProp="prop" />
<MyComponent custom-prop="prop" />
<MyComponent data-id="prop" />
<MyComponent aria-role="button" />
<MyComponent slot-scope="prop" />
<!-- ✗ BAD -->
<MyComponent my-prop="prop" />
</template>