'props' 被分配了一个值但从未使用过 no-unused-vars vue3

Question

我在我的 vue 组件文件上使用。我的组件代码：

<template>
    <router-link :to="{ name: routerName }" type="is-primary"
        class="inline-flex justify-center py-2 px-3 mb-3 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>&nbsp;Cancel
    </router-link>
</template>

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

但它返回 eslint 错误'props' is assigned a value but never used no-unused-vars

我已经在 package.json 上添加了如下规则：

    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
            "vue/script-setup-uses-vars": "error",
      "vue/multi-word-component-names": "off"
    }

并且仍然出错。我的开发依赖：

  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },

Answer 1

当您添加<script setup>到 Vue 文件时，Vue 会向代码添加一些糖分。

一个例子是defineProps。

• 你不需要导入defineProps
• 您可以轻松删除const props =

<template>
    <router-link :to="{ name: routerName }" type="is-primary"
        class="inline-flex justify-center py-2 px-3 mb-3 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>&nbsp;Cancel
    </router-link>
</template>

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

PS 您也可以"vue/script-setup-uses-vars"在使用 vue-eslint-parser v9.0.0 或更高版本时删除。来源