CODEWITHSUNDEEP
eslintsvelte
Code-Conjurer
Code-Conjurer

Reputation: 304

Svelte: Disable ESLint Rule

I'm working on a Svelt project that uses ESlint, and I'm trying to disable a rule within my svelte template but can't find any information on how to do so. My code is the following:

<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}

This results in {#if !!promise} having the ESLint error:

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

Regardless of whether I should disable this rule, I'm wondering how I would disable it within the file since adding either: // eslint-disable-next-line... or <!-- eslint-disable-next-line... --> above the line won't disable the error.

For Reference I am using https://github.com/sveltejs/eslint-plugin-svelte3

Upvotes: 11

Views: 7182

Answers (4)

nnyby
nnyby

Reputation: 4668

The eslint-plugin-svelte plugin works fine with <!-- eslint-disable --> directives in svelte templates.

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

Upvotes: 5

Andy Carlson
Andy Carlson

Reputation: 3909

Since this commit, you can now add a "magic comment" to your Svelte file to disable individual validations using the form <!-- 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>

Upvotes: 5

LemuelKL
LemuelKL

Reputation: 11

You can set the settings.svelte3/named-blocks to true in your eslint config. Docs on svelte3/named-blocks. Then modify the targetted svelte files in overrides, and add template into ignorePatterns.

Such way requires no ...eslint-disable... in source files.

    # .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

Upvotes: -1

Code-Conjurer
Code-Conjurer

Reputation: 304

I found a somewhat unsatisfying solution by adding /* eslint-disable */ to the bottom of the script tag giving us:

<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}

This will disable all linting in the HTML template.

Upvotes: 0

Related Questions