Try   HackMD

vscode-基礎操作

本文件將以python開發者的角度進行介紹，主要以界面使用、基本開發流程以及插件使用做介紹。其他如git操作使用、docker遠端連線功能請參閱連結。

vscode概念與特色

1.概念

  • 以檔案夾作為專案管理
  • 設定值(setting.json)分為user(全域) & workingspace(專案)

2.特色

  • 為何要用vscode?–>『因為它免費』
  • 輕量化開發程式–>快速啟動，容量小
  • 支援多種語言開發功能及套件–>實用面廣
  • 簡單的版本管理界面–>整合git
  • 開源及快速bug修正–>每月更新

vscode界面介紹

1.Activity Bar

左側黃色框為快速功能鍵，點擊可以展開跟關閉SideBar，分別會呈現explorer、search、source control(GIT)、debug、extension等視圖(可自由增加)

2.Side Bar

中間藍色框為快速功能鍵的顯示列表，會顯示快速功能鍵之相關資訊，呈現不同功能的view視圖，最常用的view是explorer，以樹狀選單呈現，瀏覽選取專案裡的不同資料夾跟檔案

3.Editor+Panels

右側為上方為程式撰寫區域，可自由打開多個Editor並自由決定這些editor要並排還是垂直排列;下方面板主要用於呈現extenison的output、debug的資訊，程式碼的問題以及整合進vscode的termimal

4.Status Bar

下方綠色框所標示的藍色區域為狀態列，，用於呈現開啟且在activity狀態的editor的資訊，如當前光標所在的line、column位置，縮排一次右移幾個column(tab size)，編輯檔案的語言…等等

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

vscode基本開發流程

1. 下載python

以python為範例。進入vscode頁面後，點擊Extensions圖示來下載python套件

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

2. 開啟專案資料夾

進入專案資料夾(若無則直接創一個)，進入後此專案資料夾的內容將會顯示於左側

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

3. 編輯檔案

開啟或建立一個.py檔案，編輯後可以發現檔案上出現一個白點，代表還沒存檔

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

4. 執行檔案

使用快捷鍵ctrl + 、呼叫terminal，輸入python <<你的檔案名稱>>.py即可運行程式碼/另外若已經設定好python interpreter path會於右上角出現綠色三角形，點擊後可直接運行程式碼

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

5. 設定interpreter

若出現問題可確認是否尚未選擇interpreter path，快捷鍵"shift+ctrl+p"並搜尋pytohn select interpreter，可設定自己的python版本

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

vscode 偵錯模式debug

如何開啟dubug模式：點擊功能列的小蟲仔

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

點選run旁邊的綠色三角形 or 點run–>start Debugging or 快捷鍵F5
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

VSCode debug 模式示意圖：

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

1. Variables:變數值

執行程式時顯示當下變數數值，透過點擊兩下可修改變數，可觀察修改變數後之執行結果

2.Watch:自定義程式表達式(expression)

當變數過多時可字定義自己需要觀察的變數於此欄位，同時可對欄位輸入方程式來查看特定數值，如圖中輸入"a+1"，變數a為1時，該欄位會顯示a+1=2

3.Call stack:函數的執行堆疊(stack)

主要監控函數的操作(def)，圖中程式執行到第二行，所以會看到最上面是fool() 2:5，表示現在正在fool()函數中，第二行第五個字。

4.Breakpoints:中斷點的位置

勾勾可以開關中斷點，關閉時可保留下該中斷點位置。
對中斷點點擊右鍵，編輯中斷點(edit breakpoint):
1.Expression(運算式):運算式評估為true時中斷(ex:當某變數大於多少時中斷)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

2.Hit Count(叫用次數):符合叫用次數條件時中斷(ex:當某程式碼被叫用次數大於多少時中斷)
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

3.Log Message(紀錄訊息):當命中中斷點時向紀錄傳送訊息。(ex:經過中斷點時傳送特定數值資訊)
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

5.Debug console

Debug相關資訊

6.panel:程式流程控制儀表板

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

依次是 Contiune, Step Over, Step In, Step Out, Restart, Stop
Contiune：繼續執行
Step Over：不離開當前執行函數，單步執行到下一行
Step In：單步執行到下一行。若有函數就進入
Step Out：離開當前函數後，停留在下一行
Restart：整個 deubg 重新執行
Stop：終止整個 deubg 模式

7.Evaluate expression:程式測試

可在此直接輸入程式碼進行"即時"測試

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

8.簡易DEBUG流程

(1)設定中斷點

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

(2)開啟偵錯模式
點選run旁邊的綠色三角形 or 點run–>start Debugging or 快捷鍵F5

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

(3)選偵錯方式
只有第一次要設定，後序此設定可沿用

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

(4)可對變數修改觀察變化(variables)
執行程式一部分後可對其中變數進行修改

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

再繼續執行Debug後可觀察輸出的數值變化
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

(5)可自訂計算變數觀察結果(watch)
於watch部份可輸入計算式觀察變數

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

vscode插件使用

1.代碼運行:Code Runner

代碼一鍵運行並自動偵測你所使用的，同時使測試運行時間
(支持Node.js, Python, C++, Java, PHP, Perl, Ruby, Go等超過40種的語言)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

2.空行補色:indent-rainbow

更方便清晰的觀察程式碼的縮排

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

3.檔案圖標:vscode-icons

以圖形標示資料夾中各類檔案

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

4.檢查錯字:Code Spell Checker

檢查錯字的插件＠＠，會在錯字下面標示底線提醒，點擊黃色燈泡圖示提供建議選項，或佳日字典

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

5.括號改色:Bracket Pair Colorizer 2

方便你在除錯 (debug) 時快速找到對應的標籤，當然框的顏色是可以自定義的

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

6.自動路徑:AutoFileName

自動填入檔案路徑提示檔案夾路徑(打入/並加上檔案開頭開始搜尋)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

7.書籤:Bookmarks

可對程式碼標記、對該標記取名、往來於標籤之中以及於左側sidebar顯示所有標籤的細節

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • 快捷鍵：
    Command(Ctrl)+Option(Alt)+K# 在此行建立或取消一個 Bookmark
    Command(Ctrl)+Option(Alt)+L# 快速移動到下個 Bookmark
    Command(Ctrl)+Option(Alt)+J# 快速移動到上個 Bookmark

8.設定備份:Settings Sync

雲端備份vscode之環境及套件設定(但會覆蓋目前電腦中的所有設定，請謹慎使用)
步驟：

1.建立token

登入github點選settings

選擇左下developer settings

選擇左方Personal access token

新增Generate new token

輸入Note、點選gist(Creat gists)，再點選Generate token

2.複製token

於Personal access tokens頁面中複製此token，(產生的 Access Token 之後不可查詢，僅能重新生成，所以務必在此處複製備份，以利後續設定之用)

3.設定Settings Sync

(方式一)
回vscode中下載"Settings Sync"後，快捷鍵"Shift + Alt + U"輸入token

成功的話會自動跑出 syncSummary.txt的文件
(此檔記錄以利後續用此序號於其他地方下載環境用)

(方式二)
也可使用vscode UI界面設定，按 F1 開啟指令面板 Command Palette，輸入 Sync: Update/Upload Settings，開啟擴充套件，並點擊右側 EDIT CONFIGURATION 按鈕，進入上傳下載功能設定頁面
上傳下載功能頁面中，於右上角 Access Token 欄位中輸入先前備份的 GitHub gist access token

同時按下 Shift + Alt + U，此時 Settings Sync 會創建新的 Gist，於右下角上傳設定至 Gist 的彈窗訊息中點選 Yes

上傳過程中會彈出 OUTPUT 視窗提示進度，並於右下角出現訊息通知使用者複製新創建 Gits 的 ID，供其他裝置下載備份的設定檔時使用。在通知訊息視窗上按右鍵點 Copy Text 可複製內容

(方式三)
若上述方式都出現問題，可直接到json檔紀行編輯
於vscode中使用快捷鍵"ctrl + Shift + p"，輸入Sync:Advanced Options

編輯本機延伸模組設定

於token處編輯github token並儲存

4.上傳設定紀錄

快捷鍵"Shift + Alt + U"，會開始上傳本機端vscode相關設定於github中

5.下載設定紀錄

到任何一台電腦中安裝Settings Sync 插件

接著進入Settings Sync擴充套件設定

將之前建立的Gist ID 貼上

按下下載同步快捷鍵"Shift + Alt + D"，就可以將環境及相關套件設定檔案都下載下來摟！

再次重申：會覆蓋目前電腦中的所有設定，請謹慎使用

9.git系列工具(建議可全部安裝，於git運作上有許多幫助)

(1)git graph

可看美美的graph、加入tag等功能

(2)git history

可以看到之前的git history, 還可以看到對特定檔案的file hisory

(3)git stash

git stash暫存功能

(4)git lens

可簡易的比較幾次commit的差異及變換

觀察是誰編輯過此段程式碼

查看Repositories

Last changed by 
 
任柏澔
0
3
6351

Read more

git 補充內容

[TOC] &#x5C08;&#x6848; to gitlab &#x500B;&#x4EBA;&#x5C08;&#x6848;&#x9664;&#x4E86;&#x653E;&#x5728;==&#x672C;&#x6A5F;&#x7AEF;==&#xFF0C;&#x540C;&#x4EC1;&#x5011;&#x76EE;&#x524D;&#x6709;&#x6703;&#x653E;&#x7F6E;&#x5728;==&#x9060;&#x7AEF;&#x6578;&#x64DA;&#x5EAB;(github)==&#xFF0C;&#x4E0B;&#x65B9;&#x5C07;&#x63D0;&#x4F9B;&#x4E0A;&#x8FF0;&#x5169;&#x7A2E;&#x72C0;&#x6CC1;&#x5982;&#x4F55;&#x5C07;&#x6A94;&#x6848;&#x4E0A;&#x50B3;&#x81F3;gitlab&#x7684;&#x65B9;&#x5F0F;&#x3002; 1.github to gitlab--&#x4F7F;&#x7528;gitlab&#x7684;import project&#x529F;&#x80FD; &#x6BCF;&#x500B;&#x5718;&#x968A;&#x90FD;&#x6703;&#x6709;&#x81EA;&#x5DF1;&#x7684;&#x9060;&#x7AEF;&#x5132;&#x5B58;&#x5EAB;&#xFF0C;&#x76EE;&#x524D;&#x8A31;&#x591A;&#x4EBA;&#x90FD;&#x6709;&#x518D;&#x4F7F;&#x7528;github&#xFF0C;&#x800C;AI&#x7D44;&#x6709;&#x81EA;&#x5DF1;&#x5EFA;&#x7ACB;&#x7684;gitlab&#x9060;&#x7AEF;&#x4F3A;&#x670D;&#x5668;&#xFF0C;&#x56E0;&#x6B64;&#x5927;&#x5BB6;&#x53EF;&#x4EE5;&#x958B;&#x59CB;&#x5C07;&#x653E;&#x5728;&#x5404;&#x5730;&#x7684;&#x7A0B;&#x5F0F;&#x78BC;push&#x5230;gitlab&#x3002; (1)&#x767B;&#x5165;gitlab&#x5F8C;&#x9EDE;&#x9078;new project--&gt;import project--&gt;GitHub

Apr 12, 2021
使用於vscode

install python &#x201C;Ctrl + p&#x201D;, ext install ms-python.python(&#x5B89;&#x88DD;&#x5B8C;&#x6210;&#x8A18;&#x5F97;&#x91CD;&#x65B0;&#x958B;&#x555F;) black &#x81EA;&#x52D5;&#x7E2E;&#x6392;&#x683C;&#x5F0F;&#x8ABF;&#x6574; &#x65BC;&#x672C;&#x6A5F;&#x5B89;&#x88DD;&quot;black&quot; pip3 install black

Mar 22, 2021
git with vscode

&#x8ACB;&#x5927;&#x5BB6;&#x8A02;&#x95B1;&#x6536;&#x85CF;&#x52A0;&#x8B9A;&#x8CDE; &lt;3 [TOC] Git--&#x57FA;&#x790E;&#x4F7F;&#x7528; &#x70BA;&#x4F55;&#x8981;&#x7528;git&#xFF08;&#x201C;&#xFF0D;&#x201C;&#xFF09;--&gt;&#x300E;&#x4EBA;&#x751F;&#x4E0D;&#x80FD;&#x91CD;&#x4F86;&#xFF0C;&#x4F46;git&#x53EF;&#x4EE5;&#x300F; ==&#x5F37;&#x5927;&#x7684;&#x6B77;&#x53F2;&#x67E5;&#x8A62;&#x5DE5;&#x5177;== 0.&#x6982;&#x5FF5; git&#x7684;&#x57FA;&#x672C;&#x64CD;&#x4F5C;&#x6982;&#x5FF5;&#xFF0C;&#x5206;&#x70BA;&#x4E09;&#x7A2E;&#x5340;&#x57DF;&#xFF0C;&#x5DE5;&#x4F5C;&#x5340;(working directory)&#x3001;&#x66AB;&#x5B58;&#x5340;(staging area)&#x3001;&#x5132;&#x5B58;&#x5EAB;(repository)&#x4E09;&#x500B;&#x5340;&#x57DF;&#x3002; &#x5B89;&#x88DD;&#x65B9;&#x6CD5;&#xFF1A;windows&#x3001;MAC osx&#x3001;Linux

Mar 18, 2021
偉大的 Git commit message rules

&#x8ACB;&#x5927;&#x5BB6;&#x8A02;&#x95B1;&#x6536;&#x85CF;&#x52A0;&#x8B9A;&#x8CDE; &lt;3 &#x4F86;&#x6E90;&#xFF1A;Commit Message rules by SHU HENG CHEN [toc] Golden rule for adding human and machine readable meaning to commit messages

Feb 23, 2021
Read more from 任柏澔
Published on HackMD