iT 邦幫忙鐵人賽 DAY 2~4 快速上手

要寫一個軟體的教學文章，不免俗的總要來個安裝教學，但是我只想要提我覺的值得注意的部份，另外，由於我平常的使用環境是 Windows 和 macOS，所以往後 Linux 相關的內容基本上會比較少。

安裝 VS Code

要安裝 VS Code，你必須要前往 https://code.visualstudio.com/ (opens new window) 下載，理論上，網頁會自動根據你的 User Agent 來自動選擇版本，當然你也可以按右邊的下拉選單來選擇其他平台或是 Insiders 版本。

備註：Insiders 版本，又可稱為「搶先體驗版」或「不穩定版」，這個版本會每天更新，裡面會包含最新被合併的功能，當然也可能會有比較多的程式臭蟲 (bugs)，這個版本和穩定版本是分開的，不會互相影響。如果你是真的要開發軟體的話，建議你還是使用穩定版來開發。

如果你是 Windows 的使用者，在安裝過程中你會看到這個畫面：

我非常建議你要把下面那四個都勾選，前兩個是讓你可以對檔案或是資料夾按右鍵直接在 VS Code 中打開，第三個是自動將 VS Code 註冊為所有支援檔案類型的預設程式，最後一個則是讓你可以在命令提示字元 (cmd.exe) 或是 PowerShell 中可以用 code 指令來開啟 VS Code。

VS Code 介面簡介

VS Code 的定位是在程式碼編輯器，所以不像 IDE 會給你很複雜的介面，第一次開啟 VS Code 的時候，你會看到歡迎頁面如下：

你可以點選「介面概觀」來看到 VS Code 的介面介紹：

備註：由於我是選用 Sublime 的鍵盤快速鍵，所以可能會和你顯示的快捷鍵有所差異，所以你可能需要自己點選這個「介面簡介」來參考快捷鍵。

從畫面左邊開始（也就是側邊欄）由上到下依序你可以看到：

1. 檔案總管
2. 跨檔案搜尋
3. 原始程式碼管理
4. 啟動並偵錯
5. 管理擴充功能

備註：底下的第 6 個和第 7 個圖案是因為我裝其他擴充功能跑出來的，在此先忽略不提。另外，你還可以用 來切換側邊欄。

在畫面下方的部份由左到右依序是：

1. 底下的藍色狀態列是「檢視錯誤和警告」
2. 整合式終端機 (這個要用快捷鍵打開，按鍵就是 TAB 上面的那個按鍵)
3. 顯示通知

在畫面中間的部份只有「尋找及執行所有命令」。

備註：在以上介紹的東西中，我最常用的就是「整合式終端機」 和「尋找及執行所有命令」，這兩個快捷鍵特別值得背下來。

工具和語言

VS Code 本身就有內建 JavaScript 的支援，你可以按這邊來安裝更多你想用的程式語言支援。

設定及按鍵對應

你可以透過打開「尋找及執行所有命令」 然後輸入 keyboard，然後找到「鍵盤快速鍵參考」來下載 VS Code 預設快捷鍵的參考 PDF。

在此附上所有平台的網址：

• Windows (opens new window)
• Linux (opens new window)
• macOS (opens new window)

備註：由於我之前最熟悉的編輯器是 Sublime，所以我會選擇套用 Sublime 的快捷鍵，日後的教學文章我也都會使用 Sublime 的快捷鍵設定，基本上這個 PDF 裡面的快捷鍵很多都不會跟我日後的文章一樣。

如果你之前用過或是熟悉其他的編輯器，你可以讓 VS Code 使用你熟悉的設定以及快捷鍵。當你點選你想要用的快捷鍵設定後，將會自動安裝特定的擴充功能。

或者你也可以點選「其他」來找更多其他人做的快捷鍵擴充功能。

假設我在此前往 Sublime 的擴充功能說明頁，我就可以看到作者所給予的更多有關這個擴充功能的說明如下：

另外，我可以點到「貢獻」分頁來看到完整提供的快捷鍵清單如下：

備註：

1. 不用強求在這個時候記住所有快捷鍵（我想應該也不會有人想這麼幹），日後的文章如果有提到相關功能的時候，我會盡量提供相對應的 Sublime 快捷鍵。
2. 如果你還沒有自己熟悉的快捷鍵設定，那麼我也強烈推薦你選擇使用 Sublime 快捷鍵設定，因為很多地方都支援這種快捷鍵設定，例如 Atom 和線上 Markdown 編輯器 hackmd (opens new window)。
3. 往後的文章中，我都不會再特別強調我是使用 Sublime 的快捷鍵設定，挑自己習慣的即可。