Prettier and ESLint in VS Code crash svelte compiler

[SteveALee]

Describe the bug
With this template where we want ESLint to co exist with prettier I have 2 problems when the plugins are nebale with this config

As described in the prettier docs this enable ESLint to call prettier

1. Lint crashes in the svlte compile - see stack trace
2. Prettier fails to format on save the App.svelte file - and error flashes up in the status bar

Logs
see stack trace

To Reproduce
Uncommented the line aboveand comment the one above it

1. Run npm run lint from the command line
2. edit the App.svelte and save the file

Expected behavior

1. no error and llinter succeeds
2. File is reformated via prettier

Stacktraces

Stack trace

$ npm run lint

[email protected] lint C:\projects\svelte-code-cypress-project
eslint src/*

ParseError: Expected }
1 | export let name
2 |

3 | {name;name=0}
| ^
Occurred while linting C:\projects\svelte-code-cypress-project\src\App.svelte:3
at error$1 (C:\projects\svelte-code-cypress-project\node_modules\svelte\compiler.js:13329:20)
at Parser$2.error (C:\projects\svelte-code-cypress-project\node_modules\svelte\compiler.js:13405:10)
at Parser$2.eat (C:\projects\svelte-code-cypress-project\node_modules\svelte\compiler.js:13419:19)
at mustache (C:\projects\svelte-code-cypress-project\node_modules\svelte\compiler.js:13220:17)
at new Parser$2 (C:\projects\svelte-code-cypress-project\node_modules\svelte\compiler.js:13364:22)
at Object.parse$1 [as parse] (C:\projects\svelte-code-cypress-project\node_modules\svelte\compiler.js:13495:21)
at Object.parse (C:\projects\svelte-code-cypress-project\node_modules\prettier-plugin-svelte\plugin.js:669:51)
at Object.parse$2 [as parse] (C:\projects\svelte-code-cypress-project\node_modules\prettier\index.js:10629:19)
at coreFormat (C:\projects\svelte-code-cypress-project\node_modules\prettier\index.js:13888:23)
at format (C:\projects\svelte-code-cypress-project\node_modules\prettier\index.js:14146:73)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] lint: eslint src/*
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\steve\AppData\Roaming\npm-cache_logs\2019-09-11T17_00_42_583Z-debug.log

Information about your Svelte project:

• Your browser and the version: (e.x. Chrome 52.1, Firefox 48.0, IE 10)
  Not relevant - build error

• Your operating system: (e.x. OS X 10, Ubuntu Linux 19.10, Windows XP, etc)
  Windows 10 latest 1903

• Svelte version (Please check you can reproduce the issue with the latest release!)
  3.12.1

• Whether your project uses Webpack or Rollup
  Roll up

Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely?

Serious - can't lint or run prettier on svelte files

Additional context
Add any other context about the problem here.

[Conduitry]

Running npm run lint is resulting in svelte.parse("export let name\n\n{name;name=0}") being called by prettier-plugin-svelte. The 'crash' is Svelte refusing to parse this invalid component.

That string looks like the contents of a <script> tag that would result internally while eslint-plugin-svelte3 is working, but the contents of the <script> shouldn't be getting parsed as a Svelte component.

eslint-plugin-svelte3 is an officially maintained library by the Svelte team, but prettier-plugin-svelte is not, and we can't provide configuration support for it on the Svelte repo.

[SteveALee]

@Conduitry OK, thanks for quickly investigating and pointing out the source. I'll raised it with prettier-plugin-svelte.

[SteveALee]

@Conduitry After debugging a bit it seems ot me that when we configure eslint to call prettier, eslint-plugin-svelte3 parses the script contents only to prettier-plugin-svelte which is expecting a component.

Thus, the error is in how prettier-plugin-svelte is handling the ESLInt prettier plugin.

I might be wrong but I think this should be reopened. Thanks

[toerndev]

@Conduitry:

That string looks like the contents of a <script> tag that would result internally while eslint-plugin-svelte3 is working, but the contents of the <script> shouldn't be getting parsed as a Svelte component.

How sure are we that this plugin is doing the right thing by swallowing everything outside of <script>? 😄
I can't really see why prettier-plugin-svelte would be the problem.
Surely Prettier would love to receive the whole file and format both script and template, so I'm wondering if there isn't a lost opportunity here. Aside from getting eslint-plugin-prettier to work it would perhaps also allow linting Svelte templates - it works for .jsx and .tsx so why not?

I haven't looked very far into how eslint works yet, but would it theoretically be possible for this plugin to return the whole .svelte file from the preprocessor instead of just an extract, if the mapping logic between lines and eslint issues is updated to match? Is that how it works?

Not complaining about the plugin but trying to understand where to direct any effort to improve this labyrinth of tools. 😆

[Conduitry]

As far as I know, no one on the Svelte team has spent any time looking into how Prettier plugins work in general nor into how prettier-plugin-svelte (which is an unofficial third party library) works in particular.

[toerndev]

@Conduitry Sorry let me rephrase! I'm looking for the maintainers' technical opinion on the possibility of having the eslint plugin working on the whole file instead. If the maintainers are open to explore the idea, it's more enticing to start trying to solve it. :)

No I get that the Prettier plugin isn't official and that maybe noone in the Svelte team uses Prettier, and am not asking your to prioritize it although I'm sure tons of newcomers will want this support... 😉
There's also the question of whether plugins are behaving as expected within the larger javascript & eslint ecosystem. How the eslint plugin might/should work, given enough development. Thus the question in my last reply about an alternative approach.

[SteveALee]

it although I'm sure tons of newcomers will want this support... 😉

I'd like to add my support to this, at least as a single newcomerto svelte. My workflow always included prettier to reformat my messy editing on file save. So it was natural to continue to use it for the JS part of svelte files.

I get that svelte files are NOT javascript but a compiled super set and that might lead to some issues but in general I want prettier to continue to work. In fact I doubt there will be any issues as Richard was careful to overload existing JS syntax for all new features - eg labels

[dclasen-qd]

@Conduitry I just can't see a single valid argument of yours other than: it is official and therefore it does the right thing. How would you be able to tell whether or not a third-party-plugin of a tech you (and all others of the svelte devs) didn't even spent time to understand works or works not the right way?
Actually this narrow-minded smell in the air is what makes people to be frustrated when they start using a new lib/framework/tech.
So could we please come back to a discussion where we work on solving this issue and sveltejs/prettier-plugin-svelte/issues/57 after almost 1.5 years?