prettier-plugin-svelte doesn't work with eslint-plugin-prettier

<!-- If you're reporting a bug, please provide the following information to make it easier to triage your issue. If you don't provide this information, your issue may be closed. If a question isn't applicable to your report, feel free to skip it/delete it. -->



**What version of `eslint` are you using?**

v8.17.0

**What version of `prettier` are you using?**

2.7.1

**What version of `eslint-plugin-prettier` are you using?**

4.0.0

**Please paste any applicable config files that you're using (e.g. `.prettierrc` or `.eslintrc` files)**

```json

{

  "root": true,

  "env": {

    "node": true,

    "es2021": true,

    "mocha": true,

    "browser": true

  },

  "ignorePatterns": ["dist", "**/*.html"],

  "extends": ["eslint:recommended"],

  "plugins": ["prettier", "svelte3"],

  "rules": {

    "strict": 0,

    "no-console": 0,

    "max-len": [

      "error",

      {

        "code": 120,

        "ignoreComments": true

      }

    ],

    "prettier/prettier": [

      "warn",

      {

        "printWidth": 120,

        "tabWidth": 2,

        "bracketSpacing": false,

        "trailingComma": "none",

        "arrowParens": "avoid",

        "pluginSearchDirs": ["."],

        "plugins": ["prettier-plugin-svelte"]

      }

    ]

  },

  "overrides": [

    {

      "files": ["*.svelte"],

      "processor": "svelte3/svelte3"

    }

  ],

  "parserOptions": {

    "sourceType": "module",

    "ecmaVersion": 2021

  }

}

```

**What source code are you linting?**

```svelte

<script>

  /* TODO:

   * implementar links para editar con diálogos y definir si lo que se va a editar

   * es un string, un text o html

   */

  import {onMount} from "svelte";

  import {writable} from "svelte/store";

  function createRef(val) {

    const ref = writable(val);

    return [ref, ref.set];

  }

  // @ts-ignore

  import {requestBase} from "request-strategy";

  

  const request = requestBase(createRef, cb => onMount(() => cb), true);

  export let debug;

  export let locale;

  export let allowTranslations;

  export let showTranslations;

  export let context;

  export let subcontext;

  export let text;

  export let baseurl;

  let input;

  let mounted = false;

  let firstRequest = true;

  let result, error, mutate;

  // eslint-disable-next-line max-len

  $: url =

    (baseurl ? baseurl : "") +

    `/APP/AAA/Translate.translate?xhr=true&context=${context}&sub-context=${subcontext}&text=${text}&locale=${$locale}`;

  onMount(() => {

    ({result, error, mutate} = request(url, "SWR", undefined, true));

    mounted = true;

  });

  $: {

    if ($locale && mounted && firstRequest) {

      firstRequest = false;

    } else if ($locale && mounted && !firstRequest) {

      mutate(url);

    }

  }

  $: width = "min(calc(" + ($result?.text?.length || 10) + "ch + 5ch), 100%)";

  async function onChange() {

    // @ts-ignore

    const cookies = new Map(document.cookie.split("; ").map(c => c.split("=")));

    const xsrf = cookies.get("XSRF-TOKEN");

    const response = await fetch(url, {

      method: "PUT",

      headers: {

        "Content-Type": "application/json",

        "XSRF-TOKEN": xsrf

      },

      body: JSON.stringify({translation: input.value}),

      mode: "cors",

      credentials: "include"

    });

    const res = await response.json();

    if (res.status === "ok") {

      // await Promise.delay(500);

      //TODO forzar el mutate

      await mutate(undefined, true);

    }

  }

</script>

<svelte:options tag={null}/>



{#if $error}

  Error loading translation

{:else if !$result}

  Cargando...

{:else}

  <span class={$showTranslations ? $result.status.toLowerCase() : ""}>

    {#if $allowTranslations}

      <input 

value={$result.text} 

bind:this={input}

on:change={onChange}

on:click|preventDefault|stopPropagation

style:width

            />

    {:else}

      {$result.text}

    {/if}

  </span>

{/if}

{#if typeof debug !== "undefined"}

  <div> locale {$locale}</div>

  <div> allowTranslations {$allowTranslations}</div>

  <div> showTranslations {$showTranslations}</div>

  <div> context {context}</div>

  <div> subContext {subcontext}</div>

  <div> text {text}</div>

  {#if $result}

    <div> result {$result.text}</div>

  {/if}

  <div> error {$error}</div>

{/if}

<style>

.ok {

  background-color: green;

  color: white;

  border: dotted;

}

.failed {

  background-color: red;

  color: white;

  border: dotted;

}

.waiting {

  background-color: yellow;

  border: dotted;

}

.generic {

  background-color: lightblue;

  border: dotted;

}



</style>

```

**What did you expect to happen?**

I want to be able to format svelte files just like prettier do.

 

**What actually happened?**

I'm trying to add a plugin to prettier to allow svelte files to be linted and formated but, I get this output:

```sh

pnpm eslint src/lib/Translations.svelte



/home/jcmunoz/Dropbox/Develop/node.js/itdfw-monorepo/web-components/itd-wc-translate-svelte/src/lib/Translations.svelte

  66:26  warning  Replace `⏎);(` with `;`  prettier/prettier

  68:12  warning  Replace `⏎);(` with `;`  prettier/prettier

  70:19  warning  Replace `⏎);(` with `;`  prettier/prettier

  73:69  warning  Replace `⏎);(` with `;`  prettier/prettier

  74:28  warning  Replace `⏎);(` with `;`  prettier/prettier

  76:20  warning  Replace `⏎);(` with `;`  prettier/prettier

  77:17  warning  Replace `⏎);(` with `;`  prettier/prettier

  78:20  warning  Replace `⏎);(` with `;`  prettier/prettier

  83:20  warning  Replace `⏎);(` with `;`  prettier/prettier

  87:34  warning  Replace `⏎);(` with `;`  prettier/prettier

  88:24  warning  Replace `⏎);(` with `;`  prettier/prettier

  89:46  warning  Replace `⏎);(` with `;`  prettier/prettier

  90:44  warning  Replace `⏎);(` with `;`  prettier/prettier

  91:25  warning  Replace `⏎);(` with `;`  prettier/prettier

  92:31  warning  Replace `⏎);(` with `;`  prettier/prettier

  93:19  warning  Replace `⏎);(` with `;`  prettier/prettier

  94:15  warning  Replace `⏎);(` with `;`  prettier/prettier

  95:31  warning  Replace `⏎);(` with `;`  prettier/prettier

  97:22  warning  Insert `;`               prettier/prettier



✖ 19 problems (0 errors, 19 warnings)

  0 errors and 19 warnings potentially fixable with the `--fix` option.

```

If I use prettier alone, it formats the file correctly, using the same configuration as in the .eslintrc

```json

{

  "printWidth": 120,

  "tabWidth": 2,

  "bracketSpacing": false,

  "trailingComma": "none",

  "arrowParens": "avoid",

  "plugins": ["prettier-plugin-svelte"],

}

```

```sh

pnpm prettier  src/lib/Translations.svelte

```

```svelte

<svelte:options tag={null} />



<script>

  /* TODO:

   * implementar links para editar con diálogos y definir si lo que se va a editar

   * es un string, un text o html

   */

  import {onMount} from "svelte";

  import {writable} from "svelte/store";

  function createRef(val) {

    const ref = writable(val);

    return [ref, ref.set];

  }

  // @ts-ignore

  import {requestBase} from "request-strategy";



  const request = requestBase(createRef, cb => onMount(() => cb), true);

  export let debug;

  export let locale;

  export let allowTranslations;

  export let showTranslations;

  export let context;

  export let subcontext;

  export let text;

  export let baseurl;

  let input;

  let mounted = false;

  let firstRequest = true;

  let result, error, mutate;

  // eslint-disable-next-line max-len

  $: url =

    (baseurl ? baseurl : "") +

    `/APP/AAA/Translate.translate?xhr=true&context=${context}&sub-context=${subcontext}&text=${text}&locale=${$locale}`;

  onMount(() => {

    ({result, error, mutate} = request(url, "SWR", undefined, true));

    mounted = true;

  });

  $: {

    if ($locale && mounted && firstRequest) {

      firstRequest = false;

    } else if ($locale && mounted && !firstRequest) {

      mutate(url);

    }

  }

  $: width = "min(calc(" + ($result?.text?.length || 10) + "ch + 5ch), 100%)";

  async function onChange() {

    // @ts-ignore

    const cookies = new Map(document.cookie.split("; ").map(c => c.split("=")));

    const xsrf = cookies.get("XSRF-TOKEN");

    const response = await fetch(url, {

      method: "PUT",

      headers: {

        "Content-Type": "application/json",

        "XSRF-TOKEN": xsrf

      },

      body: JSON.stringify({translation: input.value}),

      mode: "cors",

      credentials: "include"

    });

    const res = await response.json();

    if (res.status === "ok") {

      // await Promise.delay(500);

      //TODO forzar el mutate

      await mutate(undefined, true);

    }

  }

</script>



{#if $error}

  Error loading translation

{:else if !$result}

  Cargando...

{:else}

  <span class={$showTranslations ? $result.status.toLowerCase() : ""}>

    {#if $allowTranslations}

      <input

        value={$result.text}

        bind:this={input}

        on:change={onChange}

        on:click|preventDefault|stopPropagation

        style:width

      />

    {:else}

      {$result.text}

    {/if}

  </span>

{/if}

{#if typeof debug !== "undefined"}

  <div>locale {$locale}</div>

  <div>allowTranslations {$allowTranslations}</div>

  <div>showTranslations {$showTranslations}</div>

  <div>context {context}</div>

  <div>subContext {subcontext}</div>

  <div>text {text}</div>

  {#if $result}

    <div>result {$result.text}</div>

  {/if}

  <div>error {$error}</div>

{/if}



<style>

  .ok {

    background-color: green;

    color: white;

    border: dotted;

  }

  .failed {

    background-color: red;

    color: white;

    border: dotted;

  }

  .waiting {

    background-color: yellow;

    border: dotted;

  }

  .generic {

    background-color: lightblue;

    border: dotted;

  }

</style>

```

I don't know if my configuration is wrong or if the eslint-plugin-prettier can't load other plugins.



Regards.

[]