plugin:prettier/recommended breaks svelte

[boojum]

Extending eslint with recommended config from prettier breaks svelte. This:

extends: ['eslint:recommended', 'plugin:prettier/recommended']

causes an error when linting svelte files:

✖ eslint found some errors. Please fix them and try committing again.

ParseError: Expected }
  1 | export let name;
  2 | 
> 3 | {name;name=0}
    |     ^

Everything works fine if I remove plugin:prettier/recommended from the extends array. "Offending" svelte snippet:

<script>
  export let name;
</script>

In case its relevant, linting is run with husky / lint-staged on commit using:

'./src/**/*.{js,svelte}': ['eslint --fix', 'prettier --write'],

Version: "eslint-config-prettier": "^6.10.1"

[lydell]

Hi!

This package is only a simple ESLint config that turns a bunch of rules off. 'plugin:prettier/recommended' comes from eslint-plugin-prettier. But I’ll try to help anyway.

First, since you’ve set up husky/lint-staged to run both eslint --fix and prettier --write I don’t see the point of using eslint-plugin-prettier. I’d remove it if I were you – it’s just slow.

Next, you need to reduce your example. There are so many different packages involved that it’s hard to tell where your problem comes from! Make a new repo, add in your ESLint and Prettier config and the <script>export let name;</script> test code. Run something from the command line that reproduces the problem. Then start removing things, one by one until you have the minimal setup to reproduce the problem. If the problem goes away, add the last thing back again and remove something else.

For example, try to get rid of husky, lint-staged, most ESLint rules, Prettier config, etc.

Then we can try to figure out what’s going on!

[boojum]

Nice one, I appreciate this.

I already went through the packages one by one, that's how I ended up with plugin:prettier/recommended being the cause here. Repo with the minimal setup (eslint, prettier, and plugins required to process .svelte files) is here. To reproduce, clone the repo and run:

npx eslint --fix ./src/**/*.{js,svelte}

... it will fail. Then remove prettier/recommended from eslint config and try linting again - it works. Not sure really as to why it is so...

EDIT:

Actually! The issue is with prettier-plugin-svelte! When I removed it all is working just fine. Closing.

[lydell]

Happy to hear you fixed it! 👍

As a tip for the future, if you end up with some sharable config (something in your extends array) being the culprit, the next step is to check that out config on github and move it directly into your config. Then, remove things one-by-one from that.