iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
0

大家好,今天是鐵人賽第三天,我們來介紹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設定頁能夠以InputDropdownCheckBox三種元件來設定,並且對設定都有詳細的說明。我們可以透過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的觀念,我們明天見,掰掰!

本日參考文件



上一篇
Day02 | VSCode使用者介面概覽
下一篇
Day04 | Command命令,一切VSCode操作行為的根源
系列文
自己用的工具自己做! 30天玩轉VS Code Extension之旅36
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言