⬆

Visual Studio Code / VSC

Visual Studio Code Shortcuts

VSC als online Editor im Web https://vscode.dev
VSC download https://code.visualstudio.com/docs/editor/portable
VSC als portable Version unter Download auf Win zip x64 klicken und in einen Ordner entpacken.
In diesen Ordner erstelle einen Ordner namens "data". So hat man die Möglichkeit auch in der Portable Version Plugins zu installieren. Den Ordner data mit all seinen Inhalten kann man auch in eine andere protable Version kopieren.

Plugins

Plugin VSC

Links auf der vertikalen Leiste in VSC gibt es das Symbol für Plugins/ Erweiterungen. Dort werden alle installierten Plugins angezeigt. Außerdem kann man oben im Eingabefeld nach Plugins suchen und diese installieren.

Die wichtigsten Plugins:

Live Preview

Mit der Erweiterung Live Preview (von Microsoft) erscheint eine Lupe In der zweiten Zeile oben rechts Vorschau anzeigen. Es öffnet sich ein zweites Fensters. Um eine andere Seite anzeigen zu lassen, schließe das Fenster und klicke erneut auf die Lupe.

Im Hamburger Menü des Fenster kannst du Vorschau im Browser wählen. Dort kannst dann die Devolper tools mit STRG SHIFT J aufrufen.

Wähle unter Datei, Ordner öffnen und wähle den Ordner für dein Projekt aus. Wenn du Livepreview aktivierst, ist der Ordner dein Root Verzeichnis.

Five Server ein Liveserver für PHP

Fiveserver

Mit der Erweiterung Fiveserver nicht Liveserver kannst du auch php Seiten live im Browser betrachten. Siehe dazu dieses Video von Mario Man installiert den Fiveserver und deaktiviert den Liveserver. Nun kann man den Fiveserver unten rechts starten. Lege eine Datei im Ordner deines Projekts an: fiveserver.config.js In dieser Datei werden die Einstellungen vorgenommen. Hier ein Beispiel

        module.exports = {
        highlight: true,
        injectBody: true,
        navigate: true,
        open: "index.php",
        php: "C:\\wamp64\\bin\\php\\php8.0.13\\php.exe",
        };

Deutsche Sprache

  1. Installiere das German Language Pack for Visual Studio Code
  2. Strg Shift p
    Dann >language eingeben, configure display language wählen, Sprache auswählen
  3. Programm neu starten

 

weitere Infos

Explorer Ansicht übersichtlicher machen

Die Einrückungen in der Explorer Ansicht sind zu klein. Gehe folgendermaßen vor.

  1. Drücke Strg + , (Einstellungen).
  2. Suche nach: "Tree Indent"
  3. Erhöhe den Wert bei Workbench > Tree: Indent von standardmäßig 8 auf 16 oder 20
  4. Suche nach "Tree Render Guides" und stelle es auf always.

Code formatieren mit Prettier oder HTML Formatter

  1. Installiere das Plugin Prettier oder JS CSS HTML Formatter (das erste auf der Liste)
  2. Wähle Strg , um die Einstellungen aufzurufen
  3. Gebe in der Suchleiste ein: Format
  4. Auf Editor Default Formatter wähle Prettier oder JS CSS HTML Formatter
  5. Gebe in der Suchleiste ein: Format on Save und aktiviere das Kästchen

Ungewollte Einrückungen im pre-Element

Möchte man ungewollte Einrückungen im Pre Element verhindern, gehe folgendermaßen vor. 

"html.format.unformatted": "pre, code, textarea",
"html.format.contentUnformatted": "pre, code",
"editor.formatOnSave": true

Emmet

Emmet ist ein Plugin, welches HTML und CSS Code mit Shortcuts ermöglicht. Es ist in VSC vorinstalliert. Auf der emmet.io Seite werden die Abkürzungen erklärt. Man notiert eine Abkürzung beispielsweise in p für Paragraph und drückt dann die Tabulatortaste.

Mit dem ! Ausrufezeichen und Tabulatortaste wird das Grundgerüsst der HTML Seite eingefügt. Möchte man dieses Grundgerüst ändern, beispielsweise um lang="de" zu setzen, geht man folgendermaßen vor:

Vorhandene Elemente kann man mit dem Bleistiftsymbol bearbeiten.
Diese und weitere Infos als Youtube Video

Tag um Element legen mit Emmet

Wenn man das Plugin "Surround with Tag" installiert hat, kann man ein HTML Element um eine Stelle legen, siehe unten Tastenkombi.

Das kann man aber auch mit Emmet machen. Dazu muss man der Funktion von Emmet nur einer Tastenkombination zuweisen.

Gehe auf Datei, Einstellungen, Tastenkombinationen
Gebe ein emmet wrap. Es erscheint: Befehl: Emmet: Mit Abkürzung umschließen
Klicke auf das Plus-Zeichen und gebe eine Tastenkombination ein, beispielsweise Shift Alt W Drücke Enter. Wenn die Tastenkombi noch vorhanden war, kannst du nun eine Stelle der HTML Seite markieren, Strg Alt W drücken und im Eingabefeld ein Emmet Kürzel eingeben, beispielsweise a. Das a-Element wird um die markierte Stelle gelegt. Der Vorteil ist, dass hierbei auch die in Emment enthaltenen Attribute eingefügt werden, beispielsweise das href="" im a Element.

Zeilenumbruch

Gehe auf Anzeigen/ Zeilenumbruch um den Code automatisch am Ende des Fensters umbrechen zu lassen. Stelle diese Einstellung folgendermaßen dauerhaft ein:

Shortcuts

wichtige Infos und Keyboard Shortcuts
Visual Studio Code Shortcuts
meine Shortcut Seite zum Ausdrucken

Code Formatieren
mit Shift Alt F
Kommentar in HTML und CSS
Shift Alt A , Man kann auch Stellen auskommentieren, indem man sie vorher markiert
Multiple Cursor
Alt Taste verschiedene Stellen anklicken
Multiple Cursor über mehrere Reihen
Stelle anklicken dann Shift Alt dann Stelle nochmal anklicken den Cursor über mehrere Reihen nach unten ziehen. Man kann so auch einen Block einrahmen.
Multiple Cursor am Ende jeder ausgewählten Reihe
Markiere mehrere Zeilen und drücke:
Shift Alt i
Wenn du mehrere Zeilenblöcke auswählen willst, kannst du sie zuvor mit gedrückterAlt Taste markieren.
Multiple Cursor über mehrere Reihen
Strg Alt Down / Strg Alt Up
Multiple Cursor über gleiche Elemente
Strg Shift L Wenn man eine Stelle markiert, beispielsweise eine class="hallo" so ist im gesamten Dokument, wo diese Klasse aufgeführt wird, die Stelle leicht angegraut. Möchte man nun an all diesen Stellen etwas anderes einfügen, wählt man Strg Shift L und fügt den neuen Text ein.
Schrift vergrößern / verkleinern
Strg + vergrößern
Strg - verkleinern
HTML Element um Text legen
Installiere das  Plugin "Surround with Tag"
Markiere eine Stelle, um die ein HTML-Element gelegt werden soll.
Strg i
oben öffnet sich oben eine Eingabeleiste
Gebe dort nur den Namen des Elements ohne spitze Klammern ein oder notiere eine andere Emmet Schreibweise
dann Enter drücken.
Alternativ kann man auch den Tag mit Klammern eingeben. Wähle dann Strg Z
Autoamtischer Zeilenumbruch
Alt z oder Menü: View, Toggle Word Wrap
Intelli Sense / Codevorschläge
Strg Leertaste öffnet die Codevorschläge für Javascript / Typescript. Der Cursor sollte hinter dem Punkt nach dem Objektnamen liegen meinObjekt.
Rename
F2 Funktionsname, Variablenname wird überall umbenannt auch über mehrere Dateien hinweg
Zeile auswählen
Strg L
Zeile nach oben / unten verschieben
Alt Pfeiltaste (up / down) Zeile markieren und verschieben
Zeile nach oben / unten kopieren
Umschalttaste Alt Up / Umschalttaste Alt Down Zeile vorher markieren
Letzte Dateien Ansicht
Strg p

PHP konfigurieren

Wenn man VSC für PHP nutzt muss man die Pfad zum PHP Programm angeben. Es erfolgt eine Meldung die settings.json zu konfigurieren. Man findet den Pfad wenn man zuerst localhost im Browser aufruft und dort auf die php.info klickt. Wenn der Pfad dort nicht erscheint, kann man im Unterverzeichnis von XAMPP oder WAMP nachschauen, bei Wamp ist C:/wamp64/bin/php/php8.0.13/php.exe je nach PHP Version. Welche Version es ist sieht man in der PHP.info

Javascript

Debug / console.log()

  1. Öffne einen Ordner über Datei / Ordner öffnen
  2. Wähle auf der linken Seite das Icon mit dem Käfer: "Ausführen und Debuggen"
  3. Klicke auf den Button "Ausführen und Debuggen" oder wähle die Taste F5
  4. Wähle einen Browser aus beispielsweise "Chrome"
  5. Es öffnet sich ein Browserfenster
  6. Wähle oben im Menü Anzeigen / Debugging Console
  7. Es erscheint am unteren Rand das Fenster, in dem man console.log() Anweisungen sieht
  8. Im Prinzip wird diese Ansicht von dem geöffneten Browser geliefert.
  9. Ändere etwas im Script, Drücke Strg S wähle das geöffnete Browserfenster und Aktualisiere es.
  10. Die Änderungen sollten in der Debugging Console von VSC angezeigt werden.
  11. Um eine andere Seite zu verarbeiten, schließe das Browserfenster und starte eine neue Session siehe Punkt 3.

Programmieren mit Javascript

1. Die Blankseite der schnellste Weg

Wenn du im Browser einfach nur eine saubere Arbeitsfläche für JavaScript brauchst, tippe das hier in die Adresszeile:

about:blank

Dann öffnest du mit F12 die Konsole.

Jetzt hast du eine komplett leere Umgebung ohne störende Fehlermeldungen von anderen Webseiten und kannst dort deine Sets, Arrays und Funktionen testen.

Falls du im Chrome-Browser bleibst: Du kannst die Konsole mit der Taste L (bei gedrückter Strg-Taste) jederzeit blitzblank putzen, wenn es zu unübersichtlich wird.

2. Die Konsole in VS Code

Ja, in VS Code hast du sogar mehrere Möglichkeiten, JavaScript-Code direkt "live" zu sehen:

A. Das integrierte Terminal

Das ist der Klassiker. Wenn du Node.js auf deinem Rechner installiert hast:

  1. Öffne das Terminal in VS Code (Strg + ò oder über das Menü).

  2. Tippe einfach node ein und drücke Enter.

  3. Jetzt bist du im REPL-Modus (Read-Eval-Print Loop). Du kannst dort new Set("Test") eingeben und bekommst sofort das Ergebnis.

B. Die Debug-Konsole

Wenn du ein Skript über VS Code ausführst (F5), gibt es unten den Reiter "Debug-Konsole". Dort kannst du, während dein Programm an einem Haltepunkt (Breakpoint) stoppt, Variablen abfragen und Befehle testen, genau wie im Browser.

C. Die Erweiterung "Quokka.js" (Mein Tipp für dich!)

Wenn du gerne experimentierst, solltest du dir die Extension Quokka.js ansehen.

Quokka funktioniert nur in js und ts Dateien.

siehe auch das Quokka Video

3. Der "Geheimtipp" in Chrome: Snippets

Wenn du oft die gleichen Test-Scripte in der Chrome-Konsole nutzt, willst du sie nicht jedes Mal neu tippen.

  1. Öffne F12 -> Reiter Sources (Quellen).

  2. Links findest du einen kleinen Pfeil >> und dort den Punkt Snippets.

  3. Dort kannst du ganze Dateien anlegen, speichern und mit Strg + Enter jederzeit im Kontext der aktuellen Webseite ausführen.