vue/define-props-destructuring Style
它的作用
此规则强制对 Vue 3 Composition API 的 props 处理采用一致的风格, 允许你在要求解构或禁止解构之间进行选择。
为什么这不好?
默认情况下,该规则要求在 defineProps 赋值给变量时使用解构语法,并会警告不要将 withDefaults 与解构一起使用。
示例
以下是此规则下错误代码的示例:
vue
<script setup lang="ts">
const props = defineProps(["foo"]);
const propsWithDefaults = withDefaults(defineProps(["foo"]), { foo: "default" });
const { baz } = withDefaults(defineProps(["baz"]), { baz: "default" });
const props = defineProps<{ foo?: string }>();
const propsWithDefaults = withDefaults(defineProps<{ foo?: string }>(), { foo: "default" });
</script>以下是此规则下正确代码的示例:
vue
<script setup lang="ts">
const { foo } = defineProps(["foo"]);
const { bar = "default" } = defineProps(["bar"]);
const { foo } = defineProps<{ foo?: string }>();
const { bar = "default" } = defineProps<{ bar?: string }>();
</script>配置
此规则接受一个包含以下属性的配置对象:
destructure
type: "only-when-assigned" | "always" | "never"
default: "only-when-assigned"
要求或禁止解构。
"only-when-assigned"
当 defineProps 被赋值给变量时要求解构,并警告不要将 withDefaults 与解构一起使用
"always"
在使用 defineProps 时要求解构,并警告不要将 withDefaults 与解构一起使用
"never"
要求使用变量存储 props,并禁止解构
如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["vue"],
"rules": {
"vue/define-props-destructuring": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["vue"],
rules: {
"vue/define-props-destructuring": "error",
},
});bash
oxlint --deny vue/define-props-destructuring --vue-plugin版本
此规则在 v1.20.0 中新增。
