ionic - \`slot\` 属性已弃用 - eslint-plugin-vue

Question

我在 VS Code 中收到以下错误：

 [vue/no-deprecated-slot-attribute]
`slot` attributes are deprecated. eslint-plugin-vue

我在 .eslintrc.js

   'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],

这在规则中：

 'vue/no-deprecated-slot-attribute': 'off',

应该怎么做才能避免这个问题？

原文由 Hello World 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个slot其实是指webcomponent的slot；

https://github.com/ionic-team/ionic-framework/issues/22236

Ionic Framework 使用的插槽与 Vue 2 插槽不同。我们使用的插槽是 Web 组件插槽并且是有效用法： https ://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots。

开发人员应该根据我们的文档使用 Web 组件插槽来定位元素： https ://ionicframework.com/docs/api/range#usage

检查以确保您的 eslint.js 具有以下规则：

   rules: {
    'vue/no-deprecated-slot-attribute': 'off',
  }

接下来打开 .vscode/settings.json 并添加以下内容：

   "vetur.validation.template": false,

原文由 Lee 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

关于插槽的警告

vue/no-deprecated-slot-attribute 警告实际上是关于 slot Vue 模板中的属性，它被替换为 v-slot 。但是，由于 Ionic Web 组件使用本机 slot 属性，您可以安全地忽略警告或禁用它：

 // .eslintrc.js
module.exports = {
  rules: {
    'vue/no-deprecated-slot-attribute': 'off',
  }
}

如果将 VS Code 与 Vetur 一起使用，请禁用 Vetur 的模板验证，它会忽略 .eslintrc.js 。 Vetur 文档推荐使用 ESLint 插件 来配置你自己的 ESLint 规则：

如果要配置 ESLint 规则，请执行以下操作：

• 使用 vetur.validation.template: false
• 确保你有 ESLint 插件。错误将来自 ESLint 插件，而不是 Vetur。
• yarn add -D eslint eslint-plugin-vue 在你的工作区根目录
• 在 .eslintrc 中设置 ESLint 规则。

未使用 fixed

关于 'fixed' is defined but never used 您 评论 的错误，SFC 中的 <script> 部分可能有一个名为 fixed 的未使用变量只需删除该变量即可解决错误。

原文由 tony19 发布，翻译遵循 CC BY-SA 4.0 许可协议