共用方式為

在 Visual Studio Code 中開啟原始碼檔案

Visual Studio Code 中的開源檔案實驗允許你使用 Microsoft Edge DevTools，但你可以在 Visual Studio Code 中編輯檔案，而非在 DevTools Sources 工具的程式碼編輯器中。

當你使用這個實驗時，如果你使用 Visual Studio Code 並使用 DevTools 來更改 CSS 規則，你就不必再使用 DevTools 的 Sources 工具中的程式碼編輯器。 你可以直接使用Visual Studio Code的程式碼編輯器。 當你開啟這個實驗時，本地檔案會得到不同的處理方式。

在 Visual Studio Code 中設定編輯本地檔案

首先，在 Visual Studio Code 中選擇 DevTools >設定>實驗的>開源檔案，然後重新啟動 DevTools。

啟用此實驗後，假設在 Microsoft Edge 中，你前往本地伺服器 (如 http://localhost 或 http://127.0.0.1) ，或開啟本地檔案。

Microsoft Edge 開啟本機檔案

當你打開 DevTools 時，會被提示要識別你的根資料夾。 您可以選擇 關閉 (x) 或點擊 Don't show again 按鈕來選擇退出。 您可以點擊 Learn more 連結獲得更多資訊。

開發者工具顯示資訊欄，要求你辨識根目錄

如果你選擇 「設定根資料夾 」按鈕，作業系統會提示你前往該資料夾並選擇它。

使用作業系統的檔案管理器選擇根目錄的位置

選擇根目錄後，你需要授權 DevTools 完全存取該資料夾。 在工具列上方，有一個帶有 「允許 」或 「拒絕 」按鈕的提示，詢問你是否要授權 DevTools 存取該資料夾。

DevTools 詢問存取該資料夾

授權後，您選擇的資料夾會在 DevTools 的 Sources 工具 Workspace 標籤中被加入為工作區。 這表示你在 DevTools 編輯的任何檔案現在都會在 Microsoft Visual Studio Code 開啟，而不是在 Sources 工具中。 作為指示，我們在檔名旁顯示一個 linked 圖示。 在這個範例中，我們會在樣式工具中選擇連結base.css。

在樣式工具中選擇檔案連結，該檔案會在 Visual Studio Code 中開啟

DevTools 會開啟一個 Visual Studio Code 實例，並顯示根目錄中的所有檔案。 DevTools 也會開啟你選擇的檔案，並捲動到 CSS 選擇器的正確行。

Visual Studio Code 開啟時，已開啟根目錄檔案及所選檔案

你在 DevTools 中對檔案所做的任何變更，現在都會同步到 Visual Studio Code。 例如，如果你將 to green to background for the style of the Body 的樣式，則在 Visual Studio Code 的程式碼編輯器中，會自動加入base.css相同的 CSS 規則。

樣式工具中程式碼的變更現在反映在 Visual Studio Code 的原始碼中

更改工作區設定

要改變Visual Studio Code實驗中開源檔案的行為，請點擊 DevTools 設定頁面，點擊齒輪圖示 () 或按 Shift+？，然後選擇工作區頁面：

工作區的設定面板顯示了幾個選項

設定>工作區頁面列出你的工作區，以及以下設定選項：

使用者介面控制 描述
Visual Studio Code 中的開源檔案勾選框 設定是否要在 Visual Studio Code 中開放原始碼檔案。
將 DevTools 變更存到磁碟 的勾選框 會自動將 DevTools 的變更儲存到磁碟。
資料夾排除圖案 文字框 自動從工作區資料夾中排除資料夾。
在「排除資料夾」旁邊的新增按鈕 排除特定工作區中的資料夾。
新增資料夾 按鈕 新增一個額外的工作區。
  • Last updated on