# 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>
Now loading...

# 🔧 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 except data-, aria- and slot-scope.
  • "ignore" ... Array of ignored names

# "always"

It errors on upper case letters.

<template> <!-- ✓ GOOD --> <MyComponent my-prop="prop" /> <!-- ✗ BAD --> <MyComponent myProp="prop" /> </template>
Now loading...

# "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>
Now loading...

# "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>
Now loading...

# 🔍 Implementation

Last Updated: 10/26/2021, 7:23:11 AM