Skip to content

Latest commit

 

History

History
158 lines (119 loc) · 3.96 KB

define-macros-order.md

File metadata and controls

158 lines (119 loc) · 3.96 KB
pageClass sidebarDepth title description since
rule-details
0
vue/define-macros-order
enforce order of `defineEmits` and `defineProps` compiler macros
v8.7.0

vue/define-macros-order

enforce order of defineEmits and defineProps compiler macros

  • 🔧 The --fix option on the command line can automatically fix some of the problems reported by this rule.
  • 💡 Some problems reported by this rule are manually fixable by editor suggestions.

📖 Rule Details

This rule reports the defineProps and defineEmits compiler macros when they are not the first statements in <script setup> (after any potential import statements or type definitions) or when they are not in the correct order.

🔧 Options

{
  "vue/define-macros-order": ["error", {
    "order": ["defineProps", "defineEmits"],
    "defineExposeLast": false
  }]
}
  • order (string[]) ... The order of defineEmits and defineProps macros. You can also add "defineOptions", "defineSlots", and "defineModel".
  • defineExposeLast (boolean) ... Force defineExpose at the end.

{ "order": ["defineProps", "defineEmits"] } (default)

<!-- ✓ GOOD -->
<script setup>
defineProps(/* ... */)
defineEmits(/* ... */)
</script>
<!-- ✗ BAD -->
<script setup>
defineEmits(/* ... */)
defineProps(/* ... */)
</script>
<!-- ✗ BAD -->
<script setup>
const bar = ref()
defineProps(/* ... */)
defineEmits(/* ... */)
</script>

{ "order": ["defineOptions", "defineModel", "defineProps", "defineEmits", "defineSlots"] }

<!-- ✓ GOOD -->
<script setup>
defineOptions({/* ... */})
const model = defineModel()
defineProps(/* ... */)
defineEmits(/* ... */)
const slots = defineSlots()
</script>
<!-- ✗ BAD -->
<script setup>
defineEmits(/* ... */)
const slots = defineSlots()
defineProps(/* ... */)
defineOptions({/* ... */})
const model = defineModel()
</script>
<!-- ✗ BAD -->
<script setup>
const bar = ref()
defineOptions({/* ... */})
const model = defineModel()
defineProps(/* ... */)
defineEmits(/* ... */)
const slots = defineSlots()
</script>

{ "defineExposeLast": true }

<!-- ✓ GOOD -->
<script setup>
defineProps(/* ... */)
defineEmits(/* ... */)
const slots = defineSlots()
defineExpose({/* ... */})
</script>
<!-- ✗ BAD -->
<script setup>
defineProps(/* ... */)
defineEmits(/* ... */)
defineExpose({/* ... */})
const slots = defineSlots()
</script>

🚀 Version

This rule was introduced in eslint-plugin-vue v8.7.0

🔍 Implementation