Visual Studio Code - Tipps

1. Verschachtelung

Um einige Elemente zu verschachteln, müssen Sie nach jedem Tag, den Sie verwenden möchten, nur größere Zeichen hinzufügen. Wenn ich zum Beispiel einen header mit nav, div, ul und li haben möchte, muss ich einfach header>nav>div>ul>li und die Treffer-Tabulatortaste eingeben.

2. Geschwister

Wenn Sie Ihre Elemente nicht verschachteln möchten, können Sie einfach ein Pluszeichen gefolgt von den hinzuzufügenden Tags verwenden. Beispielsweise geben die header+section+article+footer eine andere Position für header, section, article und footer .

3. Aufsteigen

Wenn Sie sich in einem untergeordneten Element befinden und ein anderes Element außerhalb dieses untergeordneten Elements haben möchten, können Sie problemlos ein Element mit dem Zeichen ^ oben klettern. Wenn Sie es zweimal eingeben, klettern Sie doppeltes Element und so weiter. Wenn Sie beispielsweise header>div>h1>nav eingeben, befindet sich das Element nav noch in h1. Um es herauszuholen, ersetzen Sie einfach das letzte Zeichen mit ^ .

4. Klasse hinzufügen

Emmet kann auch Ihren bevorzugten Klassennamen in das Tag aufnehmen. Das von Ihnen verwendete Zeichen ist das gleiche wie der Klassenselektor in CSS, der ein Punkt ist . Zeichen. Wenn ich zum Beispiel ein div mit .container Klasse haben .container, h1 mit .title und nav mit .fixed, dann muss ich nur div.container>header>h1.title+nav.fixed .

Wenn Sie mehr als eine Klasse haben möchten, geben Sie Ihre zusätzliche Klasse nach der ersten Klasse zusammen mit dem Punkt ein . Zeichen. Beispiel: div.container.center produziert.

5. ID hinzufügen

Neben dem Unterricht können Sie auch eine ID mit # -Zeichen in Ihr Tag einfügen. Die Verwendung ist dieselbe wie beim Hinzufügen einer Klasse, aber Sie dürfen keine doppelte ID eingeben. Wenn Sie dies versuchen, liest Emmet nur die letzte von Ihnen eingegebene ID.

6. Text hinzufügen

Emmet ist nicht nur so einfach, da nur einige Tags abgekürzt werden, Sie können sogar eine Zeile Text hinzufügen. Um etwas Text hinzuzufügen, müssen Sie den Text nur mit geschweiften Klammern {} umschließen. Sie müssen kein größeres Zeichen hinzufügen, da der Text automatisch in das Tag eingefügt wird.

7. Attribut hinzufügen

Wenn Sie ein anderes Attribut neben Klasse und ID hinzufügen möchten, platzieren Sie das Attribut, das Sie hinzufügen möchten, innerhalb des Klammerzeichens [] . Zum Beispiel möchte ich ein Bild haben, das die Quelle logo.png mit dem Logo alt hat. Ich gebe also einfach img[src="logo.png"] .

8. Gruppierung

Wenn Sie ein Element mit mehreren verschachtelten Elementen haben möchten, können Sie dies durch das Gruppieren mit dem () Zeichen leichter erreichen. Zum Beispiel möchte ich einen Container haben, der einen Header mit h1 und einem nav innerhalb und einen anderen Abschnitt außerhalb des Headers hat. Ich schreibe einfach: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .

9. Multiplikation

Diese Funktion wird möglicherweise zu einem Ihrer Favoriten von Emmet. Wie bei der Multiplikation können wir jedes Element beliebig multiplizieren. Um es zu verwenden, fügen Sie einfach ein Sternchen * nach dem Element hinzu, das Sie multiplizieren möchten, und fügen Sie die Nummer des Elements hinzu. Zum Beispiel möchte ich fünf li-Elemente in ul schreiben, dann lautet die richtige Syntax: ul>li*5 .

10. Automatische Nummerierung

Durch die automatische Nummerierung können Sie mit zunehmender Nummer leicht einen anderen Namen schreiben. Die richtige Syntax für diese Funktion ist ein Dollarzeichen. Die automatische Nummerierung wird am besten für die Multiplikation verwendet. Beispiel: Ich möchte meinen vorherigen Artikel mit einer Klasse von item1 zu item5 item1 item5 . Also muss ich nur noch einen Klassennamen mit Dollarzeichen hinzufügen: ul>li.item$*5 .

11. Lorem

Wenn Sie früher einen Dummy-Text geschrieben haben, indem Sie den Lipsum-Generator wie lipsum.com öffnen, müssen Sie dies bei Emmet nicht mehr tun. Emmet unterstützt auch einen Dummy-Textgenerator mit lorem oder lipsum Syntax. Sie können auch angeben, wie lang Ihr Text werden soll. Zum Beispiel möchte ich Text mit 10 Wörtern lang haben, dann lorem10.

p*4>lorem250 Macht 4 Absätze mit jeweils 250 Wörtern.

12. Auto Dokument

Wenn Sie ein neues Projekt starten, müssen Sie die HTML-Struktur nicht manuell schreiben oder das Einfügen aus anderen Ressourcen kopieren. Emmet kann dies besser für Sie tun. Sie müssen nur ein Ausrufezeichen eingeben ! unterschreiben, Tab drücken und die Magie passiert. Dadurch wird eine HTML5-Dokumentstruktur für Sie erstellt.

13. Link

Wenn Sie ein Favicon, eine RSS-Datei oder eine externe CSS-Datei haben, die Sie Ihrem Dokument hinzufügen möchten, können Sie sie mithilfe von Link-Tricks schneller schreiben. Um ein Favicon einzuschließen, geben Sie link:favicon Anschließend wird ein Favicon-Link mit dem Standardnamen favicon.ico erstellt. Für CSS generiert link:css einen CSS-Link mit dem standardmäßigen style.css . RSS wird als Standardname rss.xml .

14. Anker

Wenn Sie a Tag eingeben und dann auf die Registerkarte klicken, wird standardmäßig a Tag mit dem Attribut href angezeigt. Sie können jedoch einen // Wert hinzufügen, wenn Sie ihn mit einem Link verknüpfen, beispielsweise mit a:link . Und wenn Sie stattdessen einen E-Mail-Link haben möchten, verwenden Sie eine E- a:mail .

Öffnen Sie die Browserkonsole (DevTools), gehen Sie zu den Einstellungen und ...

1. Klicken Sie auf: Arbeitsbereich.
2. Aktivieren Sie: Quelldateien in Visual Studio Code öffnen (optional).
3. Aktivieren Sie: DevTools-Änderungen auf Datenträger speichern (optional).
4. Legen Sie den Pfad zur Datei: .vscode fest (optional).
5. Legen Sie den Pfad zum Arbeitsverzeichnis (htdocs) fest. In diesem Beispiel ist es: file///C:/xampp/htdocs

Tipps

• Die Browserkonsole muss dabei immer geöffnet bleiben, was ja eigentlich beim programmieren selbstverständlich dein sollte.
• Aktivieren Sie in Visual Studio Code die Option: Automatisch speichern.

Allgemein

STRG + UMSCHALT + P, F1 Befehlspalette anzeigen

STRG + P Schnell öffnen, gehe zu Datei...

STRG + UMSCHALT + N Neues Fenster/Neue Instanz

STRG + UMSCHALT + W Fenster/Instanz schließen

STRG + , Benutzereinstellungen

Grundlegende Bearbeitung

STRG + X Schnittzeile (leere Auswahl)

STRG + C Zeile kopieren (leere Auswahl)

Alt + ↑ / ↓ Zeile nach oben / unten verschieben

Shift + Alt + ↓ / ↑ Zeile nach oben / unten kopieren

STRG + UMSCHALT + K ENTF-ZEILE

STRG + Eingabetaste Der Einfügezeile unten

STRG + UMSCHALT + Eingabetaste Einfügenzeile oben

STRG + UMSCHALT + \ Zur passenden Klammer springen

STRG + ] / [ Einzug/Einzugszeile

Home / Ende Zum Anfang/Ende der Zeile

STRG + START Gehe zum Anfang der Datei

STRG + Ende Gehe zum Ende der Datei

STRG + ↑ / ↓ Scrollen Der Zeilenlauf nach oben/unten

Alt + PgUp / PgDn Scrollen Sie die Seite nach oben / unten

STRG + UMSCHALT + [ Bereich falten (reduzieren)

STRG + UMSCHALT + ] Bereich entfalten (Ausblenden aufheben)

STRG + K STRG + [ Alle Unterbereiche falten (reduzieren)

STRG + K STRG + ] Alle Unterbereiche aufklappen (einblenden)

STRG + K STRG + 0 Alle Bereiche falten (reduzieren)

STRG + K STRG + J Alle Bereiche aufklappen (ausblenden)

STRG + K STRG + C Zeilenkommentar hinzufügen

STRG + K STRG + U Zeilenkommentar entfernen

STRG + # Zeilenkommentar umschalten

UMSCHALT + ALT + A Blockkommentar umschalten

ALT + Z Zeilenumbruch umschalten

Navigation

STRG + T Alle Symbole anzeigen

STRG + G Gehe zu Zeile...

STRG + P Gehe zu Datei...

STRG + UMSCHALT + O Gehe zu Symbol...

STRG + UMSCHALT + M Bedienfeld "Probleme anzeigen"

F8 Weiter zur nächsten Fehlermeldung oder Warnung

UMSCHALT + F8 Gehe zu vorherigem Fehler oder vorheriger Warnung

STRG + UMSCHALT + TAB Navigieren im Editorgruppenverlauf

ALT + ← / → Zurück / Vorwärts

Suchen und Ersetzen

STRG + F Suchen

STRG + H Ersetzen

F3 / Shift + F3 Weiter/Zurück suchen

ALT + EINGABETASTE Alle Vorkommen von Übereinstimmung suchen auswählen

STRG + D Auswahl zur nächsten Übereinstimmung suchen hinzufügen

STRG + K STRG + D Letzte Auswahl auf nächste Übereinstimmung suchen verschieben

ALT + C / R / W Groß-/Kleinschreibung beachten / regex / ganzes Wort

• Pfad zum PHP-Executable beim lokalen Webserver XAMPP:
"php.validate.executablePath": "c:/xampp/php/php.exe",

• Passende Klammern einfärben:
"editor.bracketPairColorization.enabled": true,

• Automatische Zeichenkodierung ausschalten:
"files.autoGuessEncoding": false,

• Farbe der Statusleiste von VS Code ändern:

"workbench.colorCustomizations": {
    "statusBar.background" : "#1A1A1A",
    "statusBar.noFolderBackground" : "#212121",
    "statusBar.debuggingBackground": "#263238"
},