src/content/docs/linter/rules/use-vue-define-macros-order.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.3.0` - Diagnostic Category: [`lint/nursery/useVueDefineMacrosOrder`](/reference/diagnostics#diagnostic-category) - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**information**](/reference/diagnostics#information). - This rule belongs to the following domains: - [`vue`](/linter/domains#vue) - Sources: - Same as [`vue/define-macros-order`](https://eslint.vuejs.org/rules/define-macros-order){
"linter": {
"rules": {
"nursery": {
"useVueDefineMacrosOrder": "error"
}
}
}
}
Enforce specific order of Vue compiler macros.
This rule ensures consistent ordering of Vue's Composition API compiler macros in <script setup> blocks.
Enforcing a consistent order improves code readability and maintainability by establishing a predictable structure.
These macros must also appear before any other statements (except imports, type declarations, and debugger statements).
<script lang="ts" setup>
const emit = defineEmits(['update'])
const props = defineProps<{ name: string }>()
</script>
<script lang="ts" setup>
import { ref } from 'vue'
const count = ref(0)
const props = defineProps<{ name: string }>()
</script>
<script lang="ts" setup>
const props = defineProps<{ name: string }>()
const emit = defineEmits(['update'])
</script>
<script lang="ts" setup>
import { ref } from 'vue'
const model = defineModel()
const props = defineProps<{ name: string }>()
const emit = defineEmits(['update'])
const count = ref(0)
</script>
<script lang="ts" setup>
import { ref } from 'vue'
interface Props {
value: string
}
const props = defineProps<Props>()
const emit = defineEmits(['update'])
</script>
orderAllows specifying the order in which the Vue compiler macros should appear.
Default: ["defineModel", "defineProps", "defineEmits"]
This is not limited to built-in macros, for example unplug-vue-router definePage can be listed here as well.
{
"linter": {
"rules": {
"nursery": {
"useVueDefineMacrosOrder": {
"options": {
"order": [
"definePage",
"defineProps",
"defineEmits",
"defineModel"
]
}
}
}
}
}
}