Vue中<script setup>语法下ESLint误报变量未使用的问题求助

1. 先解决ESLint报错的核心原因 #

你模板里的props绑定写法错误，导致ESLint识别不到tableFields的使用：
Vue3中动态传递props必须用v-bind（缩写:），你当前的data="{{users}}"是文本插值，本质是把字符串"{{users}}"传给组件，并非传递变量users，ESLint自然判定tableFields未被使用。

修复后的模板代码：

<template>
 <div>
  <h3>User List</h3>
   <highup-table
     :data="users"
     :fields="tableFields"
   />
  </div>
</template>

2. ESLint：优先配置，不要禁用 #

禁用ESLint等于放弃代码语法校验、规范检查的能力，长期来看会大幅增加项目维护成本，建议优先配置适配Vue3 <script setup>的规则：

• 若项目没有单独的.eslintrc.js，检查package.json里是否存在eslintConfig字段，或是脚手架（Vite/Vue CLI）自带的默认配置。
• 新建.eslintrc.js文件，配置支持<script setup>的规则：

  module.exports = {
    extends: [
      'plugin:vue/vue3-essential',
      'eslint:recommended'
    ],
    parserOptions: {
      ecmaVersion: 'latest'
    },
    rules: {
      // 确保Vue3未使用变量规则正常生效
      'vue/no-unused-vars': 'error'
    }
  }
  

• 确保安装了最新版的eslint-plugin-vue，旧版本对<script setup>的变量识别存在缺陷，执行更新命令：

  npm update eslint-plugin-vue --save-dev
  

3. 额外代码优化建议 #

你顶层直接使用await的写法虽被Vue3支持，但建议添加错误处理，避免请求失败导致组件渲染异常：

<script setup>
import {HTTPClient} from "@/services/HTTPClient"
import HighupTable from '@/components/table/HighupTable'
import { ref } from 'vue'

const users = ref([])
const tableFields = {
  email: 'Email',
  first_name: 'First Name',
  last_name: 'Last Name',
  username: 'Username'
}

// 用async函数包裹并添加错误捕获
const fetchUsers = async () => {
  try {
    const res = await HTTPClient.getData('/user-manager/users')
    users.value = res.data
  } catch (err) {
    console.error('获取用户列表失败:', err)
  }
}
fetchUsers()
</script>

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