Vue3组件script setup中props触发ESLint no-unused-vars报错求助

问题场景 #

在Vue3组件的<script setup>中定义了props且已在模板中使用，但ESLint仍报错：'props' is assigned a value but never used no-unused-vars，即使配置了vue/script-setup-uses-vars规则也无效。

解决方法 #

方法1：解构props变量 #

直接解构defineProps返回的对象，在脚本中显式引用需要的props字段，让ESLint识别到变量被使用：

<script setup>
const { routerName } = defineProps({
    routerName: {
        type: String,
        required: true
    }
})
</script>

模板中依然可以正常使用routerName，无需修改。

方法2：修改ESLint规则忽略props变量 #

在ESLint配置的rules中添加对props变量的忽略规则，让no-unused-vars跳过对该变量的检查：

"rules": {
    "vue/script-setup-uses-vars": "error",
    "vue/multi-word-component-names": "off",
    "no-unused-vars": ["error", { "varsIgnorePattern": "^props$" }]
}

方法3：升级eslint-plugin-vue版本 #

当前使用的eslint-plugin-vue@8.0.3对<script setup>的支持可能存在兼容性缺陷，升级到该插件的更高版本（如8.x系列最新版或9.x版本）可修复这类识别问题：

npm update eslint-plugin-vue --save-dev
# 或使用yarn
yarn upgrade eslint-plugin-vue --dev

原因说明 #

在<script setup>语法中，defineProps返回的props对象如果仅在模板中使用、脚本代码未直接引用该对象，ESLint的no-unused-vars规则会判定其未被使用。虽然vue/script-setup-uses-vars规则的设计目标是识别模板中使用的变量，但部分旧版本插件存在适配缺陷，导致规则未生效。

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