eslint-plugin-san

# san/attribute-hyphenation

template 中的自定义组件属性名要求使用短横线命名。

  • ⚙️ 此规则包含于 "plugin:san/strongly-recommended" 和 "plugin:san/recommended"当中。

  • 🔧 命令行 (opens new window)中的--fix选项可以自动修复此规则报告的一些问题。

# 📖 规则细节

此规则要求在 San 模板中的自定义组件上使用短横线命名属性。

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

# 🔧 配置

{
  "san/attribute-hyphenation": ["error", "always" | "never", {
    "ignore": []
  }]
}

默认选项设置为always，ignore设置为['data-', 'aria-', 'slot-scope'] 即这三个属性名会忽略检查。

  • "always" ：（默认）所有属性名均要求使用短横线命名。

  • "never" ：除了 data-、aria- 和 slot-scope属性忽略检查外，其他不允许使用短横线命名。

  • "ignore" ：忽略检查的属性名数组。

# "always"

所有属性名均要求使用短横线命名，否则会报错。

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

# "never"

除了data-、aria-和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"] }

除了默认的data-、aria-和slot-scope属性和配置的custom-prop属性外，其他属性名不允许使用短横线命名。

<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...

# 🔍 实现

← san/boolean-value →