vue/valid-define-props 正しさ

An auto-fix is available for this rule.

このルールは、defineProps コンパイラマクロが正当であるかを確認します。

以下の状況で、defineProps コンパイラマクロに対して警告を出力します：

defineProps がローカルに宣言された変数を参照している。
defineProps にリテラル型と引数の両方が指定されている。例：defineProps<{ /*プロパティ*/ }>({ /*プロパティ*/ })
defineProps が複数回呼び出されている。
defineProps と export default {} の両方でプロパティが定義されている。
defineProps も export default {} もプロパティを定義していない。

defineProps を誤用すると、実行時エラーが発生し、型安全性が失われます。 Vue はコードをコンパイルできる場合がありますが、プロパティが静かに破損したり、不正確な型として扱われる可能性があります。

このルールに対する誤りの例：

vue

<script setup>
const def = { msg: String };
defineProps(def);
</script>

vue

<script setup lang="ts">
defineProps<{ msg?: string }>({ msg: String });
</script>

vue

<script setup>
defineProps({ msg: String });
defineProps({ count: Number });
</script>

vue

<script>
export default {
  props: { msg: String },
};
</script>
<script setup>
defineProps({ count: Number });
</script>

このルールに対する正しい例：

vue

<script setup>
defineProps({ msg: String });
</script>

vue

<script setup>
defineProps(["msg"]);
</script>

vue

<script setup lang="ts">
defineProps<{ msg?: string }>();
</script>

vue

<script>
export default {
  props: { msg: String },
};
</script>
<script setup>
defineProps();
</script>

使用方法

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

Config (.oxlintrc.json)CLI

json

{
  "plugins": ["vue"],
  "rules": {
    "vue/valid-define-props": "error"
  }
}

bash

oxlint --deny vue/valid-define-props --vue-plugin