离子-“`slot`”属性被弃用- eslint-plugin-vue

Question

下面是VS代码中的错误：

[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 Framework使用的插槽与Vue 2插槽不一样。我们使用的插槽是Web组件插槽，是有效的用法：插槽。开发人员应该使用Web插槽按照文档：https://ionicframework.com/docs/api/range#usage来定位元素

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

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

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

  "vetur.validation.template": false,

Answer 2

关于插槽的警告

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

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

如果将VS代码与Vetur一起使用，则禁用Vetur的模板验证，这会忽略.eslintrc.js。用于配置自己的docs推荐使用ESLint插件规则的Vetur ESLint：

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

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

未使用的fixed

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

Answer 3

您可以尝试将其添加到..vscode/setings.json中。

{
    "vetur.validation.template": false
}