Pressing return after back-ticks does not jump to new line, selects first result of intellisense

[mmckinley8]

Describe the bug (including copyable syntax)
When creating a styled component, pressing return after a back tick does not add a space and auto-indent the way it should. In fact, it selects the first result from intellisense and does not jump to the next line. This is a very glaring issue and slows down productivity.

Screenshot
Atom (how it should behave):

VS Code:

To Reproduce
Create a styled components, press enter after back tick

Expected behavior
I expect the trailing back tick to jump two lines below the leading, and the cursor to be indented on the line in between the back ticks.

Build environment (please complete the following information):

• OS: MacOS Big Sur 11.2.3
• VSCode Version: 1.54.1
• Extension Version 1.5.0

Additional context
Add any other context about the problem here.

[jasonwilliams]

Thanks for raising this @mmckinley8 I appreciate the detailed bug report. I have noticed this too, but sadly not have time to look at it. This repo are looking for contributors at the moment.

Did you want to contribute to fixing this bug?

The logic lives here and we have a contributing guide also

When I tried to quickly fix it in the past I noticed sometimes VSCodes’ competitions take precedence and I couldn’t find a way to remove that.

[jasonwilliams]

👋 @jrieken do you know how we can override completions so that ours will be top? Even though we add our snippet in directly it’s sometime halfway down the list.

[jasonwilliams]

@mmckinley8 is this still an issue in the latest version?

[jasonwilliams]

microsoft/typescript-styled-plugin#157 should help with this

[emfresh2o]

Hello,

i am wonderng why am i getting syntax error in VSCODE using style component. The problem is when using styled component with the 'tick mark'... when I start to type in 'tick mark' it actually doesn't create the pair... and what happens I need to create another one to put my style in... why is this happening? HELP! (attached screenshot)

[jasonwilliams]

@emfresh2o im not sure I understand your problem. Could you post a video here?

[amalikmuhd]

I was facing the same problem.

Install vscode-styled-components on visual code extension