vue/prop-name-casing Style
What it does
Enforce a specific casing (camelCase or snake_case) for Vue component prop names.
Why is this bad?
Inconsistent prop name casing makes templates harder to read and grep for. Pinning props to a single casing across the codebase keeps the declaration site and the call site aligned.
Examples
Examples of incorrect code for this rule (default camelCase):
vue
<script>
export default {
props: {
greeting_text: String,
},
};
</script>Examples of correct code for this rule (default camelCase):
vue
<script>
export default {
props: {
greetingText: String,
},
};
</script>Configuration
The 1st option
type: "camelCase" | "snake_case"
The 2nd option
This option is an object with the following properties:
ignoreProps
type: string[]
default: []
How to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["vue"],
"rules": {
"vue/prop-name-casing": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["vue"],
rules: {
"vue/prop-name-casing": "error",
},
});bash
oxlint --deny vue/prop-name-casing --vue-pluginVersion
This rule was added in vnext.