{"id":889010,"date":"2023-10-26T18:50:01","date_gmt":"2023-10-26T23:50:01","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/so-erstellen-sie-einen-neuen-arbeitsbereich-in-vs-code\/"},"modified":"2023-10-26T18:50:01","modified_gmt":"2023-10-26T23:50:01","slug":"so-erstellen-sie-einen-neuen-arbeitsbereich-in-vs-code","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/so-erstellen-sie-einen-neuen-arbeitsbereich-in-vs-code\/","title":{"rendered":"So erstellen Sie einen neuen Arbeitsbereich in VS Code"},"content":{"rendered":"<p>Der Visual Studio Code-Arbeitsbereich ist eine Sammlung von Dateien, die in einem einzigen Fenster ge\u00f6ffnet werden.  Ein Arbeitsbereich kann ein einzelner Ordner sein, in einigen F\u00e4llen umfasst er jedoch mehrere Dateien in einem Entwicklungsworkflow, der als Multi-Root-Arbeitsbereiche bezeichnet wird.  Wenn Sie an einem Projekt arbeiten und mehrere Dateien auf dieser Plattform \u00f6ffnen m\u00fcssen, kann die neue Workspace-Funktion hilfreich sein.  Sie k\u00f6nnen mehrere Dateien im selben Fenster \u00f6ffnen und so problemlos auf alle erforderlichen Dokumente zugreifen.  Die .code-Workspaces-Datei wird zum Speichern der Projektordnereinstellungen verwendet.  Nach der Konfiguration werden die verschiedenen Dateien automatisch im selben Fenster ge\u00f6ffnet.  Au\u00dferdem ist die Konfiguration viel schneller und einfacher als das Schreiben eines Shell-Skripts.  Erfahren Sie, wie Sie einen VS-Code-Arbeitsbereich erstellen.<\/p>\n<h2 class=\"wp-block-heading\">Erstellen eines neuen Arbeitsbereichs in VS Code<\/h2>\n<p>Ihr Arbeitsbereich ist in der Regel die lokale Kopie der Codebasis des Teams, die Sie zum Testen und Entwickeln Ihres Codes verwenden k\u00f6nnen.  In den meisten F\u00e4llen wird es automatisch erstellt, wenn Sie einen VS-Ordner \u00f6ffnen.  M\u00f6glicherweise m\u00f6chten Sie jedoch mehrere Dateien erstellen, um den \u00dcberblick \u00fcber alle \u00c4nderungen zu behalten, die Sie an verschiedenen Zweigen des Projekts vornehmen.  So konsolidieren Sie diese Dateien in einem VS-Code-Arbeitsbereich.<\/p>\n<ol type=\"1\">\n<li id=\"step1\">W\u00e4hlen Sie die Ordner aus, die Sie in Ihrem Arbeitsbereich haben m\u00f6chten.<\/li>\n<li id=\"step2\">F\u00fcgen Sie sie dem Arbeitsbereich hinzu, indem Sie zu \u201eDatei\u201c und dann \u201eOrdner zum Arbeitsbereich hinzuf\u00fcgen\u201c navigieren.<\/li>\n<li id=\"step3\">Wenn Ihr Arbeitsbereich eingerichtet ist, speichern Sie das neue Forum, indem Sie auf \u201eDatei\u201c und dann auf \u201eArbeitsbereich speichern unter\u201c gehen.<\/li>\n<\/ol>\n<p>Ihr neuer Arbeitsbereich wurde bereits in VS Code erstellt und der Name wird als (Name).code-Workspace angezeigt.<\/p>\n<h2 class=\"wp-block-heading\">Arbeitsbereichseinstellungen<\/h2>\n<p>Diese Einstellungen \u00fcberschreiben die Standardeinstellungen und k\u00f6nnen verwendet werden, um Ihren Arbeitsbereich nach Ihren W\u00fcnschen anzupassen.  Sie werden in JSON-Dateien gespeichert und ihr Speicherort wird dadurch bestimmt, wie Sie ihren Ordner \u00f6ffnen.<\/p>\n<h4 class=\"wp-block-heading\">Arbeitsbereichseinstellungen f\u00fcr einzelne Ordner<br \/><\/h4>\n<p>Wenn Sie einen Ordner als Arbeitsbereich \u00f6ffnen, finden Sie die Einstellungen in .vscode\/settings.json.<\/p>\n<h4 class=\"wp-block-heading\">Konfiguration des Multiroot-Arbeitsbereichs<br \/><\/h4>\n<p>Wenn es sich bei dem von Ihnen ge\u00f6ffneten Ordner um eine .code-workspace-Datei handelt, werden alle Workspace-Konfigurationen zur .code-workspace-Datei hinzugef\u00fcgt.<\/p>\n<p>Sie k\u00f6nnen die Einstellungen weiterhin pro Stammordner anpassen, aber die Einstellungen \u00fcberschreiben diejenigen, die im .code-workspace definiert sind.<\/p>\n<h2 class=\"wp-block-heading\">Starteinstellungen und Aufgaben des Arbeitsbereichs<\/h2>\n<p>\u00c4hnlich wie Einstellungen f\u00fcr Workspace konfiguriert werden, k\u00f6nnen auch Aufgaben und Releases an einen Workspace angepasst werden.  Wenn Sie einen Ordner als .code-workspace- oder Workspace-Datei ge\u00f6ffnet haben, befinden sich die Speicherorte der Aufgaben- und Startkonfigurationen in der .vsh-Datei oder .workspace-Datei.  Diese Einstellungen k\u00f6nnen auch \u00fcber den Ordner angepasst werden.<\/p>\n<h2 class=\"wp-block-heading\">Optimieren Sie einen neuen VS-Code-Arbeitsbereich<\/h2>\n<p>Mit integrierter Unterst\u00fctzung f\u00fcr mehrere Programmiersprachen, einschlie\u00dflich TypeScript, Javascript und Node JS, ist Workspace ein ideales Werkzeug f\u00fcr Entwickler.  Diese Tipps machen die Plattform effizienter und einfacher zu navigieren.<\/p>\n<h3 class=\"wp-block-heading\">Terminals<\/h3>\n<p>M\u00f6glicherweise verwenden Sie das von Ihrem Betriebssystem bereitgestellte Standardterminal.  Mit VS Code wollte die Plattform, dass Sie sich nicht auf die Betriebssystemfunktion verlassen m\u00fcssen.  VS Code verf\u00fcgt \u00fcber ein integriertes Terminal, das alle Ihre Anforderungen an einem Ort hat.  Dies ist eine gro\u00dfartige M\u00f6glichkeit, den \u00dcberblick \u00fcber Ihre Entwicklungsprojekte zu behalten und sicherzustellen, dass sie reibungslos ablaufen.  Mit der M\u00f6glichkeit, die Symbolfarbe umzubenennen oder zu \u00e4ndern, ist es auch einfacher, zwischen verschiedenen Terminals f\u00fcr Ihr Projekt zu unterscheiden.<\/p>\n<h3 class=\"wp-block-heading\">Wimpern umwickeln<\/h3>\n<p>Diese Funktion ist n\u00fctzlich f\u00fcr Entwickler, die an gro\u00dfen Projekten arbeiten, bei denen mehrere Komponenten verwendet werden.  Beim Wechsel von einer Komponente zu einer anderen kann es schwierig sein, den \u00dcberblick \u00fcber alle Dateien zu behalten.  In VS Code werden Registerkarten im Browser angezeigt und Sie m\u00fcssen zwischen ihnen wechseln, wenn Sie sehen m\u00f6chten, was sich darin befindet.<\/p>\n<p>Eine effizientere Methode w\u00e4re, diese Tabs umzubrechen, indem Sie auf Cmd + klicken und nach \u201eTabs umbrechen\u201c suchen.  Mit dieser Funktion k\u00f6nnen Sie leichter sehen, was sich auf den verschiedenen Registerkarten befindet.<\/p>\n<h3 class=\"wp-block-heading\">Pin-Tabs<\/h3>\n<p>Als Entwickler ist es ratsam, Ihren Arbeitsbereich so organisiert wie m\u00f6glich zu halten.  Sie k\u00f6nnen dies tun, indem Sie die Tabs, die Sie h\u00e4ufig verwenden, an der Vorderseite Ihres Bildschirms anheften.  Sie k\u00f6nnen das Erscheinungsbild dieser Registerkarten auch anpassen, indem Sie die Tasten \u201eBefehl +\u201c oder \u201eStrg +\u201c dr\u00fccken und nach \u201eRegisterkarte anheften\u201c suchen.<\/p>\n<h3 class=\"wp-block-heading\">Benutzeroberfl\u00e4che<\/h3>\n<p>Ihre Terminalschnittstelle ist so konfiguriert, dass sie \u00fcber verschiedene Optionen wie Explorer, Suche, Projektmanager und Ausgabe verf\u00fcgt.  Es verf\u00fcgt au\u00dferdem \u00fcber einen fu\u00dfzeilen\u00e4hnlichen Abschnitt, in dem Sie mehrere Details leicht finden und \u00e4ndern k\u00f6nnen.  In VS Code k\u00f6nnen Sie diese Registerkarten per Drag-and-Drop verschieben und nach Belieben neu anordnen.  Sie k\u00f6nnen h\u00e4ufig verwendete Optionen weiter oben platzieren oder sie anpassen, um den Zugriff zu erleichtern.  Das Anpassen der Benutzeroberfl\u00e4che erleichtert die Navigation in Ihrem Arbeitsbereich.<\/p>\n<h3 class=\"wp-block-heading\">Sprache<\/h3>\n<p>Wenn Sie eine neue Seite in Visual Studio Code erstellen, hat die Datei keinen Titel und Sie m\u00fcssen diese Details selbst eingeben.  Als n\u00e4chstes m\u00fcssen Sie zum Dateinamen gehen und die Erweiterung eingeben.  Der Vorgang kann langwierig sein, insbesondere wenn es sich um eine gro\u00dfe Anzahl von Dateien handelt.<\/p>\n<p>Sie k\u00f6nnen den Prozess optimieren, indem Sie der IDE erlauben, die Dateien zu untersuchen.  Anschlie\u00dfend verwenden Sie das oben beschriebene Benennungssystem, um die neu erstellten Dateien zu benennen.<\/p>\n<h3 class=\"wp-block-heading\">Vorauszahlung<\/h3>\n<p>VS Code hat einige frustrierende Funktionen.  Wenn Sie beispielsweise eine Datei in der Vorschau \u00f6ffnen und unmittelbar danach eine andere Datei \u00f6ffnen, ohne \u00c4nderungen an der ersten Datei vorzunehmen, schlie\u00dft das Programm die erste Datei.  Wenn Sie dies \u00e4ndern und beide Dateien in der Vorschau ge\u00f6ffnet lassen m\u00f6chten, gehen Sie zu \u201eEinstellungen\u201c und suchen Sie nach \u201eVorschau aktivieren\u201c.  Aktivieren Sie das Kontrollk\u00e4stchen, um die erforderlichen \u00c4nderungen vorzunehmen.<\/p>\n<h3 class=\"wp-block-heading\">Neues PC-Setup<\/h3>\n<p>M\u00f6glicherweise haben Sie Ihren VS-Code-Arbeitsbereich nach Ihren W\u00fcnschen angepasst und angepasst, nur um einen neuen PC zu erhalten.  Auch wenn eine neue Maschine gro\u00dfartig ist, kann es l\u00e4stig sein, den Arbeitsplatz neu konfigurieren zu m\u00fcssen.<\/p>\n<p>Mit der Einstellungssynchronisierung k\u00f6nnen Sie alle Ihre Einstellungen an einem Ort speichern.  Wenn Sie ein anderes Ger\u00e4t erhalten, werden die Einstellungen des alten Ger\u00e4ts automatisch auf den neuen VS Code Workspace angewendet.  Auf diese Weise m\u00fcssen Sie Workspace auf Ihrem neuen PC nicht neu konfigurieren.<\/p>\n<h3 class=\"wp-block-heading\">Wiedergabe \u00f6ffnen<br \/><\/h3>\n<p>Mit dem Debuggen einer Webanwendung in der Produktion zu beginnen, kann herausfordernd und zeitaufw\u00e4ndig sein.  Mit <a target=\"_blank\" href=\"https:\/\/openreplay.com\/\" rel=\"noreferrer noopener nofollow\">\u00d6ffnen Sie \u201eWiederholen\u201c.<\/a>k\u00f6nnen Sie alles, was Ihre Benutzer tun, \u00fcberwachen und wiedergeben. So k\u00f6nnen Sie sehen, wie sich die App verh\u00e4lt, und eventuell auftretende Probleme erkennen.  OpenReplay ist eine gro\u00dfartige Option, da es eine kostenlose und Open-Source-Alternative zu anderen Debugging-Anwendungen wie z <a target=\"_blank\" href=\"https:\/\/logrocket.com\/\" rel=\"noreferrer noopener nofollow\">Blockrakete<\/a> Und <a target=\"_blank\" href=\"https:\/\/www.fullstory.com\/\" rel=\"noreferrer noopener nofollow\">Ganze Geschichte<\/a>.  Durch die Verwendung eines Debugging-Programms sparen Sie bei der Verwendung von Workspace viel Zeit.<\/p>\n<h3 class=\"wp-block-heading\">GitHub<br \/><\/h3>\n<p>VS Code verf\u00fcgt \u00fcber eine integrierte Funktion <a target=\"_blank\" href=\"https:\/\/github.com\/\" rel=\"noreferrer noopener nofollow\">GitHub<\/a> Integration.  Dadurch k\u00f6nnen Sie Ihre Dateien schnell auf GitHub \u00fcbertragen.  Wenn Sie \u00fcber VS Code eine Verbindung zu GitHub herstellen, m\u00fcssen Sie keine Zeit mit der Eingabe von Git-Befehlen verbringen.  Die VS-Code-Integration vereinfacht die Verwaltung Ihrer Dateien.<\/p>\n<h2 class=\"wp-block-heading\">Alle Ihre Ordner an einem Ort<\/h2>\n<p>Workspace macht es Ihrem Team leicht, organisiert zu bleiben.  Dateien und Ordner k\u00f6nnen an einem einzigen Ort gespeichert werden, sodass sie per Knopfdruck ge\u00f6ffnet und angezeigt werden k\u00f6nnen.  Der Arbeitsbereich kann auch optimiert werden, um die Effizienz zu verbessern und den \u00dcberblick \u00fcber laufende Projekte zu behalten.  Mit diesem Leitfaden sind Sie nun bestens ger\u00fcstet, um einen Arbeitsbereich in VS Code zu erstellen und ihn an Ihre Bed\u00fcrfnisse anzupassen.<\/p>\n<p>Haben Sie einen neuen Arbeitsbereich in VS Code eingerichtet?  Teilen Sie uns in den Kommentaren unten mit, wie Sie Ihren Arbeitsbereich erstellt und optimiert haben.<\/p>\n   ","protected":false},"excerpt":{"rendered":"<p>Der Visual Studio Code-Arbeitsbereich ist eine Sammlung von Dateien, die in einem einzigen Fenster ge\u00f6ffnet werden. Ein Arbeitsbereich kann ein einzelner Ordner sein, in einigen F\u00e4llen umfasst er jedoch mehrere Dateien in einem Entwicklungsworkflow, der als Multi-Root-Arbeitsbereiche bezeichnet wird. Wenn Sie an einem Projekt arbeiten und mehrere Dateien auf dieser Plattform \u00f6ffnen m\u00fcssen, kann die [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":889011,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/27.jpg","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/889010"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=889010"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/889010\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/889011"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=889010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=889010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=889010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}