visual studio code: less files show autocomplete, css files do not
Asked Answered
V

1

6

since migration from less to css, visual studio code is giving me a hard time.

When editing *.less files, autocomplete work wonderfully and shows information like that: enter image description here

However, when I do the same thing in a *.css file, things look like that: enter image description here

This neither shows the MDN reference, nor does it list the available auto suggest options. I have looked through my extension several times, however there is nothing less specific installed.

Why do I see such different behaviour when editing less and css files? And most importantly, how do I enable the MDN reference and autocomplete for css files?

EDIT

Just found out, that the reason for this behaviour is the usage of post css. Visual Code uses file type post css for css files. When the file type is changed to css, the behaviour is identical to less files. Is there a way to enable the css IntelliSense features for post css file type?

Vallejo answered 1/4, 2020 at 14:55 Comment(0)
S
7

If you want to work with PostCSS, you'd need to install an extension to get support. Look up in the Marketplace for a language server. This one implements IntelliSense on top of syntax highlighting (not all do! See below).

Intellisense working

See this and this other discussion on GitHub for why regular CSS autocompletion is not used for PostCSS. In general terms, valid PostCSS would not be handled correctly. Of course you can force to do it by changing the language mode in the lower right corner.

On the other hand, the fact that your .css files are binding to PostCSS possibly means that some extension is overriding the defaults. This one has exactly the issue of taking over CSS files and failing to provide autocompletion. For some reason I couldn't re-override it by writing down the file associations in the settings JSON, so I would either have to change the language mode each time, or uninstall/disable it.

Surfbird answered 16/4, 2020 at 21:4 Comment(1)
Thanks a lot for your answer. I am indeed having PostCSS Language Support installed and my issue pretty much is the one you linked. I tried installing postcss-sugarss-language, which brings back all the MDN stuff that I wanted, which is awesome. However, it also break postcss-modules-values and VSC now complains about all @values used. I'll accept this answer, because I don't think there currently is no easy way to get support for all the things I would like to see. Will look into custom format, maybe there is a way to get that working.Vallejo

© 2022 - 2024 — McMap. All rights reserved.