Skip to content
← Back to rules

vue/define-props-destructuring スタイル

何をやっているか

このルールは、Vue 3 Composition API でのプロパティの取り扱いについて一貫したスタイルを強制します。defineProps を使用する際、構造分解(destructure)を必須にするか、禁止するかを選択できます。

なぜ問題なのか

デフォルトでは、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

型: "always" | "never"

デフォルト: "always"

構造分解を必須にするか、禁止するかを指定します。

"always"

defineProps で使用する際に構造分解を必須とし、withDefaults と構造分解を併用することを警告します。

"never"

プロパティを変数に格納する形を使用することを必須とし、構造分解を禁止します。

使用方法

設定ファイルまたは CLI でこのルールを有効化するには、次のように使用できます:

json
{
  "plugins": ["vue"],
  "rules": {
    "vue/define-props-destructuring": "error"
  }
}
bash
oxlint --deny vue/define-props-destructuring --vue-plugin

参照