Kurse

Emmet-Variablen einstellen

VS Code nutzt Emmet, um das Schreiben von HTML-, XML- und CSS-Code zu erleichtern. Wenn man damit über das Tastaturkürzel ! das HTML5-Grundgerüst erstellen lässt, stellt Emmet das lang-Attribut des html-Tags auf englisch ("en") ein. Um Emmet anzuweisen bei diesem Attribut "de" als Wert einzustellen sind folgende Schritte durchzuführen:

1. über STRG + , die Settings öffnen
2. oben rechts auf das kleine Datei-Icon klicken
3. es öffnet sich die Datei settings.json
4. folgenden Code zwischen die beiden existierenden geschweiften Klammern schreiben:
   Hinweis:
   Die kopierten geschweiften Klammern müssen mit in die bereits vorhandenen geschweiften Klammern eingesetzt werden!
   Sollten dort bereits Einträge gemacht worden sein muss hinter dem letzten Eintrag ein , gesetzt und darunter der Code geschrieben werden

                  
"emmet.variables": {
  "lang": "de"
}
                  
              

Fira Code als Editor-Schriftart

Als Editor-Schriftart benutze ich Fira Code. Diese Schriftart wurde mit sog. Ligaturen angelegt, die bestimmte Zeichen etwas "schöner" darstellen.

1. Die Schriftart Fira Code unter GitHub herunterladen, das ZIP-Archiv entpacken und die TTF-Schriftarten (alle) installieren (Rechts-Klick auf die ausgewählten Schriftarten und auf "installieren" klicken).
2. Visual Studio Code öffnen.
3. über STRG + , die Settings öffnen
4. im Suchfeld "font" eingeben (ohne Anführungszeichen)
5. sicherstellen, dass das Register "Benutzer" aktiv ist
6. unter der Einstellung Editor: Font Family in das Formularfeld "Fira Code" (ohne Anführungszeichen) eingeben.
7. dann oben rechts auf das kleine Datei-Icon klicken
8. folgenden Code zwischen die beiden existierenden geschweiften Klammern schreiben:
   Hinweis:
   Sollten dort bereits Einträge gemacht worden sein muss hinter dem letzten Eintrag ein , gesetzt und darunter der Code geschrieben werden

            
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true
            
          

Meine bevorzugten Einstellungen

Es gibt im VSCode einige Einstellungen, die ich sinnvoll finde.

Wenn ihr ebenfalls diese Einstellungen nutzen möchtet geht folgendermaßen vor:

• Öffnet mit STRG + , die Einstellungen
• Sucht im Suchfeld oben nach der angegebenen Einstellung und stellt sie entsprechend ein.

Schriftgröße ändern

Wie die Schriftart geändert wird, habe ich bereits im vorigen Kapitel beschrieben. Dort kann man auch die Schriftgröße festlegen. Meiner Meinung nach ist die Standardgröße von 14px für die Fehlersuche zu klein. Ich stelle die Schrift im der Regel auf 18px um. Dann sind Fehler, besonders bei kleinen Zeichen wie Punkt, Komma etc. besser zu erkennen.

Im Folgenden nun weitere Einstellungen:

Auto Save

Dazu habe ich bei mir die Einstellung "Editor: Auto Save" auf "afterDelay" eingestellt, so dass ich nicht ständig STRG + S drücken muss um meine Änderungen zu speichern.

Alternativ kann man hier auch den Wert "onFocusChange" nutzen. Dann wird gespeichert, wenn die Datei den Fokus verliert.

Zeilenumbruch

Die Code-Zeilen im Editor machen keinen automatischen Zeilenumbruch. Das ist unter Umständen hinderlich. Hier hilft einmal die Tastenkombination ALT + Z, welche die Zeilenumbruch aktiviert bzw. deaktiviert. Allerdings muss das bei jeder Datei einzeln eingestellt werden. Man kann dies über die Einstellungen allerdings auch global festlegen. Dazu müsst ihr die Einstellung "Editor: Word Wrap" (bitte nicht die Einstellung "Diff Editor: Word Wrap"!) auf "on" stellen.

Format On Save

Ebenfalls sehr hilfreich finde ich die Einstellung "Editor: Format On Save". Hierzu müsst ihr die Checkbox dort aktivieren. Bitte nicht verwechseln mit "Editor: Format On Save Mode"!

Auto Rename Tag

Diese Einstellung sorgt dafür, dass bei einer Änderung der Tag-Bezeichnung im Start-Tag das End-Tag automatisch mit geändert wird. Für diese Einstellung gab es früher die gleichnamige Erweiterung.

Seit Kurzem ist dies in VSCode installiert. Man kann diese Einstellung unter dem Suchwort Editor: Linked Editing in den Einstellungen finden und muss dort die Checkbox aktivieren.

Eigene Tastenkombinationen erstellen

VSCode bringt jede Menge Tastenkombinationen mit. Sehr hilfreich finde ich z.B. die Tastenkombinationen ALT + Shift + ↑ bzw. ↓. Hiermit lässt sich die Zeile, in welcher der Cursor steht bzw. eine komplette Auswahl mehrerer Zeilen ganz einfach duplizieren.

Ebenfalls dazu gehören die Tastenkombinationen ALT + ↑ bzw. ↓. Mit diesen kann man Zeilen bzw. ganze Auswahlen vertauschen.

Aber VSCode stellt in Zusammenspiel mit dem Emmet-Plugin, welches standardmäßig in VSCode eingebaut ist, einen meiner Meinung nach sehr mächtigen Befehl zur Verfügung: "Mit Abkürzung umschließen". Dieser ist allerdings aktuell weder im Menü zu finden noch gibt es ihn als Tastenkombination. Gut nur, dass man eigene Tastenkombinationen hinzufügen kann.

Was macht aber diese Einstellung? Man kann damit Worte, Wortgruppen oder ganze HTML-Element-Strukturen markieren und dann um diese Markierung ein umschließendes HTML-Tag oder sogar verschachtelte HTML-Tags herumlegen. Ich möchte dies bei meiner täglichen Arbeit nicht mehr missen.

Wie erzeugt ihr nun eine eigene Tastenkombination? Hier die Anleitung:

• Öffnet über Einstellungen > Tastenkombinationen bzw. Zahnrad > Tastenkombinationen oder STRG + K STRG + S die Tabelle der Tastenkombinationen.
• Gebt in der Suchleiste oben z.B. den Begriff "Wrap" ein und findet in der gefilterten Ansicht die Zeile "Emmet: Mit Abkürzung umschließen" bzw. "Wrap with Abbreviation".
• Klickt mit der Maus auf das +-Symbol links neben der Bezeichnung. Daraufhin öffnet sich in der Mitte der Tabelle ein Textfeld.
• Drückt nun auf der Tastatur die gewünschte Tastenkombination. Diese wird in dem Textfeld angezeigt. Sollte sie bereits belegt sein gibt VSCode einen Hinweis aus. Bei mir war die Kombination STRG + ALT + T (wie Tag) noch frei und gut zu merken.
• Nun alles mit ENTER bestätigen, fertig.

Probiert es mal aus, es ist echt easy.

Übrigens habe ich hier diese ganzen Textauszeichnungen mit dieser Tastenkombination geschrieben. Ohne diese hätte das Ganze sicher die doppelte Zeit in Anspruch genommen und wäre viel fehleranfälliger gewesen.

Auch die benutzerdefinierten Tastenkombinationen werden bei VSCode in einer JSON-Datei gespeichert. Hiermit kann man seine eigenen Tastenkombinationen komfortabel sichern. Diese Datei könnt ihr direkt in VSCode öffnen, indem Ihr die Tastenkombi STRG + P drückt und in das geöffnete Suchfeld "keybindings.json" eingebt.

Alternativ könnt ihr hier meine keybindings.json herunterladen und in das Verzeichnis %APPDATA%\Code\User speichern. Sollte in diesem Verzeichnis bereits eine solche Datei existieren, dann öffnet sie in VSCode, setzt ein Komma hinter die bestehende geschweifte Klammer und fügt den folgenden Code (ohne die eckigen Klammern) dort ein:

            
[
  {
    "key": "ctrl+alt+t",
    "command": "editor.emmet.action.wrapWithAbbreviation"
  }
]