ESLint报错‘props已赋值但未使用’的解决咨询

你的问题出在<script setup>里的代码顺序——你先定义了toggleLeftDrawer函数（里面用到了props.modelValue），之后才声明props。虽然Vue会自动提升defineProps的调用，但ESLint的静态分析没识别到这个Vue特有的行为，所以误判props未被使用。

不用加无用的console.log，有几个更合理的解决办法：

• 调整代码顺序：把defineProps的声明放到函数前面，让ESLint清晰看到props在后续函数中被引用：

<script setup>
/*
  props
*/
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

/*
  emits
*/
const emit = defineEmits(['update:model-value'])

const toggleLeftDrawer = () => {
  emit('update:model-value', !props.modelValue)
}
</script>

• 解构props：直接从defineProps中解构出需要的属性，ESLint能明确检测到属性被使用，代码也更简洁：

<script setup>
const emit = defineEmits(['update:model-value'])

const { modelValue } = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const toggleLeftDrawer = () => {
  emit('update:model-value', !modelValue)
}
</script>

• 临时忽略ESLint规则：如果不想调整代码结构，可以在props声明上方添加注释，禁用未使用props的检测：

/* eslint-disable-next-line vue/no-unused-props */
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

推荐前两种方案，尤其是解构的方式，既符合ESLint的检测逻辑，也让代码更直观。

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