template-string-converter: Bugs with `template-string-converter.autoRemoveTemplateString`

First of all, thanks @meganrogge for your continued work on this extension, and @xNocken for creating the feature to convert back to a regular string when the interpolation markers (${}) are removed (in #19, original issue: #16).

The new feature is unfortunately somewhat buggy, making the editor actually frustratingly unusable in some cases.

Here are some buggy cases:

Adding a variable with an empty template string (for editing afterwards) causes it to be transformed to double quotes right away.

This particular issue above is avoided by only pressing the backtick key on the keyboard once, but this workaround doesn’t work with tagged template literals:
Removing the interpolation from a template string causes the cursor to jump to the end:
Typing inside an existing template string causes it to be converted to a string. This is exacerbated by 2 above.

This also is triggered by typing a $ into an empty template string:

I seem to have the feeling there were more problems with it, but I can’t think of them right now. I’ll follow up later with them if they come up.

It seems like some of these things may be solved by running this on file save. Hmmm… maybe also for the whole extension? @meganrogge what are your thoughts about running the transformations from this extension generally always on save? (eg. allowing configuration under editor.codeActionsOnSave?). This would also address cases like https://github.com/meganrogge/template-string-converter/issues/38

Or, if not, then maybe making it so that these autoRemoveTemplateString transformations get applied on save.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 41 (31 by maintainers)

Most upvoted comments

@xNocken to create a good, reproducible example, it can help to start with code.

If you want to put effort into creating a new issue that will capture the problem so that the bug gets fixed, try this:

The next time that the buggy behavior happens for you, backtrack a bit (undo a few times until before the bug), and then perform the exact actions needed to make it happen again
Copy the code you think was causing it into a new file and try it again elsewhere, to verify that the bug is really associated with the code you suspect it is. If the buggy behavior didn’t show up, you can instead copy more of your code again into a new file, and repeat until you find the correct code that causes the buggy behavior.
Once you find the code and the set of actions that triggers the buggy behavior, then you can copy the code into a new issue in this repository, along with a detailed description of the actions that someone else would follow to trigger the buggy behavior. At this point, you could also consider taking a video to post along with the new issue (I recommend Kap on macOS and ScreenToGif on Windows)

This is also what I went through to report the other issues in this repo.

karlhorky on Jan 15, 2022

This template-string-converter.autoRemoveTemplateString feature looks pretty good now, great work @meganrogge ! 🙌

karlhorky on Dec 29, 2021

having trouble with vsce again, but will publish the extension with the above changes ASAP

meganrogge on Dec 28, 2021

I’ll try to work on this over the holidays.

meganrogge on Dec 6, 2021

I appreciate that you point out these issues and wish I had more time to spend working on solutions to them. I imagine it would be a confusing experience for students who are just learning to see these unexpected cases. 😢

@meganrogge No worries, you’re doing a great job! ❤️

For now I usually avoid recommending this particular template-string-converter.autoRemoveTemplateString option for students because it’s still pretty buggy. But I would hope that in the future, it could be the default! 🙌

karlhorky on Dec 4, 2021

This may a bit off topic but what is the advantage over using this method?

@xNocken Yeah, philosophical discussions about why to use tagged template literals are pretty off topic, I agree.

If you’re interested in why the industry is using this technology, maybe take a look into common use cases such as Emotion, Postgres.js, etc. It’s a very nice DX (“Developer Experience”), and integrates with many tools, such as vscode-styled-components.

karlhorky on Dec 4, 2021

I appreciate that you point out these issues and wish I had more time to spend working on solutions to them. I imagine it would be a confusing experience for students who are just learning to see these unexpected cases. 😢

meganrogge on Dec 3, 2021