Svelte:禁用ESLint规则

Question

我正在做一个使用ESlint的Svelt项目，我试图在我的Svelt模板中禁用一个规则，但找不到任何关于如何这样做的信息。我的代码如下:

<script lang="ts">
const unsubscribe = promiseWritable.subscribe((value) => {
promise = value;
});
onDestroy(unsubscribe);
</script>
{#if !!promise} <---- ESLint error here!
{#await promise then promiseResult}
<Info {promiseResult} />
{/await}
{/if}

这导致{#if !!promise}有ESLint错误:

Expected non-Promise value in a boolean conditional.eslint@typescript-eslint/no-misused-promises)

不管我是否应该禁用这个规则，我想知道我如何在文件中禁用它，因为添加了:// eslint-disable-next-line...或<!-- eslint-disable-next-line... -->

作为参考，我使用https://github.com/sveltejs/eslint-plugin-svelte3

Answer 1

现在，你可以添加一个"魔术注释";到您的Svelte文件中，使用<!-- svelte-ignore rule-name -->.

表单禁用单个验证。

<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div on:mouseover={mouseOver} on:mouseleave={mouseLeave} class="wrapper">
<slot name="content" />
</div>

Answer 2

eslint-plugin-svelte插件可以很好地处理小型模板中的<!-- eslint-disable -->指令。

https://github.com/ota-meshi/eslint-plugin-svelte

Answer 3

我找到了一个不太令人满意的解决方案，将/* eslint-disable */添加到脚本标签的底部，给我们:

<script lang="ts">
const unsubscribe = promiseWritable.subscribe((value) => {
promise = value;
});
onDestroy(unsubscribe);
/* eslint-disable */
</script>
{#if !!promise} <---- No ESLint error anymore
{#await promise then promiseResult}
<Info {promiseResult} />
{/await}
{/if}

这将禁用HTML模板中的所有提示。

Answer 4

你可以在eslint配置中将settings.svelte3/named-blocks设置为true。svelte3/named-blocks上的文档。然后修改overrides中的目标svelte文件，并将模板添加到ignorePatterns中。

这种方式不需要在源文件中使用...eslint-disable...。

# .eslintrc.cjs
...    
ignorePatterns: [
"**/*.svelte/*_template.ts",
],
overrides: [{ files: ["**/*.svelte/*.ts"], processor: "svelte3/svelte3" }],
settings: {
"svelte3/typescript": () => require("typescript"),
"svelte3/named-blocks": true,
},
...

相关GitHub问题