Svelte：禁用 ESLint 规则答案

【问题标题】：Svelte: Disable ESLint RuleSvelte：禁用 ESLint 规则
【发布时间】：2021-10-16 03:15:27
【问题描述】：

我正在开发一个使用 ESlint 的 Svelt 项目，我正在尝试禁用我的 svelte 模板中的规则，但找不到任何有关如何执行此操作的信息。我的代码如下：

<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... 或  行上方不会禁用错误。

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

【问题讨论】：

标签： eslint svelte

【解决方案1】：

您可以在 eslint 配置中将 settings.svelte3/named-blocks 设置为 true。 Docs on svelte3/named-blocks。然后修改overrides中的targeted 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,
    },
    ...

Related GitHub issue

【讨论】：

我相信这解决了下划线问题（太棒了！）但是这篇文章更关心我们通常如何禁用模板中的 ESLint 规则

【解决方案2】：

我发现了一个不太令人满意的解决方案，将/* 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 模板中的所有 linting。

【讨论】：