fix: warning is not a valid value for v-model in JetBrains IDE

[anyesu]

相关问题

• https://youtrack.jetbrains.com/issue/WEB-52219

适用范围

intellij-community 2021 年起的所有版本。

Version 2.0 of the format

Starting with version 2021.3.1 of WebStorm (and other JetBrains IDEs), a full support for the new Web-Types format is supported (the new format has been partially supported since 2021.2).

我本地只验证了版本（ IntelliJ IDEA 2021.2.3 到 IntelliJ IDEA 2023.3.2 ）修复有效。

更早之前的版本有这个问题的话应该也适用。

修复说明

按照 WebStorm 相关代码的维护者所说，在 web-types.json 中应该使用属性名 modelValue 而非 v-model ，这样做只能去掉警告但是会丢失代码提示（属性描述）。

我结合了两种方式去修复，不需要等 IDE 修复：

• 在 web-types.json 中将 v-model 的定义拷贝一份为 modelValue

  同时兼容 v-model="value" 和 :model-value="value" 两种用法。

  另外增加了 update:modelValue 事件（ 支持被 .md 文件中定义的内容覆盖 ）。

• 将 "type": "boolean" 改为 "type": "boolean "

  加空格 的目的是为了使 type 被识别为 COMPLEX 类型而非 BOOLEAN 类型 。这个写法看着是奇怪一点，但确实有效，比起 修改大小写 的方式（ 比如修改为 Boolean ）可以兼容旧的 IDE 。

  另外，目前 WebStorm 不支持 v-model 和 modelValue 的类型校验，type 定义为任意复杂表达式都是一样的。

具体分析见 JetBrains/web-types#79

测试步骤

1. 新建项目安装依赖：

   npm i vue vant

2. 创建一个 Vue 文件：

   <template>
     <div>
       <van-checkbox v-model="value" />
       <van-pull-refresh v-model="value" />
   
       <van-checkbox :model-value="value" @update:model-value="value = $event" />
       <van-pull-refresh :modelValue="value" @update:modelValue="value = $event" />
     </div>
   </template>
   
   <script setup lang="ts">
   import { ref } from "vue";
   
   const value = ref(false);
   </script>

3. 同时使用 "name": "v-model" 和 "type": "boolean" 定义的组件会出现警告：

   value is not a valid value for v-model
   

   相关组件：

   • van-checkbox
   • van-pull-refresh

修复之前：

修复之后：

其他相关修改

• fast-glob 没有对匹配结果进行排序，需要手动排序

  • Source Array order not followed mrmlnc/fast-glob#117

  排序后方便比较修改前后的文件差异。

• Windows 下 CRLF 格式的 .md 文件会解析错误

  git config core.autocrlf true

[chenjiahan]

感谢修复和详细的说明 ❤️