🕺 🈶 🧕🏼 Visual Studio Code Code Editor. Die ausführlichste Anleitung zum Einrichten und Installieren von Plugins für Anfänger 🧗 😇 😦

Kostenlos, leistungsstark, sehr beliebt, mit einer Reihe von Add-Ons, was soll ich sagen, Facebook selbst hat es als Haupteditor ausgewählt!

Heute konzentrieren wir uns auf den Visual Studio Code Code Editor oder nur auf VS Code. Wir werden es installieren, konfigurieren und Plugins verwenden, die unsere Arbeit erheblich vereinfachen.

Wenn der Sublime Text 3- Code-Editor interessanter ist, finden Sie den Artikel hier https://habr.com/en/post/458206/

Inhalt:

Löschen

Wenn Sie VS Code bereits verwenden, sich aber dazu entschlossen haben, von vorne zu beginnen, werde ich zeigen, wie Sie das Programm einschließlich aller Einstellungen und Plugins vollständig entfernen können. Neben der Tatsache, dass das Programm aus der Windows-

Systemsteuerung entfernt werden muss , müssen Sie auch zu Laufwerk C> Benutzer> Ihr Benutzername gehen und den Ordner .vscode hier löschen. AppData sollte in der Pfadleiste hinzugefügt werden , dann zum Ordner Roaming gehen und hier müssen Sie den Codeordner löschen.

Installation

Ok, jetzt können wir das Programm installieren. Gehen Sie zur Website code.visualstudio.com , Download-Bereich. Es gibt eine Version für Mac, Linux. Ich interessiere mich für Windows. Klicken Sie auf und laden Sie es auf Ihren PC herunter. Die Website des Programms ist übrigens sehr nützlich, daher rate ich Ihnen, sie zu studieren.

Das Programm wird heruntergeladen, führen Sie das Installationsprogramm aus und befolgen Sie die Anweisungen: Akzeptieren Sie, fügen Sie alle Häkchen hinzu und warten Sie, bis das Programm auf unserem PC installiert ist.

Laufen auf einer schwachen Maschine

Wenn das Programm installiert ist, können wir es starten. Es wird jedoch nicht auf jedem Computer gestartet. Tatsache ist, dass das Programm sehr ressourcenintensiv ist. Daher können Sie auf einem schwachen Computer das folgende Ergebnis erhalten: Anstelle der Programmoberfläche wird ein schwarzer Bildschirm angezeigt, und der Prozessor schwitzt zu 100%. Es gibt jedoch einen Ausweg: Sie müssen das Kontextmenü der Programmverknüpfung öffnen und das folgende Flag im Pfad zur Datei hinzufügen : --disable-gpu

Großartig, jetzt startet das Programm sogar auf dem Taschenrechner.

Spracheinstellungen

Das Programm wird gestartet und wir können beginnen, es kennenzulernen. Und um das Kennenlernen zu erleichtern, werde ich die russische Sprache installieren. Dazu klicke ich auf das Erweiterungssymbol. Im Suchfeld beginne ich mit dem Schreiben von Russisch, bis ich das Paket Russian Language Pack für Visual Studio Code sehe.

Ich klicke auf die Schaltfläche Installieren. Als nächstes werden Sie vom Programm aufgefordert, einen Neustart durchzuführen. Großartig, jetzt wird es viel klarer. Wenn Sie jedoch Englisch sprechen, ist ein Wechsel zu Russisch nicht erforderlich.

Begrüßungsbildschirm

Ich werde die Seitenwand vorerst ausblenden, wir werden mehr als einmal darauf zurückkommen.
Das erste, was wir sehen, ist der Begrüßungsbildschirm. Hier gibt es ein Element, mit dem wir alle Einstellungen importieren können, Schlüssel von bereits installierten Editoren, zum Beispiel Vim, Sublime, Atom und andere.

Dies wird den Übergang von einem Editor zu einem anderen erheblich beschleunigen und erleichtern. Aber heute werden wir alles von Grund auf neu machen. Darüber hinaus gibt es weitere nützliche Links - Allgemeine Informationen zur Benutzeroberfläche sowie eine Liste von Tastaturkürzeln in sehr praktischer Form und vieles mehr.

Ich empfehle Ihnen, diesen Bildschirm zu studieren. Wenn er nicht mehr jedes Mal benötigt wird, wenn Sie das Programm starten, müssen Sie dieses Kontrollkästchen deaktivieren. Später können Sie es jederzeit über das Menü Hilfe> Begrüßung aufrufen.

Schnittstelle aus der Box

Zu faul zum Lesen? Hier ist die Videoversion.

Alle Vorbereitungen wurden getroffen und jetzt können wir uns mit der Programmoberfläche vertraut machen und gleichzeitig sehen, was VS Code sofort tun kann.

Wir rufen das Fenster mit den allgemeinen Schnittstelleninformationen auf und sehen die Hauptelemente des Programms.

Oben sehen wir das Menü. Als nächstes folgt die Ausführungsschnittstelle eines Befehls, den wir immer aufrufen können. Allgemeiner Bereich des Herausgebers. Linke Aktionsleiste. Unten ist die Statusleiste, und wir werden damit beginnen. Tipps sagen uns, dass es eine Ansicht von Fehlern und Warnungen gibt. Sie können das eingebaute Terminal aufrufen.

Lassen Sie uns alles genauer betrachten.

Statusleiste

Probleme

Auf der linken Seite zeigen die Zahlen neben den Symbolen die Anzahl der Fehler und Warnungen an, die während der Codeausführung aufgetreten sind.

Um das Bedienfeld zu öffnen, müssen Sie auf diese Symbole klicken oder Strg + Umschalt + M gedrückt halten. Hier wird der Text der Fehlermeldungen angezeigt.

Im Bedienfeld können Sie diese Meldungen filtern, minimieren, das gesamte Bedienfeld auf Vollbild erweitern oder schließen.

Debug-Konsole

Zusätzlich zu der Registerkarte für die Ausgabe von Problemen in diesem Bereich haben wir noch eine Debugging-Konsole, auf die wir zurückkommen werden.

Fazit

Das Ausgabeprotokoll der Arbeit aller Programme und Systeme des Editors. Hier können Sie dieses Protokoll auch filtern, löschen, den Bildlauf von Nachrichten blockieren, das Bedienfeld erweitern oder schließen.

Terminal

Die letzte Registerkarte in diesem Bereich ist das integrierte Terminal. Sie können es aufrufen, indem Sie Strg + `gedrückt halten .

In der Systemsteuerung können Sie auch Terminals hinzufügen, das Fenster in mehrere Teile aufteilen, das Terminalfenster löschen, zwischen den Terminalfenstern wechseln und auch die Standard-Shell auswählen.

Zum Beispiel habe ich GitBash installiert. Wenn Sie es auswählen und ein neues Terminalfenster hinzufügen, wird diese Oberfläche für mich geöffnet. Traditionell können Sie hier das Bedienfeld auf Vollbild erweitern und schließen.

Benachrichtigungen

Rechts in der Statusleiste sehen wir Benachrichtigungen, jetzt sind sie nicht da. Es ist auch möglich, einen Tweet mit Feedback zum Programm zu senden.

Außerdem werden viele andere Elemente in der Statusleiste angezeigt.

Kontextmenü

Wir können auch das Kontextmenü aufrufen und aus dieser Zeile entfernen, was wir nicht verwenden. Zum Beispiel ein Review-Tweet, um Platz zu schaffen.

Auch im selben Kontextmenü können wir diese Zeile komplett ausblenden.

Aktionsleiste

Standardmäßig befindet sich im linken Teil des Editors ein Aktionsfeld mit 6 Elementen:

Explorer ist ein integrierter Dateimanager.
Suche;
Versionskontroll-Managementsystem;
Starten und Debuggen von Anwendungen;
Das Installationsprogramm für verschiedene Add-Ons ist unser Editor.
Unten befindet sich ein Zahnrad, auf das wir klicken, um ein Menü mit den wichtigsten Programmeinstellungen anzuzeigen.

Dirigent

Beginnen wir mit dem Explorer. Er kann durch Klicken auf das Symbol oder durch Gedrückthalten von Strg + Umschalt + E geöffnet werden .

Wenn Sie mit der Maus über das Symbol fahren, werden Sie vom Editor mit einer Tastenkombination aufgefordert.

Hier sehen wir 3 Hauptregisterkarten:

Offene Editoren - Hier finden Sie eine Liste der Dateien, die zur Bearbeitung geöffnet sind.
Registerkarte mit Ordnern, Projekten. Jetzt haben wir keine offenen Ordner.
Die Struktur - jetzt gibt es hier nichts, wir werden später darauf zurückkommen.

Das Begrüßungsfenster können wir bereits schließen. Wenn alle Fenster geschlossen sind, zeigt der Editor einen Stub an, in dem die Tastenkombinationen für die Hauptaktionen angezeigt werden: Fügen Sie

unserem zukünftigen Projekt im Editor einen leeren Ordner hinzu. Klicken Sie dazu auf Ordner öffnen oder ziehen Sie ihn einfach in dieses Feld.

Jetzt haben wir einen leeren Ordner hello_vscode sowie einige Steuerelemente:

Erstelle Datei;
Erstellen Sie einen Ordner.
Aktualisieren Sie alle Dateien und Ordner.
Reduzieren Sie alles im Explorer.

Lassen Sie uns einige Dateien erstellen, die wir für das Projekt benötigen. Klicken Sie auf Datei erstellen, schreiben Sie beispielsweise Index.html. Als nächstes können wir einen CSS-Ordner erstellen und darin eine style.css-Datei erstellen. Es ist sehr praktisch, diesen integrierten Dateimanager zu verwenden.

Sie können auch das Kontextmenü verwenden, um Dateien und Ordner zu erstellen. Darüber hinaus gibt es auch interessante Funktionen, z. B. den Ordner im Windows Explorer anzeigen.

Jetzt können wir zu Index.html gehen und dort etwas Interessantes schreiben, zum Beispiel „Hallo VC-Code“.

Satzstellung markieren

Ich möchte nur ein paar Worte zur Syntaxhervorhebung sagen - dies ist die Fähigkeit des Editors, den Code zu erkennen und seine einzelnen Elemente einzufärben. Als wir die Datei öffneten und damit begannen, wurde neben anderen neuen Elementen unten in der Statusleiste ein HTML-Element angezeigt. Dies bedeutet, dass der Editor die Sprache erkannt und entsprechend hervorgehoben hat. Wenn Sie auf dieses Element klicken, wird eine große Liste mit Highlights für verschiedene Sprachen angezeigt.

Diese Liste enthält möglicherweise nicht alles. Zum Beispiel, wenn wir mit einer .kit-Datei arbeiten. Lassen Sie uns index.kit erstellen und unseren Code dort kopieren. Wir werden sehen, dass es keine Hervorhebung gibt, und anstelle des HTML-Elements sehen wir den Text Klartext. Was ist in diesem Fall zu tun? Wir müssen auf einfachen Text klicken und hier haben wir die Wahl - anstelle der automatischen Erkennung können wir versuchen, nach Add-Ons für die Syntaxhervorhebung speziell für .kit-Dateien zu suchen.

Wenn dies nicht funktioniert, können wir die Zuordnungen konfigurieren. Klicken Sie hier und wählen Sie eine Zuordnungssprache für .kit-Dateien aus. In meinem Fall ist es HTML.

Jetzt erkennt das Programm alle .kit-Dateien als HTML-Datei und hebt sie entsprechend hervor. Kehren wir zu unserer echten HTML-Datei zurück. Wir speichern alles, was wir hier bearbeitet haben. Das Ergebnis der Arbeit können Sie sehen, indem Sie diese Datei im Browser öffnen. Auf der Registerkarte Struktur sehen wir, dass eine solche Baumstruktur unseres Dokuments angezeigt wurde.

Eine weitere nützliche Funktion des Explorers ist das Kontextmenü, in dem wir jede Registerkarte ein- oder ausblenden können. Zum Beispiel werde ich die Struktur entfernen und die geöffneten Editoren entfernen.

Daher habe ich nur einen Projektordner.

Suche

Suche ( Strg + Umschalt + F ) - das, was Sie brauchen. Wir schreiben das Wort Hallo, das wir in unserer HTML-Datei angegeben haben. Die Suche fand es sofort, hervorgehoben, zeigte in welcher Datei. Sie können dieses Wort sofort durch ein anderes ersetzen.

Es ist für uns bequem, all dies zu zeigen, indem wir hier auf das Symbol klicken, durch das das Wort ersetzt wird.

Versionskontroll-Management-System

Öffnen Sie die Registerkarte, indem Sie auf das Symbol klicken oder Strg + Umschalt + G gedrückt halten . Für diejenigen, die bereits mit Versionskontrollsystemen wie Git vertraut sind, wird er diese Funktion zu schätzen wissen. Etwas später werde ich zeigen, wie ich mein lokales Projekt mit dem Repository auf GitHub verknüpfe.

Anwendungs-Debugging

Das nächste Element in der Aktionsleiste ist das Debuggen der Anwendung. Mit diesem Tool können wir unabhängig und mithilfe von Plug-Ins von Drittanbietern die Ausführung eines bestimmten Programmcodes analysieren.

Zum Beispiel haben wir eine Art Javascript-Code, und um mit dem Debuggen zu beginnen, können wir hier auf die Schaltfläche klicken oder F5 drücken.

Das Debugging-Ergebnis wird im unteren Bereich angezeigt. Sie können auch die sogenannten Code-Haltepunkte festlegen und zwischen diesen wechseln, was sehr praktisch ist.

Erweiterungen

Hier haben wir ein ganzes Lager an Erweiterungen und Plugins für unseren Editor. Wir haben diese Registerkarte bereits verwendet, um das Sprachpaket zu installieren. Wir klicken auf das Symbol oder halten die Tastenkombination Strg + Umschalt + X gedrückt. Wir sehen ein Suchfeld für Erweiterungen und drei zusätzliche Registerkarten:

Aktiviert - Alle installierten Erweiterungen werden angezeigt.
Empfohlen
Erweiterungen, die installiert, aber deaktiviert sind.

Auf der Registerkarte mit unseren installierten Erweiterungen haben wir schnellen Zugriff darauf. Wir können einige Informationen und Hotkeys anzeigen, lesen und alle Details zu dieser Erweiterung herausfinden. Sie können es auch hier löschen, indem Sie auf die Schaltfläche Löschen klicken. Wir werden zu den Erweiterungen zurückkehren und die besten und nützlichsten davon installieren.

die Einstellungen

Im Aktionsbereich haben wir noch ein weiteres Element - Zahnrad - das Haupteinstellungsmenü. Hier können wir eine Palette von Befehlen aufrufen, indem wir hier klicken oder Strg + Umschalt + P drücken . Es öffnet sich ein Block, in dem wir alle Editorbefehle oder installierten Plugins finden und ausführen können.

Weitere Tastaturkürzel. Hier können wir unsere Tastaturkürzel an Befehle anpassen oder auf vorhandene ändern. Wir werden zu ihnen zurückkehren. Benutzerdefinierte Codefragmente, sogenannte Snippets, sind kleine Abkürzungen, die das benötigte Codefragment verursachen. Heute werden wir lernen, wie man sie konfiguriert. Hier können Sie das Farbthema des Programms, Symbole für Dateien und vieles mehr anpassen.

Wenn Sie mit der Aktionsleiste fertig sind, können Sie die letzte geöffnete Registerkarte mit Strg + B schnell aufrufen. Wenn Sie das Kontextmenü ausblenden, können Sie auch ein unnötiges Element ausblenden. Zum Beispiel werde ich Start und Debug ausblenden. Im selben Kontextmenü können Sie die gesamte Aktionsleiste ausblenden.

Editorbereich

Zu faul zum Lesen? Hier ist die Videoversion.

Wir sehen Registerkarten mit geöffneten Dateien. Sie können gezogen und geschlossen werden. Wenn die Datei nicht gespeichert wird, wird an der Stelle des Kreuzes hier ein großer fetter Punkt angezeigt. Neben dem oberen Rand befindet sich das Symbol für das geteilte Fenster. Es ist eine aktive Datei geöffnet, klicken Sie auf das Symbol und sie wird seitlich dupliziert.

Es gibt ein zusätzliches Menü zum Verwalten aller Dateien.

Unten sehen wir die Navigationsleiste - Breadcrumbs, in der wir bequem durch die Struktur des Dokuments sowie zwischen anderen Dateien navigieren können.

Der allgemeine Bereich des Codes - wir sehen den Code der geöffneten Datei selbst, und rechts befindet sich eine Minikarte, mit der Sie bequem durch eine lange Datei navigieren können. Im Codebereich auf der linken Seite befindet sich ein kleiner Bereich, in dem Haltepunkte für das Debuggen des Codes festgelegt werden können. Es gibt eine Zeilennummerierung.

Als nächstes sehen wir die Pfeile, die erscheinen, wenn Sie den Mauszeiger bewegen. Mit ihrer Hilfe können Sie den gesamten Codeblock reduzieren. In diesem Editor arbeitet diese Funktion mit dem Speicher. Ich kann die Datei schließen, sogar das gesamte Programm schließen, und wenn ich es erneut öffne, bleibt der zuvor minimierte Block minimiert.

Was können wir hier konfigurieren?

Wie ich bereits gezeigt habe, kann das Editorfenster in mehrere Teile unterteilt werden. Dies ist praktisch, wenn Sie mit verschiedenen Dateien arbeiten. Um verschiedene Optionen anzuzeigen, müssen Sie zu Ansicht> Editorlayout gehen . Hier gibt es eine Reihe von Optionen, zum Beispiel zwei Zeilen, und wir können eine Datei hierher verschieben und so arbeiten. Es gibt auch eine 2x2-Rasteroption. Das heißt, Sie können gleichzeitig mit 4 Dateien arbeiten.

Sie können die gewünschte Position von Dateien auch schnell festlegen, indem Sie sie einfach ziehen und ablegen. Ich habe mir sofort das richtige Layout ausgedacht. Es ist auch möglich, das Erscheinungsbild des gesamten Editorbereichs anzupassen. Öffnen Sie Menü> Ansicht> Darstellung .

Unten finden Sie die Möglichkeit, den Maßstab des gesamten Programms anzupassen. Nicht mit Schriftgrößen verwechseln. Es ist bequem, Tastaturkürzel zu verwenden. Um zum Beispiel die Elemente zu erhöhen, drücke ich Strg + , um - Strg- zu reduzieren , um - Strg + 0 zurückzusetzen .

Sie können die Aktionsleiste von links nach rechts verschieben und sie befindet sich dann auf der anderen Seite. Sie können die Position des Bedienfelds in unserer Statusleiste angeben. Wenn Sie auf klicken, sehen Sie, dass sich das Bedienfeld nicht mehr wie zuvor von unten, sondern von der Seite öffnet. Das heißt, es ist möglich, fast alles zu konfigurieren.

Auch in diesem Block können Sie verschiedene Elemente ein- oder ausblenden. Ich habe vorhin gesagt, dass wir die gesamte Benachrichtigungszeile und die Aktionsleiste vollständig ausblenden können. In diesem Block können wir all dies an den Ort zurückgeben.

Bildschirmmodi

Oben befindet sich ein Vollbildmodus, wenn Sie F11 drücken . Das Hauptmenü und die Schaltflächen zum Verwalten des Programmfensters werden ausgeblendet.

Mittlere Ausrichtung des Layouts. Der Codebereich ist zentriert, Sie können die Breite anpassen. Dies dient dazu, sich besser auf den Code zu konzentrieren.

Es gibt einen wunderbaren Zen-Modus. Es verbirgt alle Elemente, auch die Registerkarten von Dateien. Wir konzentrieren uns nur auf eine einzige Datei, auf einen Code. Wir lösen eine schwierige Aufgabe, die maximale Konzentration erfordert.

Um es zu beenden, drücken Sie Escape .

Textumbruch

Außerdem können wir im Menü Ansicht den Textumbruch aktivieren oder deaktivieren. Halten Sie dazu Alt + Z gedrückt . Was bedeutet das? Zum Beispiel haben wir einen sehr langen Text, der nicht in den Codebereich passt, und horizontales Scrollen wird angezeigt. Wenn dies unpraktisch erscheint, können Sie Alt + Z drücken . Der gesamte Text wird so umbrochen, dass er in den Codebereich passt.

Es ist möglich, eine Minikarte, Steuerelemente, dh Brotkrumen, auszublenden oder anzuzeigen. Wenn es unnötig erscheint. Hier können Sie nicht druckbare Leerzeichen und druckbare Zeichen anzeigen und Steuerzeichen zeichnen, die aus der Quelle in den Text kopiert werden können.

Farbschema

Sie können eines der installierten Designs auswählen, indem Sie zum Thema Office-Punkt Farbe gehen. Wir sehen die Liste und mit den Pfeilen auf der Tastatur können wir zwischen den Themen wechseln und das richtige Thema für uns auswählen. Es gibt sowohl dunkle als auch helle Optionen.

Wenn keines dieser Themen angemessen ist, können wir unser eigenes festlegen. Dazu kehre ich zur Registerkarte Erweiterungen zurück und schreibe im Suchfeld den Namen meines Themas - SpaceOceanKit. Ich finde, klicken Sie auf Installieren. Als nächstes habe ich die Wahl, welches Thema ich wählen möchte, und ich wähle es aus.

Jetzt habe ich den gesamten Editor, einschließlich des Codes, es wird anders aussehen. Ich stelle mein Thema ein, du kannst jedes andere installieren.

Die Kombination von Farben ist sehr wichtig für die langfristige Arbeit mit dem Code. Dies wirkt sich auf die Wahrnehmung, Müdigkeit und Gesundheit Ihrer Augen aus. Wählen Sie also sorgfältig ein Thema für sich aus und vergessen Sie nicht, Pausen einzulegen.

Symbole

Wir können auch das Erscheinungsbild der Symbole für Dateien in unserem Explorer ändern. Gehen Sie dazu zu Management> Dateisymbolthema . Hier können Sie die Symbole vollständig deaktivieren oder aus der Liste auswählen.

Installieren Sie auch zusätzliche Icon Packs. Zum Beispiel Matherial Icon Theme.

Parameter

Darüber hinaus können Sie den Komfort der Arbeit mit dem Code und mit dem gesamten Editor in den Programmeinstellungen anpassen. Gehen Sie dazu zu Management> Optionen oder halten Sie Strg +

gedrückt. Parameter können sowohl global als auch für ein bestimmtes Projekt konfiguriert werden. Hier gibt es viele Einstellungen. Wir werden die wichtigsten durchgehen.

Automatisch speichern

Die erste nützliche Option ist das automatische Speichern von Dateien. Für Anfänger eine sehr coole Option. Anfänger kommen oft mit dem Problem auf mich zu: "Warum funktioniert mein Job nicht für mich?" Ich schaue, und die Datei wird dort nicht gespeichert.

Um dies zu verhindern, können Sie hier den Wert in einen von drei Werten ändern:

afterDelay - Die Datei wird nach einer gewissen Verzögerung gespeichert, die hier unten direkt konfiguriert werden kann. Wenn Sie diese Option beim Bearbeiten einer Datei auswählen, wird sie sofort gespeichert und ein fetter Punkt wird nicht einmal angezeigt.
onfocusChange - Die Datei wird gespeichert, wenn wir zu einer anderen Datei wechseln
onWindowChange - Wenn wir zu einem völlig anderen Programm wechseln, wird die Datei automatisch gespeichert.

Wählen Sie eine bequeme Option für sich und fahren Sie fort.

Codeanzeige

Die folgenden Optionen helfen Ihnen beim Einrichten einer komfortablen Codeanzeige. Dies ist die Schriftgröße und Schriftfamilie. Hier können Sie den Wert auswählen, der zu Ihnen passt.

Ich passe die Größe der Einkerbung beim Tabulieren an. Standardmäßig ist es 4. Für mich ist das Feld mit einem Tab zu breit, daher ändere ich es auf 3, sodass es mir kompakter erscheint. Sie geben den Wert an, der für Sie angenehm ist.

In einer Datei werden Leerzeichen für mich angezeigt, Punkte, wenn die Tabulatortaste gedrückt wird, in einer anderen - ein Tabulatorsymbol. Der Parameter Leerzeichen einfügen ist für diese Option verantwortlich. Standardmäßig ist ein Häkchen gesetzt, dh Leerzeichen werden angezeigt. Ich möchte, dass meine Registerkarten angezeigt werden, daher entferne ich das Häkchen.

Um eine vorhandene Datei mit Leerzeichen zu konvertieren, können Sie in die Statusleiste gehen, 4 Leerzeichen drücken und die Option Einzug in Tabulatorschritte konvertieren auswählen. So können wir bereits geöffnete Dateien konvertieren.

Mit der Option Einzug erkennen erkennen Sie, wie Sie das Einfügen von Zeichen für neue geöffnete Dateien bestimmen. Ich werde das Häkchen entfernen, da meine konfigurierten Einstellungen für alle Dateien funktionieren sollen.

Tooltips ausblenden

Zuvor habe ich gezeigt, dass beim Bewegen des Mauszeigers über ein Element im Code QuickInfos angezeigt werden. Dies kann häufig ärgerlich sein. Um Hinweise zu entfernen, gibt es einen Hover Enabled- Parameter . Das Häkchen kann entfernt werden und die Eingabeaufforderungen verschwinden.

Gleichzeitig verschwinden jedoch nützliche Funktionen.
Zum Beispiel haben wir im Stylesheet die Farbe Blau. Es wird sofort hervorgehoben. Wenn Hover

aktiviert ist, fällt beim Bewegen des Mauszeigers über eine Farbe Folgendes heraus: Wir können sie durchscheinend machen, RGBA-Werte festlegen oder sogar die Farbe in eine andere ändern. Wenn wir das Kontrollkästchen Hover aktiviert deaktivieren, verschwindet diese Funktion ebenfalls.

Der Parameter Color Decorators ist für die Ausgabe verantwortlich. Wenn er nicht benötigt wird, kann das Häkchen entfernt werden und es werden keine Farbquadrate angezeigt.

Mausrad-Zoom - Durch Aktivieren des Kontrollkästchens können Sie die Schriftgröße im Editor ändern, indem Sie die Strg- Taste gedrückt halten und das Mausrad drehen .

Aktive Gruppen schließen steuert, ob die Gruppe geschlossen wird, wenn die letzte Registerkarte geschlossen wird. Der Editor kann in Teile unterteilt werden. Standardmäßig wird beim Schließen der letzten Registerkarte die gesamte Registerkarte geschlossen. Manchmal ist dies unpraktisch, deshalb entferne ich dieses Häkchen. Und jetzt, wenn Sie den letzten Tab schließen, bleibt die Gruppe immer noch bei mir.

Formatierung

Die nächste Gruppe von Einstellungen ist für die Formatierung verantwortlich, die bereits im VC-Code-Editor integriert ist. Was ist Formatierung? Zum Beispiel schreiben wir eine Struktur, es gibt eine andere Struktur darin, aber aus irgendeinem Grund ist eine Registerkarte herausgezogen. Wenn Sie Umschalt + Alt + F gedrückt halten , wird alles so ausgerichtet, wie es sollte.

Zurück zu unseren Einstellungen. Hier können wir drei Häkchen setzen:

Beim Einfügen formatieren - Die Formatierung erfolgt automatisch, wenn Sie den Code einfügen.
Beim Speichern formatieren - Die Formatierung erfolgt beim Speichern der Datei.
Format On Type - Die Formatierung erfolgt automatisch, dh wir drucken und alles wird auf einmal formatiert.

Ich habe ein Häkchen gesetzt - Formatierung beim Speichern.
Wenn der Tab stoppt, achte ich nicht mehr darauf, dass zum Zeitpunkt des Speicherns der Datei alles an seinem Platz ist.

Sie können die Formatierung einer bestimmten Sprache genauer anpassen, indem Sie die Dokumentation auf der Website des Programms verstehen. Sie können auch zusätzliche Erweiterungen für eine bestimmte Sprache sowie für viele andere installieren.

Ich habe diesen Teil der Einstellungen gezeigt, die ich selbst verwende. Sie können sich selbst mit den restlichen Einstellungen vertraut machen. Der Einfachheit halber sind die Einstellungen hier in Kategorien unterteilt. Es gibt auch eine Kategorie von Einstellungen für bereits installierte oder nur installierte Erweiterungen.

Um schnell auf alles zuzugreifen, was wir konfiguriert haben, halten Sie Strg + Umschalt + P gedrückt und schreiben Sie in die SuchleisteEinstellungen, bis wir Einstellungen (JSON) sehen. Wir klicken und unsere Einstellungen werden vor uns angezeigt, Sie können sie sofort ändern.

In derselben Datei konfigurieren wir die neue Erweiterung.

Komfort bei der Arbeit mit dem Programm ist sehr wichtig, da dies die Leistung direkt beeinflusst. Als nächstes werden wir eine Reihe von Plugins installieren, die uns dabei wesentlich helfen werden.

Plugins

Zu faul zum Lesen? Hier ist die Videoversion.

Emmet

- Dieses Plugin ist bereits standardmäßig in den VS Code Editor integriert. In der Tat ist es heute schwer, sich ein Leben ohne Emmet vorzustellen. Super beschleunigt das Tippen. Zum Beispiel war es ihm zu verdanken, dass ich so schnell den Anfangscode für die HTML-Datei erstellt habe, indem ich nur ein Ausrufezeichen geschrieben und die Tabulatortaste gedrückt habe.

Hier ist ein weiteres Beispiel. Wir müssen dafür ein div mit der Blockklasse erstellen, ich schreibe .block und drücke Tab. Erledigt!

Oder zum Beispiel komplizierter - wir müssen eine Aufzählungsliste mit 10 Elementen erstellen. Schreiben Sie ul> li * 10 Tab. Erledigt!

Gleiches gilt für Style-Dateien. Für das Body-Tag möchte ich beispielsweise die Schriftgröße auf 20 Pixel festlegen. Dazu reicht es mir, fz20 zu schreiben . Durch Drücken der Tabulatortaste erhalte ich einen vorgefertigten Parameter.

Weitere Informationen zu den Funktionen von Emmet finden Sie auf der Website dieses Add-Ons.

Schnipsel

Es ist jedoch noch cooler, eigene Snippet-Verknüpfungen zu erstellen, um diesen anderen Code schnell aufzurufen.
Gehen Sie zu Verwaltung> Benutzerdefinierte Codefragmente . Es gibt eine Wahl:

Erstellen Sie Snippets für eine bestimmte Sprache.
Erstellen Sie Snippets für alle Sprachen, jedoch für ein bestimmtes Projekt.
Erstellen Sie globale Snippets für alle Sprachen und für alle Projekte.

Lassen Sie uns globale erstellen. Hier müssen Sie den Namen der Liste der Snippets eingeben.

Ich tippe meine, klicke und die Datei my.code-snippets wird geöffnet. Es gibt kommentierte Informationen sowie ein Beispiel. Ich werde ihn auskommentieren. Hier ist das Snippet für JavaScript.

. scope — . , . — , , . body . console.log description, .

: , . , css .

— “ ”, . , mm. body «margin: 0px, 0px, 0px 0px;», mm . Ctrl+S .

style.css mm Tab. , , .

, . js, log Tab.

, , $1 $2. $1. Tab, $2. .

, , , .

. Ctrl+Shift+X .

Live Sass Compiler

, SASS/SCSS. Install. , , , . , .

Watch Sass. .

scss , . style.scss.
:
```
body{
	font-size: 20 px;
	div{
		font-size: 10 px;
	}
}		
```
, Watch Sass scss\sass . style.css style.css.map.

. , , , scss, css.

. Shift+Ctrl+P, Settings (JSON). , .
```
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
	{
		"format": "expanded",
		"autoprefix": "last 5 versions",
		"extensionName": ".css",
		"savePath": "css"
	}
],
```
-, -. . «format» — , scss — , , ..

— css . . — css. css, .

, . , - - , css , style.css. , .

, style.scss. , scss - . , — import «header.scss»

, . …

? header.scss header.css. , style.css, header, , . header, . , header.scss, , .

, . , , header.css, . :)

Live Server

Live Css Compiler Live Server — , . Live Css Compiler, Live Server .

, , Live Css Compiler. Go Live. , , index.html Go Live .

html , “Hello”, , GoLive .

, . . link, link.css, . , .

, , , . , .

SCSS IntelliSense

SaSS. SCSS IntelliSense, scss, .

SCSS Formatter

. sss . .

Auto Complete Tag

Auto Rename Tag Auto Close Tab. , VS Code , Auto Close Tab — html, . Auto Rename Tag — , . , span , .

Bracket Pair Colorizer

, — , , . . , , . , , , .

Indent Rainbow

, , , , SaSS pug, .

Better Comments

. , , .. , , - , .

- —! — , ToDO — , —? — .

, , .

, .
Color, - .

BEM Helper

BEM. bem, , . , , - css scss bem- html .

. Alt+B+E, , , .

?

.
. , > BEM Helper.

, Insert Element. , , .

, . , , - .

eCSStractor

, html css\scss\sass. , . > , eCSStractor, . eCSStractor Run (With BEM Nesting).

, , Ctrl+Alt+1, Enter, .

: html , , Ctrl+Alt+1, , .

. , .

, , BEM? Ctrl+Alt+2 .

, , . , — BEM BEM.

CSS Navigation

, . -, .
, red. html, . r , .

. , F12 . , , .

, , - , . F12 , , , html-.

Alt + F12

Image Preview

. , . html-, , , . , , , .

Debugger for Chrome

, - . F5 Chrome, , .

Vscode Google Translate Google Translate

. , translate text.

, , , Shift+Alt+T.
html , hello, Shift+Alt+T . , .

, > , , , , .

, (Preffered). , Shift+Alt+T . .

Project Manager

, , .. . Project Manager.

, , . . , , Project Manager .

Settings Sync

, , Windows, Settings Sync.

, GitHub .
, GitHub, , .

, , . , .

, . Shift+Alt+U.

. , , , , .

.

, Settings Sync. , GitHub. .

. , , — Shift+Alt+D.

, , - . , , , . , — . , , , .

. , .

( ) :
Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
Settings Sync

GITHub

? .

! Git.

, +, , .

. +, .

, , -, Enter. GitHub. , , . :

git remote add origin https://github.com/FreelancerLifeStyle/hello_vscode.git git push -u origin master

, . , . , , , . , Enter.

, . Git. - , 1, 1 , , . > .

GitHub, , GitHub.

GitLens, .

, , — , — .

, , — , !

VS Code " "