CSS class names autocompletion for attributes other than "class"


I'm trying out Webstorm for the first time on an Angular project, and I love the fact that it auto-completes the CSS class names while typing.

However, this only works with the "class" attributes specifically. This is a bit limiting, because there are instances where it would be useful to have this autocomplete in other attributes as well. For example, I'm using a ui library where the components all have a "styleClass" attribute that is used to assign classes to the inner component's root element, it would be very useful to have the autocompletion there as well. Another example is a library I'm using for icons where there is an "icon" attribute that is actually a list of classes. Just two examples, but I'm sure there can be many more.

So my question is: is there a way we can tell Webstorm to autocomplete CSS class names on attributes other than "class"? I didn't find anything in the settings, but maybe I didn't search hard enough... or maybe there is a relevant plugin?

there is no way to do this currently:( related feature request: https://youtrack.jetbrains.com/issue/WEB-10278/Inject-Reference-for-CSS-class, please vote for it to get notified on any progress

Thanks, voted.


The aforementioned ticket has a workaround that works in plain HTML files (I'm not an Angular user so cannot test it there).

Have you tried it?

Unless I've got it all wrong ofc...


It works, thank you Andriy Bazanov! Here's the configuration for Angular if your attribute is named "styleClass" (you can change it of course):



It should work with "HTML" as a Language ID as well (and not specific to "angular2html" id). Because that's the language you are injecting. And I'm not sure if CSS class names will be different in Angular as compared to HTML... (but then, I'm not using Angular at all, maybe there are some nuances/extra filtering in place)


Please sign in to leave a comment.