useVueDefineMacrosOrder (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.3.0
Diagnostic Category: lint/style/useVueDefineMacrosOrder
This rule isn’t recommended, so you need to enable it.
This rule has an unsafe fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- vue
Sources:
- Same as vue/define-macros-order

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useVueDefineMacrosOrder": "error"
6
      }
7
    }
8
  }
9
}

Description

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

Examples

Invalid

1
<script lang="ts" setup>
2
const emit = defineEmits(['update'])
3
const props = defineProps<{ name: string }>()
4
</script>

code-block.vue:3:7 lint/style/useVueDefineMacrosOrder  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ defineProps macro is out of order.
  
    1 │ <script lang="ts" setup>
    2 │ const emit = defineEmits(['update'])
  > 3 │ const props = defineProps<{ name: string }>()
      │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ </script>
    5 │ 
  
  ℹ Macros defined in <script setup> should be ordered as follows: defineModel, defineProps, defineEmits
  
  ℹ and be placed before any non-macro statements, except for type declarations, imports, exports or debugger statements.
  
  ℹ Unsafe fix: Reorder macro defineProps.
  
    1 1 │   <script lang="ts" setup>
    2   │ - const·emit·=·defineEmits(['update'])
    3   │ - const·props·=·defineProps<{·name:·string·}>()
      2 │ + const·props·=·defineProps<{·name:·string·}>()
      3 │ + 
      4 │ + const·emit·=·defineEmits(['update'])
    4 5 │   </script>
    5 6 │

1
<script lang="ts" setup>
2
import { ref } from 'vue'
3

4
const count = ref(0)
5
const props = defineProps<{ name: string }>()
6
</script>

code-block.vue:5:7 lint/style/useVueDefineMacrosOrder  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ defineProps macro is out of order.
  
    4 │ const count = ref(0)
  > 5 │ const props = defineProps<{ name: string }>()
      │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    6 │ </script>
    7 │ 
  
  ℹ Macros defined in <script setup> should be ordered as follows: defineModel, defineProps, defineEmits
  
  ℹ and be placed before any non-macro statements, except for type declarations, imports, exports or debugger statements.
  
  ℹ Unsafe fix: Reorder macro defineProps.
  
    1 1 │   <script lang="ts" setup>
    2 2 │   import { ref } from 'vue'
    3   │ - 
    4   │ - const·count·=·ref(0)
    5   │ - const·props·=·defineProps<{·name:·string·}>()
      3 │ + const·props·=·defineProps<{·name:·string·}>()
      4 │ + 
      5 │ + 
      6 │ + const·count·=·ref(0)
    6 7 │   </script>
    7 8 │

Valid

1
<script lang="ts" setup>
2
const props = defineProps<{ name: string }>()
3
const emit = defineEmits(['update'])
4
</script>

1
<script lang="ts" setup>
2
import { ref } from 'vue'
3

4
const model = defineModel()
5
const props = defineProps<{ name: string }>()
6
const emit = defineEmits(['update'])
7

8
const count = ref(0)
9
</script>

1
<script lang="ts" setup>
2
import { ref } from 'vue'
3

4
interface Props {
5
  value: string
6
}
7

8
const props = defineProps<Props>()
9
const emit = defineEmits(['update'])
10
</script>

Options

`order`

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

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useVueDefineMacrosOrder": {
6
          "level": "on",
7
          "options": {
8
            "order": [
9
              "definePage",
10
              "defineProps",
11
              "defineEmits",
12
              "defineModel"
13
            ]
14
          }
15
        }
16
      }
17
    }
18
  }
19
}