Visual Studio Code - Tipps

Visual Studio Code ist ein grundlegendes Programmiertool zum Bearbeiten des Quellcodes von Computerprogrammen. Es wurde von Microsoft für die Arbeit in Windows-, Linux- und Mac-Betriebssystemen entwickelt. Diese Anwendung ist kostenlos und Open Source für den privaten und kommerziellen Gebrauch.

Mit den Tipps können Sie direkt einsteigen und lernen, wie Sie mit Visual Studio Code produktiv sein können.

[Bildschirmfoto / Grafik]
 Visual Studio Code - Tipps

Befehlspalette

Mit der Befehlspalette können Sie auf verschiedene verfügbare Befehle zugreifen, indem Sie einfach ein Schlüsselwort eingeben, anstatt durch Menüs zu navigieren.

Die Befehlspalette kann mit der Tastenkombination Strg + Shift + P geöffnet werden. Sie können dann relevante Schlüsselwörter eingeben, um eine Liste der Befehle im Dropdown-Fenster anzuzeigen.

Erweiterungen

Mit den Erweiterungen für Visual Studio Code programmieren Sie schneller und effizienter.

Erweiterungen
Auto Rename Tag ⭐⭐
Automatische Umbenennung eines gepaarten HTML/XML-Tags.
Better Comments ⭐⭐
Verbessern Sie Ihre Codekommentare, indem Sie mit Warnungen, Informationen, TODOs und mehr kommentieren!
Bookmarks ⭐⭐⭐
Es hilft Ihnen, in Ihrem Code zu navigieren und sich einfach und schnell zwischen wichtigen Positionen zu bewegen. Sie müssen nicht mehr nach Code suchen. Es unterstützt auch eine Reihe von Auswahlbefehlen, mit denen Sie mit Lesezeichen versehene Zeilen und Bereiche zwischen mit Lesezeichen versehenen Zeilen auswählen können.
Clipboard Manager ⭐⭐
Bewahren Sie einen Verlauf der kopierten und ausgeschnittenen Elemente auf und fügen Sie sie erneut ein, ohne die Tastenkombinationen STRG+C und STRG+V zu überschreiben.
Code Spell Checker ⭐⭐⭐
Rechtschreibprüfung für VS Code. Deutsche Wörterbuch-Erweiterung
Color Info ⭐⭐⭐
Visual Studio Code-Erweiterung, die CSS-Farben mit schnellen Informationen bereitstellt.
CSS Peek ⭐⭐
Erlauben Sie das Anzeigen von CSS-ID- und Klassenzeichenfolgen als Definitionen von HTML-Dateien in dem entsprechenden CSS-Abschnitt.
German Language Pack ⭐⭐
Deutsches Sprachpaket für Visual Studio Code.
HTML Snippets ⭐⭐⭐
Diese Erweiterung fügt VS Code umfangreiche Sprachunterstützung für das HTML-Markup hinzu.
Incrementor ⭐⭐⭐
Erweiterte Inkrementierungs- / Dekrementaktionen für Zahlen, Enumeratoren oder einfach alles andere!
net search ⭐⭐
Sucht nach markiertem Text zum Beispiel bei Mozilla, Google oder Bing.
Path Intellisense ⭐⭐⭐
Visual Studio Code-Plugin, das Dateinamen automatisch vervollständigt.
Prettier - Code formatter ⭐⭐⭐
Prettier ist ein Code-Formatierer. Es erzwingt einen konsistenten Stil, indem es Ihren Code analysiert und mit eigenen Regeln neu darstellt, die die maximale Zeilenlänge berücksichtigt und den Code bei Bedarf umschließt.
Snippet ⭐⭐⭐
Erweiterung zum Erstellen von Code und Verwalten von benutzerdefinierten Codeausschnitten.
Undo/Redo Buttons
Fügt der Editor-Symbolleiste Schaltflächen zum Rückgängigmachen und Wiederholen hinzu.

Emmet

Emmet ist ein in VS Code integriertes Plugin, mit dem Sie HTML und CSS effizienter schreiben können, indem es eine Reihe cleverer Verknüpfungen bereitstellt.

Emmet ist ein Plugin, das Zeit spart und die Entwicklerproduktivität verbessert, indem es Ihnen hilft, weniger zu tippen, aber mehr Code zu generieren.

Emmet ermöglicht es Ihnen, die entsprechenden Tags aus dem abgekürzten Code zu erhalten, den Sie eingeben. Ein Beispiel sehen Sie im folgenden Screenshot. Sehen Sie sich diese Liste aller vorab unterstützten Tag-Wraps in Emmet an. Emmet ist in Visual Studio Code bereits integriert.

Emmet

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 .

Arbeitsbereich

Mit diesem Tipp können Sie in den Chromium-Browsern (Microsoft Edge, Google Chrome, ...) den Arbeitsbereich festlegen. Die Frage ist, warum sollte man das überhaupt machen?

Damit kann man, wenn CSS oder JavaScript in Visual Studio Code bearbeitet wird, diese Änderung direkt (sogleich) im Browser anzeigen.

Arbeitsbereich im Browser festlegen

Ö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
Arbeitsbereich in der Browserkonsole (DevTools) festlegen

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.

Tastenkombinationen

Sie können auf eine Reihe von Befehlen und Fenster in Visual Studio Code zugreifen, indem Sie die entsprechende Tastenkombination auswählen. Tastenkombinationen, die es überflüssig machen, Funktionen im Menü suchen zu müssen.

Tastenkombinationen

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

Einstellungen

Einstellungen in der Datei: settings.json

Einstellungen

• 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"
},


Visual Studio Code ist derzeit meine erste Wahl wenn es um Editoren geht. Open Source, viele gut umgesetzte Funktionen, einfach installierbare Erweiterungen und anpassbare UI.