介面總覽

vs code 的介面長這個樣子：

（圖一：基本介面）

（圖二：開啟面板）

相關圖示意義：

• A：活動列，Activity Bar。
  • 請視為 vs code 的書籤，提供主要功能的捷徑。
  • 部分 extension 安裝完成後，會自動新增圖示到活動列上。
• B：提要欄位，Side Bar。
  • 顯示活動列上的快捷鍵，其相關的操作區塊。
• C：編輯器，Editor。
  • 沒什麼好多說的，主要寫程式碼的區塊。
• D：狀態列，Status Bar。
  • 一個可以提供檔案或是專案的資訊，讓使用者可以理解的開發狀態。
  • 例如：
    • 當下 git 的分支名稱。
    • 開啟面板並顯示問題。
    • 編輯器畫面內，目前游標在第幾行、第幾欄。
    • 縮排採用的格式，上述圖表示使用空白鍵，並以兩個空白鍵為一個縮排單位。
    • 編碼格式。
    • 換行採用的格式，LF（UNIX 家族） 或是 CRLF（Windows 家族）。
    • 目前編輯器使用的語言模式。
    • 意見回饋。
    • 通知。
    • 部分 extension 會添加資訊到此。
• E：面板，Panels。
  • 平常是隱藏的，開啟方法有：
    • 點擊狀態列的快捷鍵。
    • 滑鼠移到視窗的最上方，點擊檢視 -> 任意點擊四個畫面名稱的某一個，就可以開啟。
    • 快捷鍵：ctrl + ~。
  • 內建四個畫面：
    • 問題：語法有錯誤時，會在這顯示。如果有使用 Lint，那錯誤數量非比尋常。
    • 輸出：顯示程式檔的執行結果。常見的做法是搭配使用 extension: Code Runner。
    • 偵錯主控台：使用 vs code 內建的 Debug 模式，其結果會顯示在此。
    • 終端機：就是 terminal（UNIX 家族）或是 powershell（Windows 家族），直接整合到 vs code 裡，可以讓工程師少一個視窗。

編輯器畫面

數個視窗

跟 Atom 類似，使用者可以開啟數個編輯器進行編輯，或是在同一個編輯器內，開啟多個分頁進行編輯。

打個比方，就當作是使用瀏覽器就對啦。
瀏覽網頁時，可以：

• 一個瀏覽器內開啟很多分頁。
• 開啟很多瀏覽器，每個瀏覽器有數個分頁。

上述例子，將瀏覽器替換成編輯器即可。

版面配置

這點個人覺得很好用，可以選擇要怎麼排列數個編輯器。
最快的體驗方式，只要：

• 滑鼠移到視窗最上方，點擊檢視。
• 滑鼠移動到編輯器版面配置。
• 中間區塊，是常見的配置選擇。

如果只想要開啟並排的兩個編輯器，那只需要：

• 將滑鼠挪到右上方。
• 點擊此圖示
  

最後一個開啟方法，就是按住位在檔案總管內的檔案，然後拖進編輯器畫面。此時，檔案位在：

• 上
• 下
• 左上
• 右上
• 左下
• 右下

就會自動調整版面，顯示多個編輯器。

至於使用編輯器時彼此之間的視窗大小，是可以調整的，只需要將滑鼠挪到視窗的邊緣，按住邊緣後就可以拖弋、滑動來調整大小。

縮圖，Mini map


提供程式碼的總覽，讓工程師可以快速理解程式碼的樣貌外，也具備類似導航的功能，可以快速前往程式碼的某個區塊。

階層連結，Breadcrumbs

另一個具備導航功能的區塊，從檔案所在的位置開始，最後會跑到游標所在位置，可能是變數或是函式。
這個功能類似活動列選擇檔案總管後，在提要欄位的最下方有大綱。兩者都能幫助工程快速前往程式碼的某個區塊。

預覽模式，Preview Mode

點擊檔案總管的檔案時，檔案會開啟在新分頁上。這時，注意分頁的名稱，會是斜體字，表示使用預覽模式瀏覽這份檔案。
這時候隨意點擊檔案總管內的任一檔案，該分頁將改成顯示新點擊的檔案內容。

預覽就是快速瀏覽的概念，檔案不需要保留在分頁上。

要變成編輯模式的方法有三個：

• 修改檔案，就算加空格也行。
• 快速點擊分頁的名稱兩下。
• 快速點擊位在檔案總管內，檔案兩下。

Zen Mode

使用後 vs code 只會留下編輯器的區塊，其他完完全全消失了。

提供給想專注的工程師。

開啟方法是：

• 滑鼠移到視窗最上方，點擊檢視。
• 滑鼠移動到外觀。
• 點擊 Zen Mode。

命令選擇區，Command Palette

提供類似終端機、CMD等指令化的操作方式，對於習慣指令的工程師而言，會是個方便的操作區塊。

開啟方式很簡單，按下 F1 即可開啟。

刪除輸入欄位的 >，就會變成導航模式，輸入要開啟的檔案名稱，相關的檔案就會顯示。

鐵人賽狀態

輸入 ?，出現說明告知可以使用的指令有哪些。

結論

以上的設定，大部分都可以在滑鼠移到視窗最上方，點擊檢視內看到，多多嘗試後，會更加熟練 vs code 的介面。

介面的部分細節要去設定頁面調整，因此，之後會用一天的篇幅，講述設定頁面可以做些什麼。