Code completion?

[oscar-b]

Excellent work on the syntax highlighting, it looks a lot better now :)

Is it possible to also get CSS code completion, or is that not possible in VSCode?

[wmertens]

I came here with that same question, and also with a link to something that may be related: microsoft/vscode#8928

[julienp]

Thanks for the link, I'll look into this in the near future.

[wmertens]

See also microsoft/vscode#2793 (comment), it seems that it is already possible if you manage to match the template strings with a TM grammar

[chuckhendo]

To add on to this - Emmet support would be great. Emmet/Code has an option for syntaxProfiles, so you can specify that you want to use CSS Emmet instead of HTML Emmet.... but it doesn't seem to detect that I'm inside of a CSS block and just does the HTML completion. Not sure if this can be fixed here or if it's a VSCode issue.

[YarivGilad]

@wmertens You have me confused... is it possible to autocomplete?
I read the comment you referenced. Is it possible to do or is it a suggestion?
Thank you!

[wmertens]

Hmm you are right, not sure if autocomplete works with the injection grammars, maybe those are two different things

[mattiaerre]

+1 on this, autocomplete would be splendid; the last missing bit I guess 👍 and also linting but that's another story 😅

[YarivGilad]

Is there anything we can do to help this feature besides waiting or +1 ?
Can you reference a resource of how to create such an extension? is there anyone working on such an extension that can use some help? How can we go about contributing for this to materialize?

[julienp]

Currently I have done no work toward this, and I'm not quite sure where to start. I'll of course happily merge any merge request implementing this :)

As @Ajar-Ajar said, any references or examples on how to go about this would be very helpful

[iFwu]

I think built-in css code completion is done by css language server, which you can refer to the offical css extension.

By the way, first I thought it's easy, just add "embeddedLanguages": { "source.css": "css" } to the "grammars" attribute, but Styled Components syntax differs from original css, which doesn't has css-legal brackets, and it causes the literal template blocks can't be highlighted by built-in css colorizer.

[wmertens]

Isn't the syntax more-or-less SASS compatible?

…

On Mon, Apr 3, 2017 at 3:11 PM xekri ***@***.***> wrote: I think in-built css code completion is done by css language server, which you can go refer to the (offical css extension)[ https://github.com/Microsoft/vscode/tree/master/extensions/css]. By the way, first I thought it's easy, just add "embeddedLanguages": { "source.css": "css" } to the "grammars" attribute, but styled components syntax differs from original css, which doesn't has css-legal brackets, and it causes can't the completion can't be highlighted by built-in css colorizer. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADWlntABGN-NL3YwJ2I2v23FRHOPOlqks5rsPASgaJpZM4KxOSP> .

[iFwu]

I think .css only contain scss styled syntax. The method I mention before doesn’t work too. I tried on some language that use embeddedLanguages, and it doesn’t offer auto completion either. Perhaps it’s a missing feature of vscode, maybe you can create a issue for it.

[svipas]

Check this: https://marketplace.visualstudio.com/items?itemName=plievone.vscode-template-literal-editor, it have only 1 problem I write about that in issues.

[ghost]

I use the template literal editor as well. Works great. Thanks for the suggestion @svipben

[muhajirdev]

looking for the same thing. And recently found out that glamorous support autocomplete, it's nice. But it doesn't use css syntax, it use JS Object. The API is pretty similiar as it's inspired by styled-components

[auchenberg]

This functionality seems to be depend on landing microsoft/vscode#5961 in Code.

[lXSPandora]

Hey guys test it out

https://marketplace.visualstudio.com/items?itemName=lXSPandora.vscode-styled-components-snippets

[mjbvz]

I've created a TypeScript server plugin that adds suggestions, error reporting, and hovers for styled component strings in JS and TS: https://github.com/Microsoft/typescript-styled-plugin

This plugin works well in VS Code alongside the vscode-styled-components extension, and it also should work in any other editor that uses the TypeScript language service. Eventually we plan to let VS Code extensions contribute TS server plugins as well, which would eliminate the need for any extra npm installs or configuration.

Please give the plugin a try and let me know if you run into any issues

[SidKwok]

@mjbvz Thanks! Great job!

[comerc]

@mjbvz how to use it with styled-jsx?

[aczekajski]

@mjbvz Thanky you for the plugin! However, it is possible in styled-components to nest the selectors, just like in SCSS, so you can write &:hover { ... } or .wrapper & { ... } or even ${OtherComponent} { ... } and the autocompletion breaks inside the curly brackets.

[mjbvz]

Please post issues about the plugin here: https://github.com/Microsoft/typescript-styled-plugin/issues

[jeremytenjo]

Is there a better solution?

How can Atom make it work seamlessly, but VScode can't. This is the only reason I don't switch completely to VScode.