Vue3使用<script setup>时ESLint和Vetur出现方法未使用告警如何解决

导致该告警的常见原因如下：

• ESLint规则与解析器配置错误
  核心原因是没有适配<script setup>语法的ESLint校验规则：
  1. 未安装/启用eslint-plugin-vue的vue/script-setup-uses-vars规则，该规则会自动将Vue模板中调用的变量、方法标记为已使用，避免no-unused-vars规则误判
  2. ESLint配置中未将vue-eslint-parser设置为.vue文件的解析器，导致ESLint无法读取模板内容判断方法是否被调用
  3. eslint-plugin-vue版本过旧，低于v7.20.0的版本不支持<script setup>语法的校验适配
• Vetur插件版本或配置问题
  Vetur从v0.34.0版本才开始完整支持<script setup>语法，低于该版本的Vetur无法识别模板对setup内定义方法的调用，会抛出未使用告警。如果版本符合要求仍有问题，可检查Vetur配置中是否关闭了script setup相关支持开关，也可以直接切换为Vue3官方推荐的Volar插件，它对<script setup>的适配性远高于Vetur，不会出现这类误判问题。
• TypeScript项目解析器冲突
  如果项目使用TypeScript，ESLint配置中如果直接将parser设置为@typescript-eslint/parser，会覆盖vue-eslint-parser的解析逻辑，导致无法识别模板使用的方法。需要将外层parser设置为vue-eslint-parser，再在parserOptions.parser中指定@typescript-eslint/parser作为TS代码的解析器。

临时规避方案：如果暂时不想调整全局配置，可在触发告警的方法/变量上方添加注释// eslint-disable-next-line no-unused-vars临时屏蔽单条告警。

内容的提问来源于stack exchange，提问作者Meyer Buaharon