VS Code安裝使用

Table of contents

  1. VS Code安裝使用
    1. 背景
      1. 推介
      2. 使用介紹
    2. VS Code安裝
      1. 免安裝版本
      2. 下載
      3. 安裝
    3. 開啟VS Code
      1. 新增檔案
      2. 開啟(個別)檔案
      3. 開啟檔案夾(存放庫,Repo)
      4. 從GitHub複製存放庫
      5. 從GitHub Desktop啟動VS Code
    4. VS Code界面外框
      1. 界面左側主要提示欄(primary side bar)介紹
      2. VS Code界面右側介紹
    5. 編輯窗格
      1. 重要的移動鍵組合
      2. 大綱開合及移動
      3. 文件內搜尋、移動、及取代
    6. 預覽
      1. 縮圖顯示
      2. md檔預覽
    7. 搜尋
      1. 跨檔案全文搜尋
      2. 跨檔案取代
      3. 搜尋(前往)檔案名稱
    8. 程式之執行
      1. (預)編譯
      2. 執行程式
      3. IDE的必要性檢討
    9. 移至(移動、前往)功能
      1. 移至(G)下拉選單
      2. 鍵盤
      3. 滑鼠
    10. Code的缺點與因應
      1. 檔案管理
      2. 預覽或提交

背景

  • VS Code作為一個現代的整合發展環境(IDE)，除了傳統的編輯功能、檔案總管界面、以及終端機執行與偵錯界面，還必須具備智能提示、與GitHub連絡協作、預覽、外掛等等的能力。
  • 什麼樣的人會需要使用VS Code
    • 程式發展者(程式及偵錯功能，本文較少涉獵此領域)
    • md檔案及部落客(編輯及預覽功能)
    • 厭倦word或其他軟體，尋找更好的數位化筆記系統的人(檔案總管、跨檔搜尋與前往功能)

推介

使用介紹

  • Visual Studio Code開發網站入門教學、Romaz Rau, 2020
  • Visual Studio Code 介面的基礎使用介紹(使用Python)、ITWALKER,2020
  • 在無人之境初次見面的 C 語言與 VSCode - IDE 與編輯器淺談、PenutChen, 2020
  • Markdown and Visual Studio Code, code.visualstudio.com，Code提供Markdown的特別功能。

VS Code安裝

免安裝版本

  • 上網編輯雲端檔案，可以說是現代數位筆記系統的重要功能之一(google doc、evernote etc.)。Code也可以直接在browser上執行，或在GitHub界面直接啟動程式開啟雲端檔案進行編輯(圖1)。功能與桌機安裝版一樣。
  • 如果使用公用電腦、沒有足夠的硬碟空間容納另一套軟體、或對手機或平版上的使用者而言，都是項福音。
  • 網路版Code與桌機版一樣，可以選擇編輯本地版本，在本地複製一份進行編輯還是比較安全些。
  • 程式網址https://vscode.dev/
web_code.PNG
圖1 GitHub檔案編輯之提示，讓使用者可以選擇是否使用Code或傳統編輯界面

下載

安裝

  • 不需要系統管理者、一般使用者即可安裝。可參考IThome這篇。

開啟VS Code

新增檔案

  • 如果沒有既有資料夾或檔案，
    • 可以選擇開新檔案(鍵入檔名、與儲存目錄)。

開啟(個別)檔案

  • VS Code也可以開啟個別檔案，但就不會有檔案總管(Explorer)功能。

開啟檔案夾(存放庫,Repo)

  • 如已有檔案夾(Repo)，可以選擇在window開始畫面(圖2)、或VS Code歡迎畫面點選(圖3)。
  • VS Code的檔案管理是git相對路徑的概念
    • 絕對路徑只能在此階段處理
    • 如果要同時開起其他位置的檔案，必須啟動另一個VS Code來開啟該檔案所在Repo。
    • 不同VS Code的檔案總管(Explorer)間可以使用滑鼠拖放
code_2.PNGcode_1.PNG
圖2 window開始點選VS Code右邊箭頭可以選取最近開啟目錄(Repo)圖3 VS Code歡迎畫面提示

從GitHub複製存放庫

  • 或者由Git存放庫下載(即為GitHub Code點選複製的clone https，如圖4)。
  • 在空格處貼上.git網址後，需要指定Repo之根目錄絕對路徑(圖5)。
code_3.PNGcode_4.PNG
圖4 在空格處貼上.git網址按enter下載檔案圖5 指定Repo之根目錄絕對路徑

從GitHub Desktop啟動VS Code

  • 作為GitHub預設的編輯軟體，在GitHub官網上、或是從GitHub Desktop歡迎畫面上，都可以啟動指定Repo為根目錄的Code作業，如圖6所示。
    • 必須先在本地建立該Repo的clone。
    • 如已建立，每次編輯需先從雲端Pull最新版本
    • 再開啟Code、繼續編輯或新增檔案
code_5.PNG
圖6 在GitHub Desktopp歡迎畫面開啟指定Repo為根目錄的Code作業

VS Code界面外框

界面左側主要提示欄(primary side bar)介紹

  • 2022版將左側欄名稱更改了，分為主要提示與次要提示，讓二者有上下的從屬關係。
  • 左上(圖7)
    1. 檔案總管(Explorer)。又分為Repo(以下所有的目錄文件)、大綱(選取md檔案的大綱)、時間表(作業過程的儲存版本。本地歷史是2022版本的特色之一)。如有未存檔案會出現藍色圓點數字，提示要存檔再離開。
    2. 搜尋(置換)。可指定包含、排除檔案(類型)、大小寫、逐一確認等。
    3. 原始控制檔。如出現藍色圓點數字表示還未Push到GitHub(雲端儲存)。
    4. 執行與偵錯，如果開啟的是程式碼，按此處就會執行。
    5. 延伸模組。可下載特輸功能的外掛(免費)。
    6. Docker。如果需要整個Repo做備份或傳遞給他人，可以考慮使用Docker。
code_5.PNGcode_6.PNG
圖7 VS Code界面左上角功能圖8 左下角功能
  • 左下角(圖8)
    1. 帳戶。指得是GitHub帳戶，如使用Code直接進行GitHub更新，則會需要輸入正確的帳密(也需要正確版本的.net，如否，也可以使用GitHub Desktop進行檔案交換)。
    2. 管理。有關Code的設定在此彙總統一管理。
    3. Git分支名稱。協作時需注意自己在處理的版本，以避免覆蓋他人版本。
    4. Git同步處理。按下去就會將雲端檔案更新。
    5. 編譯程式碼的錯誤或警告(條列數)

VS Code界面右側介紹

  • 右上(圖9)
    • 最上一行
      1. 切換主要提要欄位(即前述左上各項功能之開合切換，以使畫面更大一些)
      2. 切換面版。下方(命令列)出現與否。
      3. 自訂版面配置。提要欄位、面版等控制，也可以直接選取既定模式。
      4. 視窗縮到最小
      5. 視窗重疊
      6. 關閉視窗
    • 第2行
      1. 開啟變更。以顯示上次存檔與修改後的對照。
      2. 在一側開啟預覽。編輯md檔案時，需要預先知道提交後文件結果如何。
      3. 向右分割編輯器。同時編輯2個或更多檔案時可以使用。
      4. 更多操作
      5. 文件縮圖。對捲動長檔案時非常好用。
code_7.PNGcode_8.PNG
圖9 VS Code界面右上角功能、文件右上側為整個文件之縮圖預覽(含大綱開合及編輯、尋找之效果)圖10 右下角功能
  • 右下角(圖10)
    1. 游標停留位置。當滑鼠將畫面移開後，要回到游標位置，可以直接點此處。
    2. 空格。一個tab有幾格。python程式需2或4格，Fortran需7格。
    3. UTF-8。編碼，跨機器時會出現問題。
    4. CRLF。行尾順序。也是跨機器時的重要約定項目。
    5. 選取語言模式Markdown。Code程式會自行判斷文件內容是哪種語言，如果選錯了，可以在此修正。
    6. 推文意見反映
    7. 系統通知。如果有更新項目，會在此處通知。

編輯窗格

  • 點選檔案總管的文件，就會在中央的窗格中出現。
    • 文字檔案會進入編輯窗格
    • 圖檔格式，則會在窗格中預覽。
    • 其他檔案，如沒有外掛延伸模組，理論上是無法開啟、預覽的。
  • 五種顏色，顯示特殊意義、協助辨識、方便移動位置
  • 語言意義
    • （#）註解或標題：咖啡色字（mac為藍色）
    • […]、“…”、`…`字串：橘色字
    • http://aaa、[…](#aaa)：藍色或白色(mac)底線
  • 語言偵錯：底線、縮圖橫線、拉桿右側
    • 黃色：警告
    • 紅色：錯誤
  • 文件版本比較之顏色表示(行號右側之垂直線條-詳gif、縮圖左側、拉桿左側，如圖11)
    • 相對於GitHub上的版本
    • 綠色：此次新增
    • 藍色：修改
    • 紅色向下箭頭：刪除行
    • Push更新GitHub之後，這些顏色就會消失
find_snip.PNG
圖11 右側文件縮圖與拉桿上顏色的分布：搜尋到之關鍵字詞(橘色底橫線與方塊)、新增文字區塊(綠色)、修改(藍色)

重要的移動鍵組合

  • ctrl 上/下：移動畫面(向上移/向下移)而不移動游標
  • ctrl 左/右：跳越一詞
  • ctrl 上頁/下頁：已開啟的檔案中，換到左(右)側檔。
  • ctrl Home/End：將游標移動到文件的最前/後
  • shift 上/下/左/右：選取
  • Alt 左：上次滑鼠移動前的游標位置(上一步)
  • Alt 上/下：將所在行文字向上移/向下移
  • Alt 上頁/下頁：翻動畫面(向上一頁/向下一頁)而不移動游標
  • F2 :重新命名變數名稱，方便更改當前檔案中的變數名稱。
  • 更多快捷鍵請參考 官方文件
    • ctrl-shift-I：貼上時間標籤(現在時刻)，這對筆記系統文件而言非常重要。

大綱開合及移動

  • 文件上方會出現檔案目錄、及游標位置之大綱從屬
    • md檔案為井字號(# hashtag)開始的headline、python則為變數名稱
    • 會按照游標位置自動切換大綱
    • 點選箭頭可以開合其內容
  • 行號數字與文件中有箭頭
    • 出現在第1個字是#、-、for、if等區段
    • 滑鼠滑過才會出現
    • 點選箭頭可以開合其內容(不影響預覽)
    • 整段剪下複製：不必害怕滑鼠選取錯誤。
  • 開啟檔案總管中的大綱，所有檔案中以井字號(# hash tag)的headline都會出現在此。
    • 此處大綱功能與點選文件上之大綱一樣，但編輯文件時不會消失，是常設之視窗，可以用來參考上下文內容。
    • 可以選擇全部折疊與否、排序方式、以及是否追蹤游標(會在大綱中呈現灰底，以顯示在文章中的相對位置)。
    • 點選箭頭可以開合其內容
    • 直接點選即會移動游標

文件內搜尋、移動、及取代

  • ctrl-F：如未有反白文字，會將游標跳到搜尋欄，搜尋反白或附近文字。
    • 按上下鍵尋找前、後1個、或在選取範圍中尋找
    • F3 / Shift F3 也有相同功能
    • 可指定是否認大小寫、適用外卡(wild card)
    • 關鍵字標記（見前圖11）
      • 文件中（或指定範圍中）所有該項關鍵字都會有橘色底，以顯示其位置。
      • 文件編輯器右側拉桿，會在相對位置出現橘色點(拉桿中央線)。
      • 文件編輯器右側縮圖，也會在關鍵字所在位置出現橘色橫線。
  • 按搜尋欄右邊箭頭->取代
    • 可指定逐一或全部取代

預覽

  • Code有2個預覽畫面
    • 一者在文件編輯器的右側拉桿邊，類似MS Word的縮圖顯示，如圖11所示。
      • 會呈現文件的段落、文字顏色、以及編輯(版本比較)、尋找、預編譯(錯誤碼位置)等等概略樣貌、以及效果訊息。
      • 功能為提供使用者在文件中快速移動游標。
    • 一者以分割畫面型態，出現在文件編輯器的右側視窗
      • 只適用在md指令的文件檔案，系統將，預覽內容則為編譯後的樣貌。
      • 翻動預覽，文件編輯器也會同步翻動。
    • 二者都可以在管理與設定(ctrl ,)內更改縮放比例。

縮圖顯示

  • 和MS Word最大不同之處，Code的縮圖顯示會隨著文件的編輯、大綱的開合而改變。
  • 確認游標所在的位置。雖然Code都會提供行號，但是相對其他段落是前還是後，並沒有整體的概念。
    • 縮圖在該行會有呈現灰底線條，
    • 滑鼠滑過縮圖該區域(頁面範圍，會呈現灰底)
    • 在文件中選取某個範圍，縮圖中也會出現灰底藍字。
  • 開合文件中的區段，在縮圖中也會同步反映。
  • 移動(前往)
    • 滑鼠在縮圖上直擊：去到指定位置
    • 滑鼠在縮圖上拖動：快速、無間隔翻頁效果。

md檔預覽

  • 因md格式之文件內含許多樣式、格式的控制碼，需要有程式進行轉譯，才能顯示出預期發布的結果。
  • 會需要使用預覽確認的情況
    1. 表格之編寫
    2. 特殊字形、數學公式
    3. 引述、片段、區段(snippet)
    4. 網址與圖片之連結
    5. 流程圖
  • 如果因為文件含有太多引述、或者按照大綱予以閉合，文件和預覽會不同步，可以按預覽右上方顯示來源，強迫二者可以同步翻頁。

搜尋

  • 文件內的搜尋詳上述。
  • 此處說明左側主要提示欄(primary side bar)的尋找功能、以及移至(G)功能。也是Code作為筆記系統的強項之一。
  • 此處功能為關鍵字索引的完全版本，亦即全Repo、全文的文字，都可以是關鍵字。可以執行快速搜尋、前往、置換等等作業。

跨檔案全文搜尋

  • 可以指定英文字的大小寫、*是普通字元或是外卡(用以尋找部分文字)
  • 指定搜尋特定目錄或包含特定類型的檔案
    • 在對話框處的*是一律是外卡
    • 也可以在檔案總管的目錄按右鍵，指定在某個目錄下搜尋或取代。
  • 指定排除的檔案
  • 點在檔名上：只會收合，不會作用。須點在符合條件的文字上，才會開啟該檔案。如未移動到該列，需再點一下該處。
  • 在檔名上按右鍵，可以顯示該檔案在整體目錄中的位置。

跨檔案取代

  • 筆記系統會需要更新錯誤的內容。如果錯誤出現在很多檔案，要一一尋找修改，那會很痛苦。有了跨檔案取代就不怕了。
  • 搜尋窗格左側箭頭下拉會出現取代功能。
  • 同樣也可以選擇逐一檢查後取代、或全部取代。

搜尋(前往)檔案名稱

  • 這個功能隱藏在移至(G)->移至檔案…，也可以用ctrl-P直接開啟對話框。
  • 鍵入關鍵字後系統就會出現符合的檔案名稱(與目錄)，
  • 如果是已經開啟的檔案，
    • 關鍵字後再鍵入 : 與數字(行號)，即會前往該檔案該位置，
    • 關鍵字後鍵入 @ 即會出現大綱，再點選要去的位置。

程式之執行

(預)編譯

  • IDE強項功能之一，就是在撰寫程式時提供程式語言自動填字、以及預先編譯功能，在還沒有執行前，就可以知道錯誤碼會在何處發生、錯誤為何等等訊息，不必真正執行程式。
  • 一般會在程式碼下方出現紅色底線、在縮圖出現紅色橫條、在文件右惻拉桿的右側出現紅色方塊。

執行程式

  • 直接按左側執行與偵錯即可。
  • 開啟終端機
    • 右上方可開啟。目錄位置為Repo下
    • 如需開啟在特定的目錄位置，可以先在檔案總管移動到正確的位置，再按滑鼠右鍵選取「在整合式終端機中開啟」
  • window系統為powershell(DOS命令為主)，mac及linux則為bash環境。

IDE的必要性檢討

  • 對習慣使用IDE來開發程式的人來說，Code算是蠻理想的，算是充份。
  • 但就必要性而言，其實就執行程式的角度而言，還是有諸多不順之處：
    1. 多視窗的必要性：同時開這麼多視窗還蠻干擾思路的，畢竟數據結果和程式碼是不同類物件，不同類如何比較，一起看的必要性不高。寧可做什麼特定的動作來變換整個視窗畫面、也轉換一下心情，而不是同時開啟，分散注意力。
    2. 多工運作：IDE在早期個人電腦或是window不能多工運作的環境，是有其必要性的。如果要測試多個程式，可以一直開啟終端機視窗來運作。但這在工作站似乎就沒有這個必要了，再開啟putty登入就好了。
    3. 滑鼠倚賴性：對習慣滑鼠作業方式的人來說，越少用到鍵盤是越好，IDE提供很多有用的功能、在檔案、大綱之間的流覽跳躍等等。可惜程式設計、報告(程式說明、心得筆記等等)撰寫，目前輸入方式還是以鍵盤為主流，否則IDE也不會設計這麼多按鍵組合，來避免再用滑鼠造成思路中斷。

移至(移動、前往)功能

  • 不論是文件或是程式系統，在編輯或執行階段，會需要快速在檔案內、或檔案間移動游標。為此Code提供了專用的下拉選單，可見得其重要性與必要性。
    • 熟悉前往功能對於Code使用，可以說是發揮其軟體精髓到極致。
    • 中文翻做「移至」，實為英文之前往「Go」，此功能延續自vim的Shift-G功能，該功能讓使用者可以在快速的在文件內移動游標。
  • 此處將所有關於移動游標的方式、鍵盤或滑鼠操作等予以彙總。

移至(G)下拉選單

gotogoto
圖12(a)window版圖12(b)mac版

鍵盤

  • 詳參前述重要的移動鍵組合
  • 選單(G)中列出「上一步」及「上次編輯位置」，是有別於編輯的「復原 」。這是在其他編輯軟體不曾出現的功能。讓使用者可以反覆檢討剛剛修正之處。
  • 切換編輯器：即為切換已經開啟的文件。
  • 切換群組：執行程式時相關程式之群組
  • 移至檔案：在已開啟(最近開啟)的文件中移動
  • 前往工作區中的符號(symbol)：預設是hashtag，工作區(workplace)即為整個Repo，亦即ctrl T將會出現所有檔案、所有以# hashtag為首的內容(按照字母排序)。

滑鼠

  • 滑鼠的快速移動非常直覺。Code還提供了顏色作為重要標示。
  • 文件內移動
    • 右側拉桿上下拖動(同ctrl 上/下、Alt 上頁/下頁)
    • 拉桿之顏色標記
      • 左：文件與雲端備份之比較，綠色方塊表新增、藍色為修訂。git同步後，這些顏色就會消失。
      • 中：搜尋結果之相對位置，會出現橘色方塊。取消搜尋即消失。
      • 右：程式碼錯誤之相對位置，警告為黃色方塊、錯誤為紅色方塊。
    • 縮圖之上下拖動、(同拉桿拖動)
      • 顏色意義同上。
        • 橘色或紅色為一整行底色
        • 如同時出現時，該行為紅色底
        • 綠色及藍色為左側方塊。
      • 點選處為灰藍色底
    • 預覽
      • 在預覽畫面上雙擊左鍵，就可以跳到該處文字位置進行編輯。
      • 翻動預覽畫面，本文也會隨之翻動，如果本文中含有很多註釋、直接翻動會很煩瑣，因其不在預覽畫面出現，此時翻動預覽畫面會比較快速且明確。
    • 大綱之點選，見前述大綱開合及移動，主要有2處
      • 文件上方之位置提示。
      • 左欄(主要提示欄)檔案總管之「大綱」
  • 文件之間的移動
    • 檔案總管Repo下按照目錄、檔案名稱點選、開啟檔案
    • ctrl-P、ctrl-T，也可以滾輪點選其他文件的# hashtag，直接跳到該檔案位置。
    • 搜尋結果中，直接點選搜尋到的文字，即可開啟檔案、跳到該行檢視、更換或編輯。
    • 檔案總管中的「時間表」
      • 除了有最近編輯的檔案、也有個檔案編輯過程的重要里程碑，點入將出現新增或修改之對照，且將游標直接移至該處。
      • 以鍵盤alt-F3也會出現(上次)編輯對照。

Code的缺點與因應

檔案管理

  • 一專案開啟一個Code，對跨專案作業來說，會有很大困擾。
    • 這是個限制也是個保護。試想在window的檔案總管，如果要跨檔搜尋特定的一個檔名，也是在某個目錄以下搜尋，如果都是從磁碟機根目錄開始搜尋，那會是一個怎樣的災難。
    • 如果是linux/macOS，用locate指令會輕鬆很多。
    • 還好Code的啟動很快、佔用記憶體不多，開個2~3個還不成問題。如果要開啟3個Code才能整併特定的專案，那要先整理的似乎不是檔案了。
    • linux/macOS有好用的unix指令可以跨檔搜尋：grep --color=auto -ni $1 $(find . -name "*.$2")
  • 找不到「最近編輯的檔案」功能，因為隱藏在移至(G)->移至檔案…。
    • 如前所述，visual studio系列IDE很早的觀念就是以專案為單元，而不是以檔案為單元，進到git系統也是以Repo為單元，
    • 所以如果去檔案(F)下拉選單找到的「開啟最近檔案」會是其他專案(檔案)，而不是正編輯Repo最近的編輯檔案，需要去到移至(G)->移至檔案…。
    • 因應這項缺點，
      • ctrl-P直接Goto
      • 使用日期當做檔名的前綴，會是一個不錯的作法。
      • 或者是在跨檔搜尋當中，以日期標籤來尋找，也是一個快速啟動的方式。

預覽或提交

  • 預覽與提交GitHub Pages(GHP)之後的效果，有些微不同之處，似乎短時間之內也無法合理的解決。
    • 流程圖。GHP處理效率不好、常常會失敗。但預覽是OK的。
    • md檔案如含有js指令，Code也無法辨識執行。