plugin inserts prettier:content when using webstorm

[theweekendgeek]

example svelte project using the default template: https://github.com/theweekendgeek/svelte-prettier-example)

This s happening in WebStorm, I could not yet reproduce this in Visual Studio Code. I would assume that other IDEs from Jetbrains behave the same. Not sure If I might need to be raising this issue with them, because of the way the IDE calls Prettier for example.

How to reproduce:

1. open project in webstorm
2. in Settings -> Prettier: make sure prettier package is selected, add svelte extension to Run for files. Check On 'Reformat Code' action and On save
3. open App.svelte
4. select onMount
5. type opening curly brace to surround with curly braces
6. prettier:content is inserted instead of reformatted code

What I have found out so far:

• In General I can call the Reformat with Prettier action without problems. I will format the code as expected, except when I have just done the sequence above and pressed undo. In this case the same result as above will shown.

• I can workaround the issue by disabling the On 'Reformat Code' action option in the Prettier Settings.

[dummdidumm]

I can't reproduce because I don't have these IDEs at hand now, but there's a open issue about prettier-plugin-svelte not being able to deal with formatting ranges (#233). When you press undo, is the code selected somehow? If so, this might boil down to fixing #233 in order to solve this.

[theweekendgeek]

I tested this and when I hit undo, the part that I had seleced before is selected again.

I think it could very well be related or the same issue as #233, I could imagine some ranged formatting being triggered when surrounding a selection with curly braces.

regarding reproduction: I think you could probably try with the Intellij Community Edition. the javascript plugin should be based on the same code as Webstorm.

[TheOnlyTails]

@theweekendgeek The JavaScript plugin for IntelliJ IDEA is only available for the Ultimate edition (which has it pre-installed, making it practically equivalent to WebStorm).

[dmwyatt]

Also getting this but I'm using PyCharm Pro (which is basically a superset of WebStorm).

@dummdidumm JetBrains provides free licenses to open source projects: https://www.jetbrains.com/community/opensource/#support

[freeform99]

Same problem here, with Webstorm. Unfortunately, entire script tag content got lost, which I only noticed some hours later, so lots of work to restore original file ...

[dustsucker]

I have the same Problem it never worked for me, I tested it a few times over the last year, but it never worked. In my experience, you don't need anything selected, it just cuts out the script part. It works for the JS files, though.

[staticglitch]

Experiencing the same issue on PhpStorm. Triggers on selecting something, then wrapping with {}. This is too complex for me to solve...

Workaround is: turn OFF prettier for "on reformat code" actions, and turn ON "on save." Then simply use save shortcut instead of reformat.

[NyxCode]

@staticglitch that worked for me, thanks!

[Lootwig]

Experiencing the same issue on PhpStorm. Triggers on selecting something, then wrapping with {}. This is too complex for me to solve...

Workaround is: turn OFF prettier for "on reformat code" actions, and turn ON "on save." Then simply use save shortcut instead of reformat.

Using "optimize imports" action still inserts this prettier:content block. Is there a workaround as well for achieving the same outcome?

[Lootwig]

Executing the action "remove braces around function body" somewhere on an on:click callback in the HTML also breaks the script block.

[mpellerin42]

This problem is still happening on a lot of actions (on save, on reformat, when trying usual refactoring trick like surrounding something with curly brackets…). It's a nightmare and prevent the proper usage of prettier + svelte in webstorm. I tried several things but nothing worked properly.

[Lootwig]

I found a workaround, which consists of disabling prettier entirely, and configuring the IDE formatter to apply prettier's rules instead. You can do this by navigating to .prettierrc, and selecting "apply prettier code style rules" from the file's context menu. You can then use the IDE's "reformat code" action (includes also running on save, for example) for everything.

However, this change is lost upon restarting the IDE, which I have created a bug ticket for and would appreciate everyone thumbs-upping it for prioritization as long as it's the only way to prevent the prettier:content bug from messing up your files.

[allofapiece]

+1

P.S.

Same problem here, with Webstorm. Unfortunately, entire script tag content got lost, which I only noticed some hours later, so lots of work to restore original file ...

for those who lost their original file content due to this error: this prettier:content is base64 string, just decode it.

[sjunepark]

+1

This is really annoying

[abdelfattahradwan]

Do you have any updates on this matter? In my opinion, this is a serious issue that needs to be addressed. If someone could provide information on what needs to be done, I would be more than willing to help fix this annoying and show-stopping bug.

[dummdidumm]

This is an upstream bug/limitation. We need a way to hook into prettier's "format range" option: https://github.com/prettier/prettier/issues/7639 Until then, we can't fix this bug. Related: #233

[falkomerr]

Turn off all actions on save except prettier works for me

[Lootwig]

@falkomerr manually configuring the prettier version to whatever package resides under node_modules made this work for me - before, I had "automatic configuration" selected, the dialog looks like the screenshot and the bug occurs no matter if other options are selected or not

Note: bug still occurs when "run on reformat" is selected, independent of what's enabled in "run on save"