如何配置ESLint以理解Vue.js v-模型指令？

Question

让我们有一个示例单个文件组件：

<template>
  <InputComponent v-model="foo" />
</template>

<script setup>
let foo = 1
</script>

ESLint说：ESLint: 'foo' is never reassigned. Use 'const' instead. (prefer-const)

但是，由于它是在v模型指令中使用的，所以它使用在读写上下文中，应该是可以的。

我已经安装了eslint-plugin-vue，并在我的.eslintrc.中将解析器设置为vue-eslint-parser，但不知怎么的，它似乎不理解v-model指令发生了什么。

如何配置ESLint以理解Vue.js v-模型指令？

Answer 1

基于Vue文档，实际上应该使用const，因为原语类型应该由ref()助手声明，它返回代理，而代理又不会被重新分配。因此，可能正确的代码如下：

<template>
  <InputComponent v-model="foo" />
</template>

<script setup>
import { ref } from 'vue'
const foo = ref(1)
</script>