vue/prop-name-casing
enforce specific casing for the Prop name in Vue components
- ⚙️ This rule is included in
"plugin:vue/strongly-recommended"and"plugin:vue/recommended". - 🔧 The
--fixoption on the command line can automatically fix some of the problems reported by this rule.
📖 Rule Details
This rule enforce proper casing of props in vue components(camelCase).
<script>
export default {
props: {
/* ✓ GOOD */
greetingText: String,
/* ✗ BAD */
'greeting-text': String,
greeting_text: String
}
}
</script>
🔧 Options
{
"vue/prop-name-casing": ["error", "camelCase" | "snake_case"]
}
"camelCase"(default) ... Enforce property names inpropsto camel case."snake_case"... Enforce property names inpropsto snake case.
"snake_case"
<script>
export default {
props: {
/* ✓ GOOD */
greeting_text: String,
/* ✗ BAD */
'greeting-text': String,
greetingText: String
}
}
</script>