如何配置ESLint以识别Vue.js的v-model指令？

问题场景 #

示例单文件组件：

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

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

ESLint抛出错误：

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

但foo用于v-model指令，处于读写上下文，本应合法。已安装eslint-plugin-vue，并在.eslintrc中设置解析器为vue-eslint-parser，但问题仍存在。

解决步骤 #

• 确认eslint-plugin-vue版本不低于v8.0.0，该版本后才完善了对<script setup>语法的支持。
• 检查.eslintrc配置，确保正确启用Vue规则与解析器：
  示例配置（适配Vue3）：

  {
    "parser": "vue-eslint-parser",
    "plugins": ["vue"],
    "extends": [
      "eslint:recommended",
      "plugin:vue/vue3-recommended"
    ],
    "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module"
    }
  }
  

  若使用Vue2，将plugin:vue/vue3-recommended替换为plugin:vue/vue2-recommended。
• 若全局配置仍未生效，可在单个文件中临时跳过规则检查：

  // eslint-disable-next-line prefer-const
  let foo = 1
  

• 最后尝试重启ESLint服务（如VSCode中按Ctrl+Shift+P，选择「ESLint: Restart ESLint Server」），确保配置变更生效。

内容的提问来源于stack exchange，提问作者Bence Szalai