Visual Studio Code 使用指南

Cris就是我發表於2019-01-13

0. 下載和安裝

關於 Visual Studio Code,引用 維基百科 的解釋:

Visual Studio Code(簡稱VS Code)是一個由微軟開發的,同時支援Windows、Linux和macOS系統且開放原始碼的程式碼編輯器,它支援測試,並內建了Git 版本控制功能,同時也具有開發環境功能,例如程式碼補全(類似於 IntelliSense)、程式碼片段和程式碼重構等,該編輯器支援使用者個人化配置,例如改變主題顏色、鍵盤快捷方式等各種屬性和引數,還在編輯器中內建了擴充套件程式管理的功能

我們直接在官網下載即可,並且 Visual Studio Code 支援 MacOS,Windows,Linux 系統,具體的安裝流程這裡以 Linux 為主

進入官網,根據自己 Linux 的版本選擇 .deb 或者是 .rpm 格式的安裝檔案,這裡 Cris 是 Deepin 系統,選擇 .deb

Visual Studio Code 使用指南

下載完畢後,直接雙擊安裝即可,此時啟動器就會出現 Visual Studio Code 的圖示

Visual Studio Code 使用指南

我們點選即可開啟 Visual Studio Code ,介面如下

Visual Studio Code 使用指南

如果你的介面和我不一致很正常,因為Visual Studio Code 有很多好看的主題可選,後續我會推薦幾個不錯的主題~

1. 定製

Visual Studio Code 的安裝十分傻瓜式,但是想要用好這款軟體,可就不那麼簡單了,所幸 Visual Studio Code 提供了強大的幫助,可以讓我們的開發事半功倍,接下來 Cris 就將自己如何定製 Visual Studio Code 的過程記錄下來,感興趣的朋友可以根據自己需要檢視。

任何一款 IDE(ntegrated Development Environment),好看的外觀是吸引使用者的第一點,流暢簡約的使用體驗是最基本的要求,而豐富好用的外掛可以做到錦上添花,最後就是各種各樣的快捷鍵可以為使用者提供行雲流水的操作感。Visual Studio Code 基本都滿足了以上要求,對於各個語言的開發人員來說,都是非常值得嘗試的

1.1 中文外掛

Visual Studio Code 剛下載下來,介面應該都是英文的。我們可以使用一款中文外掛來提高 Visual Studio Code 的使用體驗,降低使用門檻,對於第一次上手的使用者來說,是十分貼心的,並且 Visual Studio Code 的中文化是 Cris 個人覺得做的十分到位。

在外掛中心(或者也叫應用商店),輸入 Chinese 即可

Visual Studio Code 使用指南

排名第一位的應該就是 Chinese (Simplified) Language Pack for VS Code 這款外掛,直接點選安裝即可,然後點選外掛,在外掛主頁點選重新載入,就可以發現 Visual Studio Code 整體介面變成了中文

Visual Studio Code 使用指南

對比其他 IDE,Visual Studio Code 的外掛庫是個人感覺做的最好的,也難怪深受很多開發者的喜愛!

1.2 簡單設定介面顯示

剛下載下來,整體介面的文字偏下,我們可以簡單設定一下,使用 ctrl+, 這個快捷鍵,直接來到設定介面,可以對常用的設定進行搜尋和設定,輸入 font 即可

Visual Studio Code 使用指南

這裡設定完畢字型大小後,建議設定自動格式化當前行,這樣子在鍵入下一行的時候,編輯器會自動格式化上一行程式碼,參考其他部落格的時候,很多都提到了 setting.json 用於對編輯器進行設定,可以在開啟設定的時候,選中右邊的json 圖示,進行修改

Visual Studio Code 使用指南

然後點選左上角的檔案選項,選中自動儲存,這樣子就可以不用手動儲存檔案了

1.3 第一個Python 程式

Cris 主要是用 Visual Studio Code 寫一點 Python,簡單介紹一下如何配置 Visual Studio Code 的Python 環境

直接在外掛中心輸入 Python,就可以下載 Python 的外掛了

Visual Studio Code 使用指南

下載完畢後,就可以直接使用了(前提是你的本地電腦已經安裝好了 Python 環境,並且配置了環境變數,Visual Studio Code 執行 Python 檔案的時候會自動去查詢本機環境變數中的 Python 直譯器)

Cris 本機有 Deepin 自帶的 Python 環境,也有之前使用的 Anaconda 環境,可以點選左下角進行切換,十分方便

Visual Studio Code 使用指南

如何安裝 Python 環境或者 Anaconda ,這裡不再贅述了,網上很多部落格都有寫

如果想要指定工作區的Python環境,可以通過工作區的 setting.json 覆蓋掉使用者設定

Visual Studio Code 使用指南

Visual Studio Code 中使用者配置可以覆蓋預設配置,工作區配置可以覆蓋使用者配置,而工作區通常指的就是當前的一個專案工作目錄

接下來我們書寫第一個Python 檔案,直接 ctrl+n 新建一個檔案,然後輸入 ctrl+shift+p,可以更改當前檔案的語言環境(Python or html or js...),輸入Python 後,Visual Studio Code 預設當前檔案為 Python 檔案

Visual Studio Code 使用指南

ctrl+s 儲存為 .py 結尾的Python檔案,輸入以下 Python 程式碼

print("hello")

number = input("input number:")
print(number)


def get_name(name):
    print("hello," + name)


get_name("curry")
複製程式碼

然後滑鼠右鍵,選擇在當前終端中執行 Python 檔案

Visual Studio Code 使用指南

可以發現,新建的 Python 檔案被成功執行了

1.4 快捷鍵

首先,Visual Studio Code 的快捷鍵十分有意思,可以分為三大類

  1. ctrl+k z:這種快捷鍵首先需要按下ctrl和k,然後鬆開按下z,可以切換 禪模式
  2. ctrl+k ctrl+o:這種快捷鍵需要按下 ctrl和k,然後ctrl不放,鬆開k並按下o,可以開啟資料夾
  3. ctrl+shift+p:一起按下 ctrl,shift和p 鍵,調出命令幫助選單

雖然這樣子設計可以使快捷鍵更加豐富,但是對於新手來說,無疑是增加了快捷鍵的上手難度,感興趣的同學可以根據自己需要設定快捷鍵

通過 ctrl+k ctrl+s 可以自定義快捷鍵

Visual Studio Code 使用指南

關於快捷鍵的設定,Cris 參考了這篇部落格 和 這篇文章

建議大家根據自己平時的使用習慣來設定快捷鍵,Cris 根據之前使用的 IDEA 來設定 Visual Studio Code 的快捷鍵,儘量保持一直,同時建議公司中同一小組的同事可以儘量統一快捷鍵,這樣子不管是別人幫自己調 bug,還是自己幫別人解決 bug,都可以節省很多時間~

接下來,我會將自己常用的快捷鍵記錄下來,大家參考就好

  1. ctrl+shift+p:用於調出命令幫助選單,對於一些功能或者命令,可以通過這個選單進行查詢,例如輸入 git

    Visual Studio Code 使用指南

  2. ctrl+f:當前檔案查詢,還可以對查詢到的內容進行替換

    Visual Studio Code 使用指南

  3. ctrl+k+o:開啟一個資料夾

  4. ctrl+o:開啟一個檔案

  5. ctrl+k ctrl+t:開啟主題快速切換欄

    Visual Studio Code 使用指南

    關於主題的選擇,Cris 推薦Atom One Dark Theme,Material Theme,One Monokai Theme,Palenight Theme,當前你也可以根據自己喜好在應用商店選擇合適的主題

  6. ctrl+k+s:快捷鍵設定介面,自定義快捷鍵

  7. ctrl+l+a:修改當前新建的未命名檔案的語言環境

  8. ctrl+w:關閉編輯器(Visual Studio Code 中,每一個檔案的編輯頁面統稱為編輯器)

  9. ctrl+h:全域性搜尋

  10. ctrl+,:使用者設定介面,推薦將遊標的樣式設定如下

    Visual Studio Code 使用指南

  11. 切換行註釋:ctrl+/

  12. ctrl+alt+↓:向下複製一行,向上複製一行同理(是不是感覺和IDEA 或者 eclipse 特別像)

  13. ctrl+c:可以複製當前行

  14. ctrl+d:刪除當前行

  15. alt+↓:向下移動行,向上移動行同理

  16. ctrl+shift+/:切換塊註釋(尷尬的是 Python 中不可用)ctrl+shift+/ f 可以對塊註釋摺疊

  17. ctrl+g:移動至指定行號行

  18. ctrl+p:顯示最近開啟的檔案編輯器

    Visual Studio Code 使用指南

  19. ctrl+tab:切換當前開啟的所有編輯器

  20. ctrl+q:退出 Visual Studio Code

  21. ctrl+shift+f:格式化當前檔案(寫Python 檔案使用這個快捷鍵,Visual Studio Code 右下端會自動提示安裝 pep8 外掛,點選yes即可,後續的所有 Python 檔案就可以一鍵格式化了)

  22. 游標移動至檔案:ctrl+alt+c 可以複製當前檔案的絕對路徑;ctrl+shift+alt+c 可以複製當前檔案的相對路徑;ctrl+alt+o 可以開啟檔案所在的資料夾

  23. f2:變數名或者檔名重命令

  24. ctrl+游標點選方法名/類名:跳轉至定義處

  25. ctrl+`:開啟終端

  26. f11:全屏切換

  27. ctrl+k,z:切換禪模式

    Visual Studio Code 使用指南

  28. alt+e:開啟資源管理側邊欄

  29. alt+d:除錯側邊欄

  30. alt+x:應用商店側邊欄

  31. alt+b:側邊欄toggle

  32. 操作前進/後退:ctrl+alt+←/→

  33. alt:焦點移動至選單欄,全屏模式下可以對選單欄 toggle

  34. alt+r:終端執行當前 Python 檔案

  35. ctrl+k,v:開啟側邊欄預覽(例如 markdown 檔案),這裡建議設定一下 markdown 的換行

    Visual Studio Code 使用指南

  36. 編輯器的切換:ctrl+pageOn/pageDown,左右切換編輯器,alt+數字鍵,指定切換編輯器

待續...

1.5 外掛

相關文章