Öffnen von Quelldateien in Visual Studio Code

Mit den Open Source-Dateien im Visual Studio Code-Experiment können Sie Microsoft Edge DevTools verwenden, aber dann Ihre Dateien in Visual Studio Code statt im Code-Editor des DevTools Sources-Tools bearbeiten.

Wenn Sie dieses Experiment verwenden, müssen Sie, wenn Sie Visual Studio Code verwenden und DevTools verwenden, um Ihre CSS-Regeln zu ändern, nicht mehr den Code-Editor im Quellentool von DevTools verwenden. Sie können einfach den Code-Editor in Visual Studio Code verwenden. Wenn Sie dieses Experiment aktivieren, erhalten lokale Dateien eine andere Behandlung.

Einrichten der Bearbeitung lokaler Dateien in Visual Studio Code

Wählen Sie zuerst DevTools > Einstellungen > ExperimentsOpen-Quelldateien**** > in Visual Studio Code aus, und starten Sie dann DevTools erneut.

Wenn dieses Experiment aktiviert ist, nehmen wir an, dass Sie in Microsoft Edge zu einem lokalen Server (zhttp://localhost. B. oder http://127.0.0.1) wechseln oder eine lokale Datei öffnen.

Microsoft Edge mit einer geöffneten lokalen Datei.

Wenn Sie DevTools öffnen, werden Sie aufgefordert, Ihren Stammordner zu identifizieren. Sie können das Abonnement deaktivieren, indem Sie " Schließen " (x) oder die Don't show again Schaltfläche auswählen. Weitere Informationen erhalten Sie, indem Sie den Learn more Link auswählen.

Entwicklertools mit einer Informationsleiste, in der Sie aufgefordert werden, Ihren Stammordner zu identifizieren.

Wenn Sie die Schaltfläche " Stammordner festlegen " auswählen, werden Sie vom Betriebssystem aufgefordert, zum Ordner zu navigieren und ihn auszuwählen.

Auswählen des Speicherorts des Stammordners mithilfe des Datei-Managers Ihres Betriebssystems.

Nachdem Sie einen Stammordner ausgewählt haben, müssen Sie DevTools Vollzugriff auf den Ordner gewähren. Oberhalb der Symbolleiste werden Sie in einer Eingabeaufforderung mit den Schaltflächen "Zulassen" oder " Verweigern " gefragt, ob DevTools die Berechtigung zum Zugriff auf den Ordner erteilt werden soll.

DevTools fordert Sie auf, Zugriff auf den Ordner zu erhalten.

Nachdem Sie die Berechtigung erteilt haben, wird der ausgewählte Ordner in DevTools auf der Registerkarte " Dateisystem " des Tools "Quellen " als Arbeitsbereich hinzugefügt. Dies bedeutet, dass jede Datei, die Sie in DevTools bearbeiten, jetzt in Microsoft Visual Studio Code statt im Quellentool geöffnet wird. Als Indikator wird ein linked Symbol neben dem Dateinamen angezeigt. In diesem Beispiel wählen wir den base.css Link im Formatvorlagentool aus.

Wenn Sie im Formatvorlagentool einen Dateilink auswählen, wird die Datei in Visual Studio Code geöffnet.

DevTools öffnet eine Instanz von Visual Studio Code und zeigt alle Dateien im Stammordner an. DevTools öffnet auch die von Ihnen ausgewählte Datei und scrollt in die richtige Zeile der CSS-Auswahl.

Visual Studio Code mit den Stammordnerdateien und der ausgewählten Datei geöffnet.

Alle Änderungen, die Sie an der Datei in DevTools vornehmen, werden jetzt mit Visual Studio Code synchronisiert. Wenn Sie beispielsweise den Formatvorlagen des Textkörpers eine background: green Regel hinzufügen, wird der Datei im Code-Editor von Visual Studio Code automatisch dieselbe CSS-Regel hinzugefügtbase.css.

Änderungen am Code im Formatvorlagentool werden jetzt im Quellcode in Visual Studio Code widergespiegelt.

Ändern der Arbeitsbereichseinstellungen

Wenn Sie zur DevTools-Einstellungen Seite wechseln, indem Sie Einstellungen (zahnradsymbol oder Shift + ?) auswählen, können Sie das Verhalten des Experiments ändern. Wenn Sie die Arbeitsbereichsseite in Einstellungen auswählen, haben Sie einige Optionen.

Der Einstellungsbereich des Arbeitsbereichs mit mehreren Optionen.

Auf der Seite Einstellungen > Workspace werden Ihre Arbeitsbereiche zusammen mit Konfigurationsoptionen aufgelistet.

  • Um festzulegen, ob Dateien in Visual Studio Code Open Source werden sollen, aktivieren Sie das Kontrollkästchen "Quelldateien in Visual Studio Code öffnen".

  • Um DevTools-Änderungen automatisch auf dem Datenträger zu speichern, aktivieren Sie das Kontrollkästchen "DevTools-Änderungen auf Datenträger speichern ".

  • Verwenden Sie das Textfeld " Ordner ausschließen" , um Ordner automatisch aus einem Arbeitsbereichsordner auszuschließen.

  • Um einen Ordner aus einem bestimmten Arbeitsbereich auszuschließen, wählen Sie neben "Ausgeschlossene Ordner" die Schaltfläche " Hinzufügen" aus.

  • Um einen zusätzlichen Arbeitsbereich hinzuzufügen, wählen Sie die Schaltfläche "Ordner hinzufügen " aus.