vue/valid-define-props 정확성

An auto-fix is available for this rule.

이 규칙은 defineProps 컴파일러 매크로가 유효한지 확인합니다.

다음 경우에 대해 defineProps 컴파일러 매크로를 보고합니다:

defineProps가 지역에서 선언된 변수를 참조하고 있습니다.
defineProps가 리터럴 타입과 인수를 모두 포함하고 있습니다. 예: defineProps<{ /*props*/ }>({ /*props*/ })
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>

사용 방법

구성 파일 또는 명령줄을 통해 이 규칙을 활성화하려면 다음을 사용할 수 있습니다:

Config (.oxlintrc.json)CLI

json

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

bash

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