Visual Studio Code 極速上手指南

Editor

是時候換編輯器了！

前言

Sublime Text, Visual Studio Code 搜尋熱度的趨勢變化 - 全球，2016/4/14 - 2018/10/18 - https://g.co/trends/9WLyM

上面這張圖是 Google Trends 統計的結果，我設定的資料起始時間為 VS Code 1.0 版發佈日，你可以看到 VS Code 的趨勢 (紅線) 一直往上，Sublime Text (藍線) 則是持平到略微向下；VS Code 今年 (2018) 初超越了 Sublime Text，這個趨勢說明了什麼，就是 Sublime Text 並沒有變差，只是進步 (更新) 的速度變慢了，而 VS Code 從我去年使用時的不太好用 (穩定度的部分) 進步到很好用，只花了一年的時間，整體而言已經很穩定，本身啟動速度快、開啟檔案快、處理 1MB JSON 檔案不會再卡住或當掉、擴充工具已經多到能滿足需求、除錯工具依舊非常令人驚艷，如果花點時間設定工作環境，已經可以達到接近 IDE 的地步了。

Visual Studio Code (Editor) 和 Visual Studio (IDE) 兩者是沒有任何關係的，只是兩者都是由微軟開發、維護。

Atom 和 VS Code 同樣是用 Electron 框架開發的，也一樣是開源，剛出來時我有試用過，不過感覺上有點笨重，不太有編輯器應該有的輕盈，現在可能有改善。另外，Atom 在套件 (aka 外掛、擴充工具) 上目前似乎沒有 VS Code 來的廣，界面也是 VS Code 好看好找些，你可以自己看看 (Atom packages、VS Code Extensions)。

Sublime Text 就不用我多說了，當時可是好用到讓我願意花美金 $70 買下授權。基本上關於編輯的功能本身就很棒，以當年的情況來說，真的是最出色的編輯器。最近突然想換掉它的最大原因，是當我在 4K 螢幕上要看 Sidebar 上的檔案名稱及 Tab 上的頁籤名稱時，字真的小到不行，雖然我花了一點時間找到可以調整字型大小的設定檔，但是依舊很難看，調整也很沒效率，想想看我在轉換筆電和外接螢幕的不同解析度上寫 Code 時，會怎樣？

所以當我聽到 VS Code 1.28 版在九月發佈時，就打算再次試用看看。當然第一件事就是去找它如何調整界面的文字大小，竟然只要快速鍵 cmd + = 或 cmd + - 即可，而且還是整個界面等比例放大、縮小，不會有任何間距看起來怪怪的問題，當下我就決定要來認真研究它了。(註：編輯區的文字大小可以藉由設定檔調整，但是在縮放界面時也會同時跟著縮放)

Sublime Text 沒有不好，但是它停滯了；VS Code 做得更好，加上它是開源軟體的關係，進化的速度簡直是用飛的，1.0 版也不過兩年前才發佈，現在它不只迎頭趕上，而且超越了。

這份指南不會是 VS Code 的全部，它是我最近研究的資料整理，希望可以幫助你快速上手。官網上可以找到更詳細的資料。

安裝

你可以在 VS Code 官網找到 Windows, Mac, Linux 的下載點，下載後即可安裝。

操作界面

活動列 (Activity Bar)

預設會有 5 個 Activity 按鈕，

1. 檔案總管 (Explorer)：可以在這裡管理所有的檔案及資料夾。
2. 搜尋：針對全部的檔案的內容搜尋。
3. 原始檔控制：使用 Git 做版本控制。
4. 偵錯：編輯器少有的偵錯工具，必須安裝相對應的偵錯工具才能在該程式語言使用。
5. 擴充工具：可以直接尋找想用的擴充工具，非常方便。

你也可以安裝其他的活動按鈕。

如果你不想看到它，可以在 檢視 > 外觀 > 隱藏活動列 將其隱藏；因為我覺得活動列有點礙眼，所以是將其隱藏，然後對每個活動按鈕設定快速鍵。

側邊欄 (Side Bar)

當你選擇一個 Activity，它的內容就會顯示在側邊欄，例如檔案總管就會顯示所有的檔案及資料夾。

你可以將 Activity Bar 及 Side Bar 移到右邊：檢視 > 外觀 > 將提要欄右移。側邊欄也是可以單獨隱藏的，快速鍵是 cmd + b (Windwos: ctrl + b)。

狀態列 (Status Bar)

顯示目前開啟的專案或檔案的資訊。

編輯區 (Editor)

寫程式的地方。你可以開啟多個檔案，一個檔案一個頁籤，也可以分割顯示。

面板 (Panel)

VS Code 內建終端機面板，這樣就不需要離開編輯器了，很方便。另外還有顯示錯誤的「問題」面板、「輸出」面板及「偵錯主控台」。

可以使用 cmd + j (Windows: ctrl + j) 來顯示或隱藏。

將界面改為繁中版

如果你下載的是英文版，想將其改為繁中版本或其他語言版本，可以安裝語言擴充工具：

1. 安裝擴充功能：cmd + shift + p 輸入 ext inst 在 Sidebar 中輸入 zh-TW 選擇 Chinese (Traditional) Language Pack for Visual Studio Code (VS Code 的中文(繁體)語言套件) 按下 Install 然後重載。
2. cmd + shift + p 輸入 display language => 修改成 "locale":"zh-TW" 儲存後重開就完成了。

日後只要修改 locale.json 檔，就可以輕易切換成任何已安裝的語系，是不是超方便。

界面縮放

這就是我目前最需要的功能，一個快速鍵就能快速縮放界面的大小，在筆電螢幕上就縮小，在外接螢幕上就放大，調整非常方便。

界面縮放快速鍵：cmd + = 及 cmd + -

將 code 指令加入 shell

cmd + shift + p 輸入 shell command install ，執行後就可以在終端機中使用 code 指令快速使用 VS Code 開啟檔案或目錄。要移除只要輸入 shell command uninstall 即可。

檔案管理

單一檔案

你可以用 VS Code 開啟任意檔案來編輯，但是這時你會缺少 workspace 的相關功能，例如檔案管理及版本控制等。

專案

VS Code 沒有「建立新專案」這種功能可用，因為它不是 IDE，不是專為某一種專案設計的工具，每一種專案的資料夾結構並不相同，所以你必須自行建立自己的專案；但是不管是哪一種專案，它總是會在一個主要資料夾之下，因此你可以在概念上將一個主要資料夾視為一個專案。

建立 (概念上) 專案的幾個方法：

• 將一個資料夾拖拉進 VS Code
• 在 VS Code 的檔案總管點選「開啟資料夾」
• 選單 檔案 > 新增資料夾至工作區

註：以下文章只要提到專案，就是在指主資料夾。

工作區 (Workspace)

如果說專案是檔案及子資料夾的集合體，那工作區就是專案 (主資料夾) 的集合體；一個工作區預設會有一個專案，這時可以將工作區視同為該專案，但是，你也可以在一個工作區中加入多個專案，這時 VS Code 的檔案總管的顯示方式會調整為顯示工作區的名稱及其下包含的專案名稱，請看下圖的差異：

圖 1 ：工作區中只有一個專案

圖 2 ：工作區中有兩個專案

當只有一個專案存在工作區中，該專案資料夾的名稱預設就是工作區的名稱；但是當一個工作區存在兩個以上的專案時，工作區名稱預設為「未命名」，你可以在選單中：檔案 > 另存工作區為... 來儲存該工作區。

建議的作法是只將有相關性的專案放在同一個工作區，否則最好保持一個工作區只有單個專案就好。因為一個專案就是一個主資料夾，如果日後想要移動專案到別的目錄下，只要將該主資料夾移動過去，然後用 VS Code 開啟該資料夾即可。

任務 (Task)

如果你用過 IDE ，當要執行程式時，可能會去按那個綠色的執行按鈕 ▶️；或是寫網頁時，常常要在終端機上輸入執行指令。在 VS Code 中，你可以將其設定為任務 (Task)，之後只要執行該任務即可，省去重覆輸入指令的麻煩，如果再設定個快速鍵的話，就可以非常有效率的做到執行程式這件事。

假設有個 Javascript 專案：

hello-js (專案名稱)
  /index.js (只有一個檔案)

我們可以在終端機中執行 node index.js 來執行程式。

現在，我們來建立一個任務：

1. cmd + shift + p 輸入 config task
2. 選擇 從範本建立 tasks.json 檔案 > Others

完成後，會在專案資料夾下的 .vscode 資料夾下產生一個 tasks.json 檔，修改內容後如下：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Run",
            "type": "shell",
            "command": "node",
            "args": [
                "index.js"
            ]
        }
    ]
}

這樣就完成任務的設定，可以執行了：

1. cmd + shift + p 輸入 run task
2. 選擇 Run (這是我們剛剛設定的任務的 label)
3. 繼續按 Enter 就會執行

這樣雖然不需要重覆打指令，可是還是需要 3 個步驟才能執行；你只要利用後面會提到的自定快速鍵，就能解決這個問題。

註：tasks.json 是針對專案而設定。

偵錯

要使用偵錯功能必須先安裝相關的擴充工具，然後建立組態檔，檔案會在 .vscode/launch.json，內容如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/index.js"
        }
    ]
}

組態檔設定完成後，就可以在偵錯側選單內按下綠色執行鈕，結果會顯示在「偵錯主控台」面板。

操作示範如下：

快速鍵設定

自定快速建

我自己已經先設定了兩組快速鍵，ctrl + r 用來執行 Run 任務，ctrl + d 用來執行 Debug 任務，這樣之後在任何的專案中，我只要建立一個名為 Run 的任務及 Debug 的任務，就會自動被快速鍵觸發而啟動。

快速鍵的設定檔為 keybindings.json ，位置在 (Mac) ~/Library/Application Support/Code/User ，基本上你不需要從這裡打開它，只要 cmd + shift + p 輸入 shortcuts file 即可，另外你也可以選擇 shortcuts 以非文字檔案的方式開啟，請看下圖：

圖 3 ：快速鍵設定界面，搜尋字串可以是指令或繫結關係，例如：run task 找指令；ctrl + r 找繫結關係；點選指令左邊的「筆型」符號即可輸入快速鍵。

圖 4 ：以文字檔開啟，左邊是系統預設值，你無法對它做任何修改，必須複製一份放到右邊的 keybindings.json 中才能修改；系統預設值等於是一個很好的參考資源，可以方便瞭解有哪些指令可以做設定。連按兩次 cmd + k 可以快速建立一組新的快速鍵，省去打字。

以下會列出一些我常用的快速鍵，有些會調整為我自己喜歡的設定。

界面

• 界面放大：cmd + =
• 界面縮小：cmd + -
• 開關終端機面板：ctrl + `
• 開啟更多終端機面板：ctrl + shift + `；可以搭配 cmd + \ 將第二個終端機開在右邊，使用 cmd + alt + ⮕ 或 cmd + alt + ⬅ 來切換左右終端機。
• 開關 Sidebar：cmd + b
• 開關 Panel：cmd + j
• 顯示問題面板：cmd + shift + m

編輯

• 智能感應提示：ctrl + space

• 移動到符號 (例如函式或變數名稱)：cmd + shift + o

• 快速開啟檔案：cmd + p 直接輸入檔案名稱；

  或是輸入 ? 顯示說明；: + 數字 到第幾行；@ 到符號

• 顯示程式碼定義：cmd + 滑鼠指上去[方法名稱] ，按下滑鼠則前往；

  cmd + option + click 開在右窗格。

• (檔案總管中的檔案) 將檔案開啟在右窗格 ：option + click

• 格式化文件：shift + option + f => 自定為 ctrl + f

• 折疊程式碼：cmd + option + [ 或 cmd + option + ]

• 建立折疊區塊：使用 #region ... #endregion 包圍程式碼，不支援的程式語言，必須使用註解。例如：

  //#region 
  const name = 'Tony';
  hello(name);
  //#endregion
  

  這樣你就能對這個區塊做折疊的動作。

• 刪除行：cmd + shift + k => 自定為 cmd + backspace

• 連接行：ctrl + j

• 往下插入新行：cmd + enter

• 往上插入新行：cmd + shift + enter

• 移動行，往上：option + ⬆

• 移動行，往下：option + ⬇

• 複製行，游標不動，新行往下：option + shift + ⬆

• 複製行，游標跟隨新行往下：option + shift + ⬇

• 重新命名符號 (重構函式或變數名稱) ：F2 => 自定為 cmd + r

• 提取敍述成為方法 (先選取一段敍述)：cmd + .

選取

• 多重游標：option + click
• 多重游標 (直欄) ：shift + option + click
• 多重游標 (只使用鍵盤) ：cmd + option + ⬆ 或 cmd + option + ⬇
• 多重游標 (先選取一段敍述) ：option + shift + i
• 多重選取 (一次全選頁面中相同的字串）：cmd + shift + l
• 多重選取 (每按一次就多選一個相同的字串) ：cmd + d
• 選取行 (重覆可向下持續選取)：cmd + i
• 擴展／縮小選取範圍：ctrl + shift + cmd + ⮕ 或 ctrl + shift + cmd + ⬅ => 自定為：ctrl + ⮕ 或 ctrl + ⬅

前往

• 前往左、右頁籤：cmd + option + ⬅ 、 cmd + option + ⮕
• 移到上一次編輯處：ctrl + - ，反方向：ctrl + shift + - 可用於兩個編輯位置的快速來回切換。
• 前往某個位置 (需安裝擴充工具 Jumpy)：cmd + option + j
• 列出目前開啟的檔案並前往：ctrl + tab ，ctrl 按住不放，每按一次 tab 自動選擇下一個檔案。
• 游標跳至對應的括號：cmd + shift + \

搜尋

• 跨檔案搜尋 (全專案)：cmd + shift + f
• 檔案內搜尋：cmd + f
• 檔案內搜尋並取代：cmd + option + f

偵錯

註：必須先建立偵錯組態檔。

• 新增中斷點：F9 => 自定為 ctrl + .
• 啟動偵錯：F5 => 自定為 cmd + l
• 啟動但不偵錯：ctrl + F5 => 自定為 cmd + ctrl + l

程式碼片段

cmd + shift + p 輸入 config snippet，你可以選擇設定全域的程式碼片段或只針對此專案。

以下為一個範例 javascript.json：

"Console log": {
 "prefix": "log",
 "body": "console.log('$1');",
 "description": "Log output to console"
}

當你在 javascript 的文件中，輸入 prefix 所設定的文字時，會觸發該程式碼片段，如果有多個的話，可透過 description 的內容來辨別。body 是程式碼片段的本體，$1 的數字可以往上增加，代表程式碼片段被插入後，游標的第一個位置，按下 tab 鍵時，會跳往 $2 的位置 (如果有設定的話)。

擴充工具

同樣一個概念但是說法不太一樣，Plugins 是外掛、Packages 是套件、Extensions 是擴充工具，都是做為針對主要工具的特定功能的輔助延伸。

開啟擴充工具 Sidebar ，可以直接搜尋擴充工具的名稱，如果你不知道要裝什麼，可以輸入 @recommended ，VS Code 就會以你目前的專案給你建議的擴充工具；或是點選右上角的 … 圖示，有其他選項可用。

擴充工具可以「安裝」「解除安裝」「啟用」或「停用」，有時候你並不想解除安裝，但是又暫時用不到，就可以選擇停用該擴充套件。

專案用建議擴充工具設定檔

當你在團隊工作的時候，要讓其他人快速找到專案相關的擴充工具，可以在該專案下建立「建議的擴充工具」設定檔，這樣其他人只要輸入 @recommended 除了 VS Code 的建議外，會多出一個「工作區建議」的擴充工具清單，這樣就能很快找到團隊在使用的擴充工具了。

cmd + shift + p 輸入 config recommend ，會在專案下建立 .vscode/extensinos.json 檔案。每個擴充工具會有一個唯一的 ID，在擴充工具的名稱旁邊，將它複製下來加入檔案中：

"recommendations": [
 "ms-ceintl.vscode-language-pack-zh-hant",
 "pkief.material-icon-theme",
 "equinusocio.vsc-material-theme"
]

幾個推薦的擴充工具

由於大家喜好不同，而擴充工具也很好找，我就只推幾個好用的，其他就留給你自己去挖寶吧～

• Material Icon Theme - pkief.material-icon-theme
• Material Theme - equinusocio.vsc-material-theme
• Cobalt2 Theme Official - wesbos.theme-cobalt2
• advanced-new-file - patbenatar.advanced-new-file
• Markdown All in One - yzhang.markdown-all-in-one
• jumpy - wmaurer.vscode-jumpy

另外，可以參考 awesome-vscode 上提供的資源。

本文網址：https://blog.tonycube.com/2018/11/visual-studio-code.html
由 Tony Blog 撰寫，請勿全文複製，轉載時請註明出處及連結，謝謝 😀