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]

.vscode/settings.json

{"liveSassCompile.settings.formats": [
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": null,
        "savePathReplacementPairs": null
    }
]}

Links

c'T 2020, Heft 2, S.156