vue/define-props-declaration Style
What it does
Enforce consistent declaration style for defineProps in Vue. This rule only works in <script setup> with lang="ts".
Why is this bad?
Inconsistent code style can be confusing and make code harder to read through.
Examples
Examples of incorrect code for this rule:
vue
// "vue/define-props-declaration": ["error", "type-based"]
<script setup lang="ts">
const props = defineProps({
kind: { type: String },
});
</script>
// "vue/define-props-declaration": ["error", "runtime"]
<script setup lang="ts">
const props = defineProps<{
kind: string;
}>();
</script>Examples of correct code for this rule:
vue
// "vue/define-props-declaration": ["error", "type-based"]
<script setup lang="ts">
const props = defineProps<{
kind: string;
}>();
</script>
// "vue/define-props-declaration": ["error", "runtime"]
<script setup lang="ts">
const props = defineProps({
kind: { type: String },
});
</script>Configuration
This rule accepts one of the following string values:
"type-based"
Enforce type-based declaration.
"runtime"
Enforce runtime declaration.
How to use
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["vue"],
"rules": {
"vue/define-props-declaration": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["vue"],
rules: {
"vue/define-props-declaration": "error",
},
});bash
oxlint --deny vue/define-props-declaration --vue-pluginVersion
This rule was added in v1.15.0.