Vue3 <script setup>下自定义props校验器触发defineProps eslint警告如何解决？

警告触发原因 #

vue/valid-define-props 这条ESLint规则的默认限制是：defineProps 的入参不能引用 <script setup> 作用域内的任何局部变量，包括你导入的 validateMarkers 方法。
这是因为Vue在编译 <script setup> 时，会默认把 defineProps 的执行逻辑提升到模块最顶部，早期Vue版本中此时导入的变量还未完成初始化，会触发运行时报错，所以ESLint规则做了这个限制。Vue 3.3+版本已经优化了这个问题，支持在defineProps中引用导入的常量，只是ESLint规则还没有同步适配，才会出现误报。

修复方案 #

方案1：内联校验函数（最稳妥，无版本依赖） #

直接把校验逻辑写在validator配置项内部，不引用外部导入的变量即可消除警告：

<script setup>
import { defineProps } from 'vue'
// 把校验依赖的工具方法单独导入
import { isNotEmpty, isObject, isNotEmptyArray, markerValidator, error } from "./hooks"

const props = defineProps({
  markers: {
    type: [Array, Object],
    validator: (markers) => {
      return isNotEmpty(markers)
        ? isObject(markers)
            ? markerValidator(markers)
            : isNotEmptyArray(markers)
            ? markers.every((marker) => markerValidator(marker))
            : error('Undefined type of prop marker')
        : null
    }
  }
})
</script>

方案2：使用TypeScript类型声明式defineProps #

如果你项目用了TypeScript，可以换用泛型写法定义props，把校验逻辑从defineProps参数中抽出来单独执行：

<script setup lang="ts">
import { validateMarkers } from "./hooks"
import { defineProps, withDefaults } from 'vue'

// 用泛型声明props类型
interface Props {
  markers: Array<any> | Record<string, any>
}
// 给props设默认值
const props = withDefaults(defineProps<Props>(), {
  markers: () => []
})

// 单独执行校验逻辑
const validateResult = validateMarkers(props.markers)
// 校验不通过的话可以在这里抛错或做对应处理
</script>

方案3：屏蔽ESLint规则（仅推荐Vue3.3+版本使用） #

如果你用的是Vue3.3及以上版本，确定代码本身没有运行问题，可以直接屏蔽这条规则的警告：

• 单文件屏蔽：在当前<script setup>第一行加注释

  /* eslint-disable vue/valid-define-props */
  

• 全局屏蔽：在项目的.eslintrc.js配置里添加规则关闭

  module.exports = {
    rules: {
      'vue/valid-define-props': 'off'
    }
  }
  

内容的提问来源于stack exchange，提问作者Andreas Hunter