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
下載網址:
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 轉成空白字元!! 所以,除非你不使用格式器,否則勸你乾脆放棄這些堅持,讓格式器幫你決定!
參考網頁
- [Perl]如何在 VS Code 建立 Perl 的程式開發環境 (Windows/Linux) | Vixual
- [Python]Spyder IDE 5.4.x 繁體中文語言套件,以及一些 Spyder 的操作說明 | Vixual
- [Perl]Windows 上功能最齊全的 Perl 整合開發環境: DWIM Perl | Vixual
- [Python]Miniconda 的使用說明 | Vixual
- Extensions for Visual Studio family of products | Visual Studio Marketplace
- Markdown 文件寫作實務 - 數學公式、流程圖 - 黑暗執行緒
- [學習之路] VSCode 的技巧大補帖 | 洛奇的邪惡組織手札
- 為了讓世界更好,你應該優先選擇 tab 而不是 space 做程式碼縮排
No comments yet.