<= [[dev:start|Developer Notes Übersicht]] ====== Web-Entwicklung mit Visual Studio Code ====== ===== PHP ===== Erweiterungen: * PHP by DEVSENSE * Laravel Blade Formatter * Laravel Blade Snipperts * Laravel Extra Intellisense * Laravel goto view * Auto Rename Tag * Highlight Matching Tag * Prettier - Code formatter * Intellisense for CSS class names in HTML * Tailwind CSS IntelliSense ===== Emmet ===== ^ Zweck ^ Code ^ | HTML-Grundgerüst einfügen | ''!'' | | div-Tag | ''div'' | | div-Tag mit Klasse und ID-Attribut | ''.klasse#ID'' | | Mehrere gleiche Elemente | ''a.klasse*3'' | | Komplexe Struktur | ''.container>(header>h2)+(nav>a.nav-el*3)+section+footer'' | | Tag mit Inhalt | ''h1{Überschrift}'' | | Head/Link-Tag | ''link:css'' | ===== HTTP Server ===== VSCode-Extension: Live Server Button: **[Go Live]** ===== CSS-SASS-Compiler ===== VSCode-Extension: Live Sass Compiler Button: **[Watch SASS]** {"liveSassCompile.settings.formats": [ { "format": "compressed", "extensionName": ".min.css", "savePath": null, "savePathReplacementPairs": null } ]} ===== Links ===== [[https://www.heise.de/select/ct/2020/2/1578237886674926|c'T 2020, Heft 2, S.156]]