Vue3使用<script setup>时ESLint不必要警告的正确配置方法

问题原因 #

默认的@typescript-eslint/no-unused-vars规则只会检查<script>标签内部的变量使用情况，无法识别变量是否在同文件的<template>中被调用，因此会对<script setup>中声明给模板使用的变量产生误告警。 #

正确解决方案 #

前置依赖确认 #

确保已经安装了适配Vue3的ESLint相关依赖：

• eslint-plugin-vue（推荐v9及以上版本，完整支持<script setup>语法）
• vue-eslint-parser
• @typescript-eslint/parser

手动修改ESLint全局配置 #

编辑项目根目录下的ESLint配置文件（.eslintrc.js/.eslintrc.cjs/.eslintrc.json均可），调整以下配置项：

module.exports = {
  // 原有配置如env、extends等可直接保留
  // 用Vue专属解析器处理SFC单文件结构
  parser: 'vue-eslint-parser',
  parserOptions: {
    // 指定TS解析器处理脚本部分内容
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    // 关闭原有不支持Vue SFC的未使用变量校验规则
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': 'off',
    // 开启Vue专属的未使用变量校验，会同时识别模板和脚本中的变量使用情况
    'vue/no-unused-vars': 'warn'
  }
}

简化配置方案 #

如果项目使用Vue官方的ESLint预设，直接在extends配置项中加入以下规则集即可自动适配，无需手动修改单个规则：

extends: [
  'plugin:vue/vue3-recommended',
  '@vue/eslint-config-typescript'
]

临时局部解决方案 #

如果不想修改全局配置，可在告警的变量行前加注释单独跳过校验：

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import NoteComponent from 'components/Note.vue'

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