useVueDefineMacrosOrder

Esta página aún no está disponible en tu idioma.

JavaScript (and super languages)

Summary

Diagnostic Category: lint/nursery/useVueDefineMacrosOrder
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
      "nursery": {
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:2:7 lint/nursery/useVueDefineMacrosOrder  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ defineProps macro is out of order.
  
    1 │ const emit = defineEmits([‘update’])
  > 2 │ const props = defineProps<{ name: string }>()
      │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ 
  
  ℹ 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   │ - const·emit·=·defineEmits([‘update’])
    2   │ - const·props·=·defineProps<{·name:·string·}>()
      1 │ + const·props·=·defineProps<{·name:·string·}>()
      2 │ + const·emit·=·defineEmits([‘update’])
    3 3 │

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:4:7 lint/nursery/useVueDefineMacrosOrder  FIXABLE  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ defineProps macro is out of order.
  
    3 │ const count = ref(0)
  > 4 │ const props = defineProps<{ name: string }>()
      │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    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 │   import { ref } from ‘vue’
    2   │ - 
    3   │ - const·count·=·ref(0)
    4   │ - const·props·=·defineProps<{·name:·string·}>()
      2 │ + const·props·=·defineProps<{·name:·string·}>()
      3 │ + 
      4 │ + 
      5 │ + const·count·=·ref(0)
    5 6 │

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
      "nursery": {
5
        "useVueDefineMacrosOrder": {
6
          "options": {
7
            "order": [
8
              "definePage",
9
              "defineProps",
10
              "defineEmits",
11
              "defineModel"
12
            ]
13
          }
14
        }
15
      }
16
    }
17
  }
18
}