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:

for 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: 在程式行左側的邊欄顯示圖片的縮圖,以及在提示訊息中預覽圖片。

顯示/美化:

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 + KCtrl + S: 顯示全部的鍵盤快速鍵
  • F5: 整體執行
  • F1 (或 Ctrl + ⇧Shift + PCtrl + ECtrl + PCtrl + T): 整合多種搜尋功能,例如:
    • 直接輸入文字則搜尋「檔案名稱」來開啟
    • 若前置字元以 > 開頭則搜尋「命令」來執行
    • 若前置字元以 @ 開頭則搜尋檔案內的「符號」
    • 若前置字元以 # 開頭則搜尋「模組」來開啟
    • 若前置字元以 : 開頭則移至指定行
    • 輸入 ? 查看所有可使用的語法
  • Ctrl + Tab: 切換開啟的檔案
  • Ctrl + J: 顯示/隱藏下方面版
  • Ctrl + B: 顯示/隱藏左側邊欄
  • Ctrl + Alt + B: 顯示/隱藏右側側邊欄
  • Ctrl + / : 放大/縮小畫面
  • Ctrl + ⇧Shift + T: 復原最後關閉的分頁
  • Ctrl + KZ: Zen 模式
  • Ctrl + KCtrl + 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 + KCtrl + F: 重新排版選取的程式碼
  • ⇧Shift + Alt + F: 重新排版整個文件
  • Ctrl + G: 前往指定行
  • Ctrl + KCtrl + 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 轉成空白字元!! 所以,除非你不使用格式器,否則勸你乾脆放棄這些堅持,讓格式器幫你決定!

 

參考網頁

  1. No comments yet.

  1. No trackbacks yet.

return top

%d 位部落客按了讚: