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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Uh oh!

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

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions