useVueDefineMacrosOrder

JavaScript (and super languages)

摘要

¥Summary

规则生效日期：v2.3.0

¥Rule available since: v2.3.0
诊断类别：lint/nursery/useVueDefineMacrosOrder

¥Diagnostic Category: lint/nursery/useVueDefineMacrosOrder
此规则包含 unsafe 修复程序。

¥This rule has an unsafe fix.
此规则的默认严重级别为 information。

¥The default severity of this rule is information.
此规则属于以下域：

¥This rule belongs to the following domains:
- vue
来源：

¥Sources:
- 与 vue/define-macros-order 相同
  
  ¥Same as vue/define-macros-order

如何配置

¥How to configure

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

描述

¥Description

强制要求 Vue 编译器宏的特定顺序。

¥Enforce specific order of Vue compiler macros.

此规则确保 Vue 的组合 API 编译器宏在 <script setup> 代码块中的顺序一致。强制保持一致的顺序，通过建立可预测的结构，提高代码的可读性和可维护性。

¥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`

允许指定 Vue 编译器宏的出现顺序。

¥Allows specifying the order in which the Vue compiler macros should appear.

默认：["defineModel", "defineProps", "defineEmits"]

¥Default: ["defineModel", "defineProps", "defineEmits"]

这不仅限于内置宏，例如 unplug-vue-router definePage 也可以列在此处。

¥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
}

useVueDefineMacrosOrder

摘要

如何配置

描述

示例

无效

有效

选项

order

相关链接

`order`