不建议使用ionic -'slot'属性- eslint-plugin-vue

7uzetpgm  于 2022-12-08  发布在  Ionic
关注(0)|答案(5)|浏览(191)

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

为避免此问题,应采取哪些措施?

lg40wkob

lg40wkob1#

此插槽实际上是指Web组件插槽;
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/settings.json并添加以下内容:

"vetur.validation.template": false,
gdx19jrr

gdx19jrr2#

关于插槽的警告

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

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

如果在Vetur中使用VS代码,请禁用Vetur的模板验证,这将忽略.eslintrc.js。Vetur文档建议使用ESLint插件配置您自己的ESLint规则:
如果要配置ESLint规则,请执行以下操作:

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

未使用的fixed

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

1tu0hz3e

1tu0hz3e3#

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

{
    "vetur.validation.template": false
}
ozxc1zmp

ozxc1zmp4#

您正在尝试使用已过时的旧语法。请尝试使用命名插槽语法。
所以我想与其

<ion-refresher slot="fixed">...</ion-refresher>

您应该使用

<ion-refresher>
  <slot name="fixed">...</slot>
 </ion-refresher>
a11xaf1n

a11xaf1n5#

如果您希望继续使用相同的代码,只需使用// eslint-disable-next-lineeslint-disable-line在包含slot标记的下一行禁用eslint,然后继续执行代码

您可以使用<template v-slot>来使用未命名的slot标记,使用<template v-slot="name>来使用已命名的slot标记。
这里是到文档链接的链接,

相关问题