⬆

Visual Studio Code & Brackets Tipps

Brackets

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 Vorschau

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.

Deutsche Sprache

Installiere das German Language Pack for Visual Studio Code und starte das Programm neu.

Siehe auch Sprache ändern

weitere Infos

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

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 ein ohne spitze Klammern
dann Enter drücken.
Alternativ kann man auch den Tag mit Klammern eingeben. 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
Sprache ändern
Strg Shift p
Dann >language eingeben, configure display language wählen, Sprache auswählen

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.

 

 

Brackets

Ein moderner Open Source HTML & CSS Editor von Adobe.

Offizielle Brackets Seite. / Shortcuts

Nachdem man Brackets installiert hat öffnet sich eine Startseite mit Erklärungen.

Live-Vorschau

Oben Rechts befindet sich ein Icon, um die Seite in Chrome Live anzuzeigen.

Dateien / Ordner öffnen

Beim Start ist eine Hilfeseite geöffnet. Diese wird namentlich am linken Rand aufgeführt. Klicke mit rechter Maustaste auf die Seite und wähle, Ordner öffnen. Alle Dateien dieses Ordners sind ein Projekt in Brackets.

Im Kontextmenü der Ordneransicht, kann man die Ansicht aktualisieren.

Emmet

Emmet ist in Brackets integriert
Emmet wird mit Tabulator Taste ausgeführt

HTML Grundgerüst

Neues HTML Document erstellen und abspeichern
Mittels integriertem Emmet Plugin kann man das Grundgerüst einer Seite erstellen.
Schreibe ein ! Ausrufezeichen und drücke dann die Tabulatortaste

Emmet HTML-Grundgerüst verändern

Wenn man sich das HTML Grundgerüst welches durch Aufruf von ! + Tab durch Emmet ausgeführt wird, verändern möchte, kann man die Datei snippets.json abändern. Sie liegt im Ordner.

C:\Users\username\AppData\Roaming\Brackets\extensions\user\brackets-emmet\node_modules\emmet\lib

Hier eine veränderte Datei snippets.json zum download

Shortcuts

Shortcuts

siehe Brackets Cheat Sheat

Code Formatieren

Strg Alt B

Beautify muss installiert sein

Kommentar HTML und CSS

Strg Shift # Stelle markieren um sie auszukommentieren

Multiple Cursor über mehrere Reihen

Alt Shift Up oder Alt Shift Down Cursor über mehrere Reihen hinzufügen.

Um in mehreren Zeilen das gleiche zu schreiben.

Alternative: Klicke mit dem Cursor an eine bestimmte Stelle. Halte die Alt Taste gedrückt klicke nochmal an die Stelle und ziehe die Maus nach unten. Lasse die Alt Taste los. Schreibe etwas. Es müsste in allen markierten Zeilen eingefügt werden.

Multiple Cursor mehrere Stellen

Strg Umschalt an mehrere Stellen klicken, in die man gleichzeitig schreiben will. Beachte, dass durch die Umschalt Taste auch Großschreibung aktiviert ist.

Nächsten Treffer zur Auswahl hinzufügen
 

Strg B Markiere eine Stelle, z.B.: den Namen eines HTML- Elements. Mit Strg B wird die nächste gleiche Stelle markiert, so dass man anschließend alles umbenennen oder löschen kann.

HTML Element um Text legen

Strg Shift A Elementnamen eingeben

Schrift vergrößern / verkleinern

Strg + vergrößern
Strg - verkleinern

CSS Regel verändern oder setzen

Strg-E gedrückt halten, HTML Element anklicken
Es öffnet sich ein Inline Editor, dort erstellt man eine Regel oder ändert eine vorhandene Regel.
Esc oder Strg E schließt das Fenster

Nächstes Element & voriges Element

Alt Shift Up & Alt Shift Down

Zeile auswählen

Strg L

Zeile darunter / darüber auswählen

Shift down / Shift up

Zeile verschieben

Strg Shift down / Strg Shift up

Plugins, die man haben muss (must have)

Oben rechts befindet sich ein Icon, um Erweiterungen / Plugins zu installieren.

Colors++

Nach der Installation Taste F11 . Es öffnet sich ein Fenster, in dem man einstellen, kann ob und wo Farbcodes in Brackets mit der Farbe hinterlegt werden sollen.

CSS Farbeigenschaft notieren, Doppelpunkt,
Farbnamen wählen
Kontextmenü Schnell bearbeiten
oder Strg E

Beautify

Automatische Codeeinrückung
Klicke auf den Zauberstab am rechten Ran
Strg Alt B

Evereyscrub

Zahlenwerte verändern mit den Pfeiltasten rauf und runter. Zahlenwert anklicken Strg Alt  Pfeiltaste vertikal

Brackets Color Palette

Liefert Farben aus einem Bild. Klicke im Dateimenü von Brackets auf ein Bild mit rechter Maustaste und wähle Color Palette. Erzeuge eine Farbeigenschaft in CSS und wähle die Farbe aus dem Bild, welches unten angezeigt wird.

Brackets Tree Icons

Stellt die Dateien und Ordner in einer hierachischen Baumstruktur mit Icons dar.