大家好，今天是鐵人賽第三天，我們來介紹VSCode的使用者設定與工作區概念，這是未來幫助我們extension開發的基本觀念。

VSCode Settings概覽

一個好的IDE，應該是editor的元件和行為都是可以被設定的，IDE透過設定檔，讓我們將編輯器客製化以符合我們的使用習慣。在VSCode裡，我們主要透過settings.json這個json檔案來設定我們的編輯器，settings.json可以有多個，根據設定檔所在位置作用域(scope)的不同決定該設定的優先度。

在VSCode裡，設定檔(Settings)的作用域(scope)分為：

1. User Settings: 使用者設定，這裡設定檔為全域(global scope)，會影響所有vscode開啟的window的編輯器。
2. Workspace Settings: 工作區設定，在工作區(workspace)底下的.vscode或.code-workspace資料夾底下的設定。當工作區配置和使用者設定到同一個設定選項時，VSCode會以工作區對該專案的特定配置為主。

當我們使用VSCode打開一個專案資料夾，VSCode會默認該專案資料夾的root folder底下為一個工作區，我們也可以使用multi-root workspace的功能同時開啟多個工作區。默認情況下，VSCode會抓取.vscode資料夾下面的設定檔案，當使用multi-root workspace的功能時，vscode則是會抓取.code-workspace

VSCode的設定檔不只有settings.json一種，也有用於debug功能的debug.json、用於簡化termimal命令的task功能設定...等等，底下我們會先以settings.json的設定為主。

Settings設定介面介紹

讓我們來看一下settings的功能，如果您是mac的使用者，使用⌘(command)+,的快捷鍵，或於左上角依次選取Code > Preferences > Settings後，可以打開全域的使用者設定。

Windows或linux的使用者請依次選取 File > Preferences > Settings 打開設定。

選取settings選項後，我們順利進入到了設定介面。

在settings頁可以看到，設定頁提供了user與workspace兩個tab，點擊可以查看全域與當前工作區裡套用的設定，並對設定進行修改。

設定依種類分為Commonly Used、Text Editor、Workbench、Feature、Application與Extension幾大類。使用者安裝的Extension擴充套件提供的設定選項會呈現在extension的部分供使用者設定extension。

• 編輯設定檔案

在VSCode的設定頁的UI非常貼心，讓使用者在settings設定頁能夠以Input、Dropdown、CheckBox三種元件來設定，並且對設定都有詳細的說明。我們可以透過GUI元件來修改settings.json，試著動手改變一下設定吧，因為地方實在太過簡單，這裡並不多贅述。

當修改完設定了，可能有讀者會有個問題，修改完後的settings.json長什麼樣子呢? 有沒有辦法看到?

底下，我們根據不同scope的設定檔的開啟方法。

• 打開User(Global)的setttings.json

在setttings頁面，我們可以透過點擊右上角右邊數來第三個的icon，進入當前的settings.json，並透過修改json進行設定。

進入user settings.json可以發現, 有之前提到的workbench的namespace底下的設定，也有在安裝的extension的設定(如果讀者的VSCode有安裝額外的extension的話)，這裡的extension的namespace就是在Extension專案裡的package.json底下的contribution的configuration裡設定的，之後幾天我們會再做詳細的說明。

• 查看workspace(Local)底下的settings.json

點擊settings頁面的workspace的tab，跟上面一樣選取右上角右邊數來第三個icon，即可進入。

右上角右邊數來第三個icon後，進入workspace內的settings.json。

• 查看VSCode預設的settings.json

當我們打開VSCode，編輯器會先套用默認的設定，再依我們的user settings跟workspace依次覆蓋，因此我們在剛才的user底下的settings.json裡的config跟我們ui上實際呈現的設定選項相比會少了很多。

現在，讓我們查看VSCode預設的默認設定吧！首先，讓我們像昨天一樣打開Command Palette，輸入Preferences吧！

Tips: VSCode內建了一系列選項，讓我們快速打開及編輯各種設定檔，這些命令都可以在Command Palette透過Preferences這個關鍵字查詢到。

輸入Preferences之後我們可以看到Preferences: Open Default Settings(JSON)這個選項，讓我們啟動它吧！

現在，我們已經進入defaultSettings.json了

我們可以看到每個設定上都清楚寫上了註解說明設定的功用，身為一個VSCode編輯器的使用者，是不是真的很幸福呢！

在VSCode裡面，只要我們有基本的概念，對於各種設定的使用是可以很容易的舉一反三的，請務必動手玩玩看。

結語

好啦，講了這麼多，大家應該都對使用者及工作區有了更多的了解呢，之後的extension實戰我們會再碰到user settings跟extension相關的設定，到時候就可以說明得更詳細了。

最後，這裡附上跟今天相關概念的官方文件連結，方便有心的讀者深入了解相關細節。因為本系列不是專門介紹如何使用VSCode編輯器，有些細節還是得割愛，這部分就留給讀者在使用IDE中探索囉！

希望今天的說明有助您快入掌握VSCode的settings的觀念，我們明天見，掰掰！

本日參考文件

• settings

• multi-root workspace