Description
What rule do you want to change?
vue/define-macros-order
Does this change cause the rule to produce more or fewer warnings?
More
How will the change be implemented? (New option, new default behavior, etc.)?
New default behavior
Please provide some example code that this change will affect:
<script setup>
import { useBreakpoints } from '@vueuse/core';
import { useRoute } from 'vue-router';
+defineProps({
+ data: {
+ type: Array,
+ default: () => [],
+ },
+});
const { t } = useI18n();
const { formatSessionTime } = useTimeFormatter();
const route = useRoute();
const breakpoints = useBreakpoints({ lg: 1024 }, { ssrWidth: 1024 });
const showPlace = breakpoints.smaller('lg');
const day = route.params.day;
definePageMeta({
scrollToTop: false,
});
-defineProps({
- data: {
- type: Array,
- default: () => [],
- },
-});
defineI18nRoute({
paths: {
fr: '/programmation/[day]',
},
});
</script>
What does the rule currently do for this code?
Currently, only defineProps
would be marked as error and not definePageMeta
, defineI18nRoute
.
What will the rule do after it's changed?
Although we can't specifically sort unknown macro, since all macro are starting with define...
, we can easily sort them at the top in the order they are already defined in the code.
So I think the default should be changed from:
{
"vue/define-macros-order": ["error", {
"order": ["defineProps", "defineEmits"],
"defineExposeLast": false
}]
to something like this:
{
"vue/define-macros-order": ["error", {
"order": ["defineProps", "defineEmits", "unknowns"],
"defineExposeLast": false
}]
which would result in this code change:
<script setup>
import { useBreakpoints } from '@vueuse/core';
import { useRoute } from 'vue-router';
+defineProps({
+ data: {
+ type: Array,
+ default: () => [],
+ },
+});
+definePageMeta({
+ scrollToTop: false,
+});
+defineI18nRoute({
+ paths: {
+ fr: '/programmation/[day]',
+ },
+});
const { t } = useI18n();
const { formatSessionTime } = useTimeFormatter();
const route = useRoute();
const breakpoints = useBreakpoints({ lg: 1024 }, { ssrWidth: 1024 });
const showPlace = breakpoints.smaller('lg');
const day = route.params.day;
-definePageMeta({
- scrollToTop: false,
-});
-defineProps({
- data: {
- type: Array,
- default: () => [],
- },
-});
-defineI18nRoute({
- paths: {
- fr: '/programmation/[day]',
- },
-});
</script>
Additional context