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',

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

Answer 1

这个插槽实际上是指webcomponent插槽；
https://github.com/ionic-team/ionic-framework/issues/22236

Ionic 框架使用的插槽与 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 并添加以下内容：

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

Answer 2

关于插槽的警告

该vue/no-deprecated-slot-attribute警告实际上是关于slotVue 模板中的属性，该属性已替换为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 的模板验证vetur.validation.template: false
• 确保您有ESLint 插件。错误将来自 ESLint 插件，而不是 Vetur。
• yarn add -D eslint eslint-plugin-vue在你的工作空间根目录中
• 在 中设置 ESLint 规则.eslintrc。

没用过fixed

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

Answer 3

你可以尝试将其添加到 .vscode/settings.json

{
    "vetur.validation.template": false
}