Visual Studio Code 的安裝說明，以及推薦的延伸模組 (Windows/Linux)

微軟開發的 Visual Studio Code (簡稱 VS Code) 是一套非常熱門的「編輯器」! VS Code 跨平台，且開放原始碼。它雖然僅是一個輕量版的編輯器，卻可經由安裝延伸模組來支援程式碼語法突顯、偵錯、自動補全、重構、Markdown...等琳瑯滿目功能，打造你夢想中的 IDE (整合開發環境)。

VS Code 預設僅支援 JavaScript、TypeScript、CSS、HTML，同樣能透過下載延伸模組來支援 Python、C/C++、Java、Perl、Go... 等其他程式語言。

安裝 VS Code

下載網址:

https://code.visualstudio.com/Download

for Windows:

下載 .exe 執行檔來安裝...沒什麼特別要寫的。

for RHEL/CentOS Linux:

下載 .rpm 檔，安裝指令:

$ rpm -ivh Filename.rpm

執行 VS Code:

$ code

for Ubuntu Linux:

下載 .deb 檔，安裝指令:

$ dpkg -i Filename.deb

執行 VS Code:

$ code

Web Editor:

如果你什麼都不想要裝，那麼還有 Web 版的 VS code 可直接使用: https://vscode.dev/，可編輯你電腦中的檔案。

同時在這網站也可以讓你透過遠端通道 (Tunnels) 存取你電腦上的 VS Code 與檔案。

本站推薦的 VS Code 延伸模組

for Python:

Python (Microsoft)
Pylance (Microsoft): Python 語言伺服器。
Black Formatter: Black 是用來自動排版 Python 程式碼的格式器 (Formatter)，建議用這個取代語法較為寬鬆的 Autopep8。
autoDocstring: 快速產生 Docstring。

for Perl:

Perl Navigator: 即時程式補完、即時語法檢查、即時錯誤訊息、前往定義、自動排版 (格式器)...
Perl Debug Adapter: 執行與偵錯、檢視變數、中斷點... (Debug Adapter installation)
Perl Completions: 提供常用的程式碼片段 (Snippets)、即時程式補完
更詳細、完整的介紹如何在 VS Code 建立 Perl 的程式開發環境，請參考本站的這篇教學。

加強程式功能:

Code Runner: 一鍵執行程式或選取範圍的程式碼，支援超過 50 種程式語言 (不過你必須自己安裝編譯器)，安裝後工具列會多出一個「執行」圖示，也可用快速鍵: 按 Ctrl + Alt + N 執行程式，按 Ctrl + Alt + M 停止執行 (作者說明)。如果執行 Python 程式時的中文全都變成亂碼，可於 settings.json 加入以下的編碼設定:
```
"code-runner.executorMap": {
    "python": "set PYTHONIOENCODING=utf8 && python -u",
}
```
IntelliCode API Usage Examples: 幫你查詢函式在網路上的使用範例，可惜只支援 Python、JavaScript、TypeScript。
Error Lens: 將偵錯器診斷出來的程式錯誤，直接顯示在程式行的後面。

AI

Tabnine: 透過 Tabnine 的大數據分析你的程式，於編輯器中提供你可能要寫的程式碼，接近真正的「自動完成」，幾乎支援所有的程式語言。要註冊免費的 Tabnine 帳號才能使用。
ChatGPT: 透過與 ChatGPT 的交談取得程式碼，輔助你寫程式。免註冊，也可綁定 ChatGPT 的 API key。
ChatGPT - EasyCode: 透過與 ChatGPT 的交談取得程式碼，輔助你寫程式。須註冊 EasyCode 帳號。

網頁/圖片編輯:

Live Preview: 在你的電腦啟動一個 Web 伺服器，當你在 VS Code 編輯的網頁時，可以在 VS Code 的分頁「即時」預覽網頁的效果。與 Live Server 擇一安裝即可。
Live Server: 在你的電腦啟動一個 Web 伺服器，當你在 VS Code 編輯的網頁按「儲存」時，會在瀏覽器中自動重新載入網頁內容。與 Live Preview 擇一安裝即可。
Auto Rename Tag: 自動重新命名 HTML 的 Tag 名稱。
CSS Peek: 於分割視窗中查看外部的 CSS 的定義。
HTML CSS Support: 自訂自動補完的 CSS Class。如果你想自動補完 Bootstrap 的 CSS，可於 settings.json 加入:
```
  "css.styleSheets": [
    "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  ]
```
SVG: 加入 SVG 圖片的預覽及編輯功能。
Image preview: 在程式行左側的邊欄顯示圖片的縮圖，以及在提示訊息中預覽圖片。

顯示/美化:

Chinese (Traditional) Language Pack: 正體中文語言套件。
One Dark Pro: 不錯看的深色佈景主題。
indent-rainbow: 用不同顏色修飾程式碼縮排的層級。
Highlight Line: 突顯你游標的所在行。

Markdown:

Markdown Preview Enhanced: 在 VS Code 直接預覽 Markdown 文件，支援 Latex 語法的數學公式，以及 Mermaid 流程圖 (簡介)。
Paste Image: 在編輯 Markdown 文件時，按 Ctrl + Alt + V 即可將剪貼簿中的圖片貼到該文件的資料夾，並且自動於編輯器中插入圖片語法: ![](Filename.png)，這些動作一氣呵成，能節省我們許多寶貴的時間。建議於 settings.json 加入以下的設定:
```
"pasteImage.path": "${currentFileDir}/images"
```
這樣可以將貼上的圖片集中於 images 資料夾
Office Viewer(Markdown Editor): 此模組整合了很多功能，包括:
- 在 VS Code 直接檢視 Office、pdf 檔案，以及 SVG 圖片
- 一個 Markdown 文件的 WYSIWYG 編輯器
- 兩個深色佈景主題
- 一個檔案圖示主題

管理:

Todo Tree: 整理程式備註中的待辦事項，可用的關鍵字: BUG, TODO, FIXME, HACK, XXX, [ ], [x] (除了 XXX 看起來怪怪的之外，其它關鍵字的含義應該都能理解。而 XXX 的意思是說「程式碼似乎怪怪的，但一時之間不知道哪裡怪?!有時間的話再來討論或重寫，沒時間的話就...」)。
Bookmarks: 增加「書籤」面板及功能，可將檔案的特定位置加入書籤。快速鍵: 按 Ctrl + Alt + K 新增書籤，按 Ctrl + Alt + J / L 切換書籤。
Favorites: 增加「我的最愛」面板及功能，讓你將檔案加入我的最愛。

SVN 版本控制:

TortoiseSVN Helper: 如果你有安裝 TortoiseSVN，這模組會把 TortoiseSVN 的功能整合在滑鼠右鍵選單，幫你呼叫 TortoiseSVN 的圖形介面來使用 (for Windows)。
SVN: 這模組可在 VS Code 的側邊欄檢視檔案提交的 Log，也可讓你用「指令」操作 SVN。你的電腦必須安裝 TortoiseSVN 的命令列工具 (for Windows)。
rabbitvcs-svn: 你的主機需安裝 RabbitVCS (for Linux)。

其它:

Office Viewer(Markdown Editor): 這模組整合了很多功能，包括:
- 在 VS Code 直接檢視 Office、pdf 檔案，以及 SVG 圖片
- 一個 Markdown 文件的 WYSIWYG 編輯器
- 兩個深色佈景主題
- 一個檔案圖示主題
Code Spell Checker: 英文拼字檢查。
Insert Numbers: 插入連續數字。
Comment Translate: 將程式中的「註解」丟給 Google、Bing 或 Baidu 進行即時翻譯。

VS Code 常用的鍵盤快速鍵

系統與偵錯

Ctrl + K → Ctrl + S: 顯示全部的鍵盤快速鍵
F5: 整體執行
F1 (或 Ctrl + ⇧Shift + P 或 Ctrl + E 或 Ctrl + P 或 Ctrl + T): 整合多種搜尋功能，例如:
- 直接輸入文字則搜尋「檔案名稱」來開啟
- 若前置字元以 > 開頭則搜尋「命令」來執行
- 若前置字元以 @ 開頭則搜尋檔案內的「符號」
- 若前置字元以 # 開頭則搜尋「模組」來開啟
- 若前置字元以 : 開頭則移至指定行
- 輸入 ? 查看所有可使用的語法
Ctrl + Tab: 切換開啟的檔案
Ctrl + J: 顯示/隱藏下方面版
Ctrl + B: 顯示/隱藏左側邊欄
Ctrl + Alt + B: 顯示/隱藏右側側邊欄
Ctrl + ＋ / －: 放大/縮小畫面
Ctrl + ⇧Shift + T: 復原最後關閉的分頁
Ctrl + K → Z: Zen 模式
Ctrl + K → Ctrl + T: 變更色彩佈景主題
Ctrl + ｀: 切換到終端機
Ctrl + ，: 偏好設定
Ctrl + W: 關閉分頁
F8: 移至下一個有錯誤的程式行
⇧Shift + F8: 移至上一個有錯誤的程式行

編輯相關

F2: 將變數重新命名
Tab: 於行首按 Tab 會自動縮排。當輸入程式碼時按 Tab 則顯示程式補完提示。
Ctrl + F: 搜尋字串
Ctrl + H: 取代字串
Ctrl + ⇧Shift + F: 在全部的檔案中搜尋字串
Alt + ← / →: 切換游標記憶的位置 (會跨檔案)
Alt + ↑ / ↓: 上/下移動本行
Ctrl + /: 註解/取消註解
⇧Shift + Alt + ↑ / ↓: 向上/下複製本行
Ctrl + K → Ctrl + F: 重新排版選取的程式碼
⇧Shift + Alt + F: 重新排版整個文件
Ctrl + G: 前往指定行
Ctrl + K → Ctrl + Q: 前往上次編輯位置
F12 (或按住 Ctrl + 滑鼠左鍵點選物件): 在新分頁中查看定義 (可按 Alt + ← 返回之前的分頁或游標位置)
Alt + F12 (或按住 Ctrl + Alt + 滑鼠左鍵點選物件): 於分割視窗中查看定義

選取項目

⇧Shift + ↑ / ↓ / ← / →: 擴大選取文字
⇧Shift + Home: 選取行首到游標處的文字
⇧Shift + End: 選取游標處到行末的文字
Ctrl + X: 剪下選取的文字，如果沒選取字串，則剪下一整行

多重游標編輯

Alt + 滑鼠左鍵: 於不同位置加入多重游標 (可於主選單的「選取項目」中，將 Alt 改為 Ctrl)
Ctrl + Alt + ↑ / ↓: 於上一行/下一行加入多重游標
按住滑鼠中鍵，向上/下拖曳: 於拖曳過的多行加入多重游標
選取多行 → ⇧Shift + Alt + I: 於選取行的行末加入多重游標
選取字串 → Ctrl + ⇧Shift + L (或 Ctrl + F2): 選取整份文件中相同的字串，並加入多重游標
選取字串 → Ctrl + D: 快速選取下一個相同字串，並加入多重游標
搜尋字串 → Ctrl + ⇧Shift + L: 選取搜尋到的字串，並加入多重游標

設定檔

你在偏好設定裡做的修改都會儲存到一個設定檔。

檔案位置: %UserProfile%\AppData\Roaming\Code\User\settings.json

偏好設定是每個程式語言都通用的，如果你想讓不同程式語言使用不同的設定，可於設定檔中加入如下的設定:

"files.associations": {
    "*.py": "python",
    "*.py2": "python",
    "*.py3": "python",
    "*.pym": "python",
    "*.pl": "perl",
    "*.pm": "perl",
    "*.cgi": "perl"
 },
 "[python]": {
     // Python 專用的設定
},
 "[perl]": {
     // Perl 專用的設定
},

使用 Tabs (\t) 進行縮排

我是偏好在程式碼中使用「Tabs (\t)」進行縮排的。如果要避免 VS Code 編輯器將 Tabs 轉成空白字元，可於偏好設定中將這兩個選項取消勾選:

Editor: Detect Indentation
Editor: Insert Spaces

等同於在設定檔中加入這兩行:

    "editor.detectIndentation": false,
    "editor.insertSpaces": false,

但問題是，程式語言的格式器 (Formatter) 在重新排版你的程式碼時，仍會毫不留情地將 Tabs 轉成空白字元!! 所以，除非你不使用格式器，否則勸你乾脆放棄這些堅持，讓格式器幫你決定!

Vixual