Steigern Sie Ihre Produktivität mit VS Code

1. Willkommen beim Kurs: Willkommen zu diesem Kurs , in dem Sie lernen, wie Sie die Produktivität mithilfe von Visual Studio Code steigern Produktivität mithilfe können. VS Code ist eine der am häufigsten verwendeten und beliebtesten Code-Editor-Communitys für Indie-Entwickler. Und in diesem Kurs lernst du einige coole Tipps und Tricks dazu, wie Suchen, Emmett, Tastatur, kleinen Videolektionen einige coole Tipps und Tricks dazu, wie Suchen, Emmett, Tastatur, Tastenkombinationen und vieles mehr . Hallo, ich bin und bin mehr als vier Jahren Full-Stack-Webentwickler . Und ich begann mit der Webentwicklung mit JavaScript. Natürlich nach dem Erlernen von HTML und CSS. Und damals habe ich einen anderen Code-Editor verwendet. Aber als ich anfing, verschiedene Sprachen wie Python, Django, Ruby oder Java zu lernen verschiedene Sprachen wie Python, Django, , musste ich für jede Sprache einen separaten Code-Editor installieren. Aber als ich auf VS Code stoße, habe ich in den ersten zwei bis drei Tagen angefangen, es zu lieben , da es sehr flexibel war. Und es gibt viele Abkürzungen. Außerdem können wir Erweiterungen für unsere Bedürfnisse herunterladen, was ihn zum perfekten Code-Editor für Webentwicklung und Programmierung im Allgemeinen macht Webentwicklung und Programmierung . In diesem Kurs werde ich meine Erfahrungen mit der Verwendung teilen und ein paar coole nette Tricks, die deine Produktivität steigern können. 2. Tastaturkürzel und wie du es ändern kannst: Tastenkombinationen und wie man sie ändert. Öffnen Sie zunächst Ihren Visual Studio-Code. Zweitens klicken Sie auf dieses Zahnradsymbol. Klicken Sie auf diese Tastenkombination. Sie können hier auch die Tastenkombination zum Öffnen der Tastenkombination sehen , nämlich Strg plus K und S. Hier sehen Sie alle Ihre Tastenkombinationen. Sie können hier auch nach den Tastenkombinationen suchen auch auf dieses Stiftsymbol klicken, können Sie Ihre Tastenkombination ändern. ZB. I. Ändert diese Tastenkombination, um eine neue Datei zu erstellen. Wenn ich hier Control und N eintippe, können Sie sehen, dass eine Meldung angezeigt wird weil eine vorhandene Tastenkombination diese Tastenkombination hat. Also würde ich ihr Steuerelement und diese eckigen Klammern eingeben. Und ich drücke die Eingabetaste. Sie können sehen, dass sich meine Abkürzung geändert hat. Jetzt hat sich die Tastenkombination zum Erstellen einer neuen Datei geändert. Lass es uns überprüfen. Lassen Sie uns also mit dieser Verknüpfung eine neue Datei erstellen. Ich gebe hier index.html und Sie können sehen , dass es funktioniert. Ebenso habe ich diese Tastenkombination geändert, um die Zeile zu duplizieren, sodass ich Strg und D drücken kann, um die Zeile zu duplizieren. Es ist sehr nützlich. 3. Alle Multi cursor: Die Auswahl mehrerer Cursors ist eine sehr nützliche Technik, um die Produktivität mithilfe von Visual Studio Code zu steigern . Nehmen wir an, Sie möchten in diesen fünf Zeilen etwas Text hinzufügen . Als Erstes können Sie hier den Text eingeben und ihn noch viermal kopieren und einfügen. In Visual Studio Code können Sie jedoch mehrere Zeilen auswählen, z. B. Alt-Taste drücken und mit der linken Maustaste auf diese Zeilen klicken, und es werden mehrere Cursors angezeigt. Jetzt können Sie alles eingeben, was Sie wollen. Eine Anwendung hierfür könnte das Hinzufügen von Klassennamen zu mehreren Listen in HTML sein. Wenn Sie dieselbe Klasse hinzufügen möchten, bei der es sich um ein gestricheltes F-Element in einer Mehrfachliste handelt. Sie können Alt drücken und hier mit der linken Maustaste klicken. Geben Sie dann ein, dass Ihre Klasse dem Nav-Objekt entspricht. Sie können auch die mittlere Maustaste drücken , um mehrere Zeilen auszuwählen. Und dann kannst du hier etwas eintippen. Sie können auch Strg plus Alt und die NACH-OBEN-TASTE drücken , um mehrere Zeilen von oben auszuwählen. Sie können auch Strg plus Alt und die Abwärtspfeiltaste drücken , um mehrere Zeilen von unten auszuwählen. Um nun ein mehrfaches Vorkommen eines Wortes auszuwählen, können Sie Strg und D drücken. Wenn ich z. B. das mehrfache Vorkommen dieser östlichen Primvariablen auswählen möchte , wähle ich diese Variable aus und drücken Sie Control. Und D, es wählt das nächste Vorkommen dieses Wortes aus. Und wenn ich noch einmal Strg und D drücke, wird ein anderes Vorkommen dieses Wortes ausgewählt. Beachten Sie, dass sich diese Tastenkombination höchstwahrscheinlich geändert hat, wenn die Steuerung plus D-Auswahl für Sie nicht funktioniert . Was Sie also tun können, ist die Tastenkombinationen zu öffnen und hier zu tippen Wählen Sie zwei nächste Treffer aus. Und Sie können diese Abkürzung hier sehen. Also musst du dieses Ding statt Strg+D drücken , um das nächste Vorkommen eines Wortes auszuwählen. Wenn Sie nun das gesamte Vorkommen eines Wortes auswählen möchten, müssen Sie zunächst dieses Wort auswählen und plus Umschalttaste plus L drücken . Dadurch wird das gesamte Vorkommen eines Wortes ausgewählt. Nun besteht ein weiterer Trick darin, einen Code auszuwählen und Strg plus Umschalttaste sowie die rechte Pfeiltaste zu drücken . Es wird die Auswahl erweitern. Wenn Sie Strg plus Umschalttaste plus Linkspfeiltaste statt der Rechtspfeiltaste drücken, wird diese Vorlesung verkleinert. Eine andere Technik besteht nun darin, den Cursor irgendwo zu platzieren und die Umschalttaste und die Alt-Taste gedrückt zu halten und mit dem Ziehen zu beginnen. Es wird wie eine Box ausgewählt. Dies wird als Spaltenfeld-Auswahl bezeichnet. 4. Dateien finden, ersetzen und durchsuchen, in denen Dateien hinein: In VS Code können Sie Text schnell finden und ersetzen. In dieser Lektion werden wir ausführlich darüber erfahren. Wenn Sie zunächst etwas finden möchten, können Sie Strg und F drücken wird dieses Such-Widget geöffnet. Und wenn Sie hier etwas eingeben, werden die Suchergebnisse hervorgehoben. Wenn es zwei oder mehr Suchergebnisse gibt, können Sie die Eingabetaste drücken um zum nächsten Ergebnis zu gelangen. Sie können auch die Umschalttaste und die Eingabetaste drücken , um zum vorherigen Suchergebnis zu gelangen. Wenn Sie ein Wort auswählen dann Strg und F drücken, wird das Datenwort bei diesem Suchbesuch automatisch angezeigt. Jetzt wird dieser Suchvorgang standardmäßig für die gesamte Datei ausgeführt. Wenn Sie es jedoch in einem ausgewählten Textbereich ausführen möchten, müssen Sie diesen Hamburger-Button verwenden. Wenn Sie z. B. einige Texte in diesen Zeilen finden möchten , drücken Sie die Strg-Taste. Und F. Und ich tippe hier ist Prime. Und wählen Sie diese Codezeilen aus und drücken Sie diese Hamburger-Taste. Jetzt können Sie sehen, dass nur das Wort Primzahl ist, die in diesen Zeilen stehen, hervorgehoben sind. Wenn Sie nun mehrere Zeilen auswählen möchten, drücken Sie Strg und F und geben Sie hier den Text ein. Und um eine neue Zeile einzufügen, drücken Sie Strg und Enter. Dann kannst du a oder so eingeben. Jetzt können Sie das Widget auch maximieren, drücken Sie hier und ziehen Sie es. Wenn Sie hier doppelklicken, wird es maximiert. Und wenn Sie erneut hier doppelklicken, wird es minimiert. Jetzt um rüber zu suchen. Drücken Sie abschließend Strg plus Shift plus F, und dann erscheint dieses Ding hier. Sie können dies auch maximieren oder minimieren , indem Sie hier klicken und ziehen. Wenn ich nun hier Primzahl eintippe, können Sie sehen, dass die Suchergebnisse hier erschienen sind. Es sagt mir, dass es dieser Datei eine S-Primvariable namens hello.py gibt. Wenn ich hier klicke, leihe ich mir die Datei aus. Sie können von hier aus auch direkt nach einem Wort suchen und es ersetzen. Klicken Sie z. B. auf dieses Pfeilsymbol und dann können Sie hier eingeben, sie ersetzen in Richtung und drücken Sie diese Taste. Sie können die Verknüpfung auch hier sehen und dann hier klicken. Und das war's. Das Wort ist jetzt ersetzt. 5. Live-Server zum automatischen Nachladen und Anfertigen von Anfragen: In dieser Lektion werden wir etwas über Live Server lernen. Bevor wir jedoch erfahren, was ein Live-Server ist, lassen Sie uns über seine Benutzer sprechen. Die erste Verwendung von Live Server ist also das automatische Neuladen. ZB kannst du hier sehen, dass ich eine index.html Datei habe und hier ist mein Chrome-Browser. Wenn ich nun etwas an dieser HTML-Datei ändere, werde ich z. B. den Text dieser Überschrift ändern. Wenn ich jetzt Strg und S drücke, um diese Datei zu speichern, können Sie sehen, dass diese Datei automatisch neu geladen wurde und erkennt, ob sich diese Überschrift geändert hat. Es gibt auch eine weitere Verwendung von Live Server , bei der Sie problemlos Anfragen stellen, abrufen, platzieren, posten und löschen können. Okay, wir haben also einige Einsatzmöglichkeiten von Life Server gesehen. Lass es uns installieren. Und im Grunde ist es eine Erweiterung. Um dies zu installieren, müssen Sie auf den externen Markt gehen und nach Live Server suchen. Nach der Installation müssen Sie möglicherweise Ihren VS Code neu starten. Öffnen Sie eine HTML-Datei. Und Sie können diesen Go-Live-Button unten sehen , klicken Sie hier. Und es wird diese Datei im Standardbrowser öffnen, der in den meisten Fällen gewachsen ist. Die zweite Möglichkeit, diesen Live-Server zu öffnen , besteht darin, mit der rechten Maustaste auf diese HTML-Datei zu klicken und diese Option Mit Live-Server öffnen auszuwählen . Sie können die Abkürzung auch hier sehen. Jetzt können Sie sehen, dass, wenn ich etwas an der HTML-Datei ändere , diese automatisch neu geladen wird. Um den Live-Server zu beenden, können Sie entweder diese Option unten drücken oder Sie können mit der rechten Maustaste klicken und diese Option zum Stoppen des Live-Servers wählen. Jetzt läuft der Live-Server standardmäßig auf Port 55 double zero. Sie können dies aber auch ändern, um die Einstellungen zu öffnen und hier Live-Server einzugeben. Scrollen Sie nach unten und klicken Sie im Berichtsbereich auf diesen Link. Nachdem Sie darauf geklickt haben, wird diese Art von Code auf dem neuen Typ von VSCode angezeigt Geben Sie hier nicht die Portnummer , auf der Sie Ihren Life-Server ausführen möchten. ZB wenn ich hier 8080 eintippe und wenn ich das speichere, wenn ich jetzt diesen Live-Server starte, kannst du sehen, dass der Server auf Port 8080 gestartet ist. Um dies nicht rückgängig zu machen, können Sie diese Zeile entfernen. Jetzt speichere ich das und führe diese Datei auf dem Live-Server aus. Jetzt können Sie sehen, dass dieser Server auf Port 5.500 gestartet wurde . 6. Dein Thema ändern: Eine der coolen Funktionen von VSCode ist die Syntaxhervorhebung und Teams. In dieser Lektion werden wir etwas darüber lernen. Öffnen Sie zunächst VS Code in einem Ordner. Übrigens, wenn Sie VS Code in einem bestimmten Ordner öffnen möchten , können Sie diesen Ordner ziehen und in VS-Code ablegen. Es wird diesen Ordner öffnen. jetzt in VS Code Gehen Sie jetzt in VS Code zu Datei, Einstellungen und Farbdesign. Sie können die Abkürzung auch hier sehen. Klicken Sie darauf und so etwas wird hier angezeigt. Jetzt können Sie mit der Aufwärts- und Abwärtspfeiltaste das Team auswählen, das Ihnen gefällt Es wird Ihnen auch die Vorschau angezeigt. Wählen Sie das Team aus, das Ihnen gefällt. Sie können sehen, dass ich ein Punktprotein verwende. Sie können Teams auch aus Erweiterungen herunterladen. Gehen Sie also zu Extend Sun und geben Sie hier Tim ein, Sie möchten z. B. Material paaren, und das ist das Material UI Team. Jetzt gibt es eine coole Website, auf der du Teams finden kannst , die Indivi genauso gut nutzen können. Diese Website ist also VS Code Teams. Und Sie können hier sehen, dass es viele Themen gibt. Sie können auch Teams filtern. Wählen Sie das Team aus, das Ihnen gefällt, und klicken Sie auf die Schaltfläche „ Mit VS Code öffnen“. Sie können auch seinen Namen kopieren und im Sinne des Umfangs hier und das Team von hier herunterladen. Jetzt können Sie auch Ihre Dateisymbole anpassen. Dafür können Sie nach Material Icon Team suchen und dieses herunterladen. 7. Final video lec8: In dieser Lektion lernen Sie einige grundlegende und nützliche Befehlszeilenkürzel kennen. Um nun die Befehlszeile in einem Ordner zu öffnen, gibt es eine nette Tastenkombination , die diesen Ordner öffnet, CMD eingibt und die Eingabetaste drückt. Um nun über die Befehlszeile einen neuen Ordner in diesem Ordner zu erstellen , müssen Sie hier MKDIR und den Ordnernamen eingeben. Also tippe ich hier meinen Ordner ein und drücke die Eingabetaste. Und Sie können sehen, dass der Ordner erstellt wurde. Um nun eine Datei in Windows zu erstellen, müssen Sie pair, type, null und ist ein Größer-als-Symbol eingeben. Und der Dateiname, Bodentyp hier, neuer Dateipunkt HTML. Jetzt müssen Sie auf dem Mac den Touch-Befehl verwenden. Sie müssen also hier Touch und den Dateinamen eingeben , um eine Datei in Windows nicht zu löschen, müssen Sie den Befehl löschen verwenden. Also gib hier D E, N D Dateiname ein. Jetzt können Sie in der Befehlszeile oder im Terminal, wenn Sie einen Mac verwenden, die Tabulatortaste drücken , um die automatische Vervollständigung Sie können hier sehen, dass ich vier Dateien in diesem Ordner habe. Nehmen wir an, ich möchte diese Datei löschen. Also gebe ich a oder D, L und L ein, gebe hier m, y, dy ein und drücke dann die Tabulatortaste. Dieser Dateiname wird automatisch vervollständigt. Wenn ich hier nur MEIN eintippe, drücken Sie die Tabulatortaste. Es wird das erste Ergebnis angezeigt. Und wenn ich erneut die Tabulatortaste drücke, wird das zweite Ergebnis angezeigt und so weiter. Um nun zu einem Ordner zu navigieren, der sich in diesem Ordner befindet, muss ich den Befehl cd verwenden. Also gebe ich hier C, D und den Ordnernamen ein. Wenn Sie nun einen Ordner zurückblättern möchten , müssen Sie hier c, d und diese doppelten Punkte eingeben . Und das war's.