← Back to rules

vue/define-props-destructuring 스타일

동작 방식

이 규칙은 Vue 3 Composition API props의 처리 방식을 일관되게 유지하도록 하며, 구조 분해(구문 분석) 사용 여부를 선택할 수 있도록 합니다.

왜 좋지 않은가?

기본적으로, defineProps를 사용할 때는 구조 분해 문법을 사용해야 하며, withDefaults와 구조 분해를 함께 사용하는 것은 경고합니다.

예시

이 규칙에 대한 잘못된 코드 예시:

<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>

이 규칙에 대한 올바른 코드 예시:

<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: "always" | "never"

기본값: "always"

구조 분해를 요구하거나 금지합니다.

"always"

defineProps를 사용할 때 구조 분해를 요구하며, withDefaults와 함께 구조 분해를 사용하는 경우 경고합니다.

"never"

props를 저장하기 위해 변수를 사용해야 하며, 구조 분해를 금지합니다.

사용 방법

이 규칙을 구성 파일 또는 CLI에서 활성화하려면 다음을 사용할 수 있습니다:

Config (.oxlintrc.json)

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

CLI

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

참고 자료

• 규칙 소스