Add a colon and semicolon, as well as trigger property value completion after rule name completion

[michaelschufi]

Currently we lose out on some of VS Codes' CSS auto-completion UX. There are some features I really miss using styled-components opposed to CSS/LESS/SCSS files. (see also this issue)

After selecting/completing the rule name, it should:

• Add a colon after the rule name
• Add a semicolon at the end of the line
• Trigger the property value completion for the completed rule

As shown here

[ftzi]

This is a must do. It annoys me that we have to manually insert the semicolon, even after saves.

But, is a nice extension!

[golfomania]

started today to learn about styled components (dev eds react course) and i totally agree, that this extended autocomplete would be great.

[seb-thomas]

#172 (comment)

Fork works

[NayamAmarshe]

#172 (comment)

Fork works

But it's based on an older version and doesn't support newer features like color highlighting.

[NayamAmarshe]

Currently we lose out on some of VS Codes' CSS auto-completion UX. There are some features I really miss using styled-components opposed to CSS/LESS/SCSS files. (see also this issue)

This is the only thing that's making me hate styled components compared to node-sass

[jasonwilliams]

Would appreciate any help on this, see https://github.com/styled-components/vscode-styled-components/blob/master/CONTRIBUTING.md#intellisense-issues

[jasonwilliams]

This should be released in v1.6.0

[jasonwilliams]

This has now been released, ive added a gif to the readme to showcase

[NayamAmarshe]

This has now been released, ive added a gif to the readme to showcase

Thanks a lot!

[Diagonet]

I see this has already been added but I can't seem to get proper autocomplete and colon/simicolon. All I want is the same behavior I can see in the gif, is there anything that could be interfering with it?

[jasonwilliams]

I see this has already been added but I can't seem to get proper autocomplete and colon/simicolon. All I want is the same behavior I can see in the gif, is there anything that could be interfering with it?

@Diagonet please raise a new bug issue with a screenshot and code for reproducing

[jasonwilliams]

@Diagonet i think microsoft/typescript-styled-plugin#156 may fix your issue

[Diagonet]

Yeah so, I found out I only get the proper semi-colon auto complete when I use Enter to auto complete (even thought I changed the vscode setting for Tab auto completion)

[timbam]

For anyone it can help, I had the same problem as Diagonet. Found out there's a styled-components shortcut that was set to enter instead of tab:
@ext:styled-components.vscode-styled-components