1. Verwenden mehrerer Cursor
Es kann vorkommen, dass ein Programmierer denselben Text an mehreren Stellen gleichzeitig eingeben muss.
Im folgenden Code fügen Sie beispielsweise
class=«odd»dem ersten, dritten und fünften Element ein Attribut hinzu <li>. Und zum zweiten, vierten und sechsten Element müssen Sie ein Attribut hinzufügen class=«even».
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem, ipsum dolor.</li>
</ul>
So sollte es im Editor aussehen.
Code im Editor
Wie löse ich dieses Problem? Früher habe ich es so gemacht: Ich habe
class=«odd»an einer Stelle soetwas wie Text eingegebenund es dann in die Zwischenablage kopiert und dort eingefügt, wo ich es brauchte. Nachdem ich jedoch gelernt hatte, wie man mit mehreren Cursorn in VS Code arbeiten kann, hörte ich damit auf. Dies hat die Effizienz meiner Arbeit erheblich gesteigert.
Insbesondere sprechen wir über Folgendes. Um dem Text mehrere Cursor hinzuzufügen, müssen Sie eine Taste
Altauf der Tastaturgedrückt halten(in macOS - die TasteOption) und auf die Stellen klicken, an denen die Cursor erscheinen sollen. Danach wird alles, was über die Tastatur eingegeben wird, gleichzeitig dort angezeigt, wo sich Cursor befinden.
Verwenden mehrerer Cursor
Ich möchte Sie daran erinnern, dass es sich um die folgenden Tastaturkürzel handelt:
- Die Windows :
Alt+. - MacOS :
Option+.
2. Objekte umbenennen und den Befehl Symbol umbenennen
Jetzt lernen wir einen weiteren einfachen Trick.
Bei der Eingabe eines Codes oder Textes eines Dokuments kann es zu einem Fehler bei der Schreibweise eines Wortes kommen. Oder Sie müssen möglicherweise eine neue Namenskonvention für Entitäten in Ihrem Code anwenden. In solchen Situationen müssen mehrere Zeilen gleichzeitig verarbeitet werden.
Stellen wir uns vor, wir haben einen Code ähnlich dem folgenden. Wir müssen alle Vorkommen
foodurch ersetzen bar. Wie kann man es machen?
function foo(){
// ...
}
foo();
foo();
foo();
Wenn Sie jede Zeile manuell ändern, hat dieser Ansatz einige Nachteile:
- Zu viel Handarbeit.
- Hohe Fehlerwahrscheinlichkeit.
Um dieses Problem zu lösen, können Sie den Kontextmenübefehl verwenden
Rename Symbol.
Verwenden des Menübefehls Symbol
umbenennen Dieses Menü wird aufgerufen, wenn Sie mit der rechten Maustaste auf den ausgewählten Text klicken. Eine andere Möglichkeit, diesen Befehl aufzurufen, besteht darin,
F2nach Auswahl des zu bearbeitenden Textes auf zu drücken .
3. Verschieben Sie ausgewählte Zeilen nach oben und unten
Manchmal müssen Sie eine Art Programmcode oder einfachen Text im Dokument nach oben oder unten verschieben. Dieses Problem kann folgendermaßen gelöst werden:
- Wählen Sie den Text aus.
- Unter Windows verwenden wir eine Tastenkombination
Alt+, um den Text nach oben zu verschieben. Verwenden Sie die Tastenkombination, um den Text nach unten zu verschiebenAlt+. - Unter macOS ist der Schlüssel
Altein SchlüsselOptions.
So sieht es aus.
Text nach oben und unten verschieben
Mit diesem Ansatz können Sie die Textreihenfolge schnell und einfach ändern.
4. Schnipsel
Während wir Code schreiben, müssen wir ständig dieselben sich wiederholenden Konstrukte über die Tastatur eingeben.
Beispielsweise enthalten HTML5-Dateien immer die folgende grundlegende Dokumentstruktur:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
Und wenn wir in JavaScript für Schleifen schreiben, geben wir immer die folgenden Codefragmente ein:
for(let i = 0; i < ; i++){
}
Es gibt viele weitere ähnliche Beispiele. Wenn Sie diese Codeteile manuell eingeben müssten, wann immer Sie sie benötigen, wäre dies sehr ineffizient.
Glücklicherweise bietet VS Code einen konfigurierbaren Mechanismus zur automatischen Vervollständigung. So sieht es aus.
Autocompletion
Lassen Sie uns darüber sprechen, wie Sie VS-Code einrichten und die in der vorherigen Abbildung gezeigten Informationen abrufen.
▍Erstellen einer Konfigurationsdatei
Um die automatische Vervollständigung in VS Code einzurichten, müssen Sie zuerst eine entsprechende Konfigurationsdatei erstellen. Der Editor liest diese Datei mit den entsprechenden Mechanismen. Um diese Datei zu erstellen, müssen Sie zum Menü gehen, wie in der folgenden Abbildung gezeigt
Code > Preferences > User Snippets.
Menübefehl Benutzer-Snippets Das
folgende Fenster wird angezeigt .
Bedienfeld zum Arbeiten mit Snippets
Hier können Sie vorhandene Konfigurationsdateien auswählen und bearbeiten. Sie können hier auch eine neue Konfigurationsdatei erstellen. Wir werden genau das tun.
Wenn Sie hier einen Befehl auswählen,
New Global Snippets filewird eine Konfigurationsdatei erstellt, die global verfügbar ist. Wenn Sie den Befehl view auswählenNew Snippets file for 'test', wird eine Datei erstellt, die lokal im aktuellen Arbeitsbereich verfügbar ist.
Wir werden eine lokale Datei erstellen.
Nach Auswahl des Befehls
New Snippets file for 'test'fragtdasSystem nach dem Dateinamen.
Eingabe des Namens der neuen
Datei Wir haben eine Konfigurationsdatei erstellt, die jedoch bisher leer ist.
Neue leere Konfigurationsdatei Der Einfachheit halber habe
ich den gesamten oben beschriebenen Prozess aufgezeichnet und hier als animierte GIF-Datei dargestellt.
Erstellen einer neuen Konfigurationsdatei
▍Erstellen von Schnipsel
Die Konfigurationsdatei speichert Daten im JSON-Format. Hier ist ein Beispiel für seinen Inhalt.
Inhalt der Konfigurationsdatei
Hier ist das gleiche, aber im Klartext:
{
"html5 autocomplete": {
"prefix": "html5",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
" <title></title>",
"</head>",
"<body>",
"</body>",
"</html>"
]
}
}
Schauen wir uns zunächst das Feld an
«html5 autocomplete». Die Bedeutung dieses Feldes besteht nur darin, den Programmierer über den Zweck des Snippets zu informieren. Sie können hier alles hinzufügen.
Lassen Sie es uns jetzt mit dem Feld herausfinden
«prefix»: «html5». Es soll die von uns festgelegte Abkürzung beschreiben, die der Editor zu einem Codefragment erweitert. Wenn wir Text in den Editor eingeben html5, ersetzt der Editor ihn automatisch durch das, was im Element angegeben ist «body».
Element
«body»: […]enthält den Code, den der Editor anstelle des von uns eingegebenen Präfixes in das Dokument einfügen soll. Da dieser Code aus vielen Zeilen bestehen kann, wird dieses Feld durch ein Array dargestellt. Jedes Element im Array besteht aus einer Codezeile. Wenn wir die Konstruktion, die wir gerade betrachtet haben, in die Sprache des gewöhnlichen HTML-Codes "übersetzen", stellt sich heraus, dass sie der folgenden entspricht:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
</body>
</html>
Nachdem wir nun eine einfache Konfigurationsdatei zur Verfügung haben, testen wir sie.
Testen der Konfigurationsdatei
▍Scope-Schnipsel
Wir haben sichergestellt, dass unsere Konfigurationsdatei die automatische Vervollständigung zulässt. Aber es hat einen Nachteil. Tatsache ist, dass die durch das Präfix dargestellte Konstruktion
html5nur in HTML-Dateien verwendet wird. Wir brauchen dieses Konstrukt nicht in JavaScript-Dateien.
In solchen Fällen ist die Möglichkeit, den Umfang von Snippets anzugeben, sehr nützlich. Es handelt sich nämlich um ein Feld
«scope»: «html», das der Snippet-Beschreibung hinzugefügt werden muss.
Beschränken des Bereichs eines Snippets auf HTML-Dateien
Versuchen wir es erneut mit unserem System. Versuchen wir das Präfix
html5in der HTML-Datei und in der JS-Datei.
Testen des Snippets in der HTML- und JS-Datei
Wie Sie sehen, führt die Eingabe in der JS-Datei
html5zu nichts Besonderem. Und genau das brauchen wir.
▍Cursor
Versuchen wir die automatische Vervollständigung der gerade erstellten Datei erneut. Schauen wir es uns genauer an. Gibt es irgendwelche Mängel?
Untersuchung der automatischen Vervollständigung der Eingabe Sie
können sehen, dass der Cursor nach dem Einfügen eines Codeblocks in den Editor automatisch das Ende dieses Blocks erreicht. Der Codeblock, der automatisch in das Dokument eingefügt wird, ist jedoch nur ein Leerzeichen, an dem noch gearbeitet werden muss. Insbesondere müssen Sie den Inhalt des Tags eingeben
<title>.
Unser Mechanismus zur automatischen Vervollständigung wäre viel praktischer, wenn der Cursor automatisch zwischen dem öffnenden und dem schließenden Teil des Tags positioniert würde
<title>.
Dazu können wir eine spezielle Konstruktion in der Konfigurationsdatei verwenden
$0. So sieht es aus.
Festlegen der Cursorposition
Nachdem sich der Code im Dokument befindet, wird der Cursor automatisch dort positioniert, wo er sich in der Konfigurationsdatei befindet
$0.
Der Cursor befindet sich an der gewünschten Stelle
▍ Beispiel
Um das, was wir gerade gelernt haben, zu verstärken, schauen wir uns ein neues Beispiel an.
Wir möchten,
foridass die folgende Konstruktion nach Eingabe von Text in eine JavaScript- oder TypeScript-Datei automatisch angezeigt wird :
for(let i = 0; i < ; i++){
}
Und auch - damit der Cursor danach automatisch positioniert wird
i <.
Sie müssen vorerst nicht nach der Lösung für dieses Problem suchen. Versuchen Sie es selbst zu lösen.
Im Allgemeinen kann die Lösung für dieses Problem durch die folgende Konfigurationsdatei dargestellt werden:
{
"for-i loop": {
"prefix": "fori",
"scope": "javascript, typescript",
"body": [
"for(let i = 0; i < $0; i++){",
"}"
]
}
}
Hier ist eine Demo.
Verwenden des fori-Snippets
Auf diese Weise werden Snippets verwendet. Ich habe viel darüber gesprochen, da Snippets eine meiner Lieblingsfunktionen von VS Code sind. Ich denke, es wird auch für Sie nützlich sein. Zuvor musste ich doppelte Codeteile aus Dateien kopieren, in denen sie bereits vorhanden waren. Es ist ein langsamer Prozess und fehleranfällig. Dank der Möglichkeit, solche Codefragmente als Snippets zu formatieren, ist die Eingabe wiederholter Codefragmente jetzt viel einfacher geworden.
Welche Funktionen bietet VS Code für Ihre tägliche Arbeit?
