Vue3 SFC中ESLint误报props未使用的合规解决方法

这里有三种可行的解决方法，都不需要禁用规则或添加忽略注释：

• 显式引用props属性
  ESLint目前无法自动关联<script setup>里的props变量和模板中的使用，我们可以在脚本里显式引用一次props.msg，哪怕只是用void做无意义调用，就能消除误报：

  <template>
      <div>{{msg}}</div>
  </template>
  
  <script setup>
      const props = defineProps({
          msg: {
              type: String,
              default: 'Hello world'
          }
      })
      // 显式引用消除ESLint误报
      void props.msg;
  </script>
  

• 解构方式获取props
  直接解构defineProps的返回值，这样ESLint能识别到解构出的msg变量被模板使用，不会触发未使用警告：

  <template>
      <div>{{msg}}</div>
  </template>
  
  <script setup>
      const { msg } = defineProps({
          msg: {
              type: String,
              default: 'Hello world'
          }
      })
  </script>
  

• 配置Vue专属ESLint插件（推荐）
  安装eslint-plugin-vue并在ESLint配置中启用Vue3的规则集，它能正确识别<script setup>的语法特性，从根源避免这类误报：

  {
    "extends": [
      "plugin:vue/vue3-essential"
    ],
    "plugins": [
      "vue"
    ]
  }
  

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