CSS IntelliSense in Visual Studio mit Angular und Resharper


Manchmal könnte man sagen “früher” war alles besser. Zumindest war es mit Angular 1 und dem “alten” System in dem man noch direkt JavaScript und Styles eingebunden hat, einfacher im HTML die passende IntelliSense für die CSS Klassen mit der Hilfe von Resharper zu erhalten. Dabei handelte es sich z.B. um Bootstrap und font awesome Klassen.

Wenn man jetzt aber das ganze für Angular 2 möchte, wo alle Styles und Scripts nur noch aus dem node_modules Ordner referenziert werden und das Projekt mit Hilfe von Webpack gebaut wird. Gibt es nicht mehr “einfach” so die IntelliSense für die CSS Klassen.

Auch auf Addons wie Glyphfriend kann man leider nicht zurückgreifen, denn hier muss man die IntelliSense für HTML und CSS im Resharper ausstellen, damit die IntelliSense von Visual Studio greift. Dann hat man aber keine Autovervollständigung von Angular 2 Variablen im HTML Template mehr – was meiner Meinung nach noch wesentlich wichtiger ist.

Hier bleibt meines Wissens aktuell leider nur eine Möglichkeit, man kopiert sich die passenden css Dateien aus dem node_modules Ordner und fügt die Dateien bei sich im Projekt ein und macht noch einen Vermerk das die Dateien nur für die IntelliSense im Projekt enthalten sind aber nicht direkt referenziert werden.

image

wie man sieht hat man dann auch IntelliSense für Bootstrap 4 und die Klassen sind nicht alle unterstrichen (was normalerweise bedeutet das er die Klasse nicht kennt).

image

Auch font awesome geht wieder.

image

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s