點選“ 終碼一生 ”， 關注，置頂 公衆号
每日技術幹貨，第一時間送達！
【導語】： CodeTour（代碼之旅）是微軟官方開發的 VS Code 擴充，允許記錄和回放代碼的演練和思路。
CodeTour 是一個 VS Code 插件，允許記錄和回放代碼庫的演練和思路。 我們通常都是通過代碼注釋或者文檔來解釋某段代碼或方法的功能及邏輯，這樣的方法相對簡便，但是對閱讀的人來說還不夠友好，CodeTour 允許我們為代碼添加備注，并且将這些備注串聯起來，動态地展示我們的思路以及代碼邏輯。
就像一個目錄，可以輕松地加入到新的項目/功能，并且可視化錯誤報告或了解代碼審查/PR 更改的上下文。 "code tour"隻是一系列互動步驟，每個步驟都與特定目錄或檔案/行進行關聯，并包括對相應代碼的描述。 開發人員可以 clone 一個倉庫，然後立即開始學習，而無需參考 CONTRIBUTING.md 檔案或依賴他人的幫助。
，時長00:44
VSCode 位址：
https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour
項目位址：
https://github.com/microsoft/codetour
單擊樹視圖中的 + 按鈕 CodeTour（如果它可見）或運作 CodeTour: Record Tour 指令。 這将啟動 CodeTour，這時候我們可以開始打開檔案，單擊要注釋的行的“注釋欄”，然後添加相應的描述。 添加任意數量的步驟，完成後，單擊停止。
錄制時，CodeTour 樹狀視圖将顯示目前錄制的預覽，以及目前的一組步驟。 可以知道目前正在進行哪個 tour 的錄制。
如果需要在錄制時編輯或删除步驟，單擊 ... 步驟描述旁邊的菜單，然後選擇适當的操作，也可以從 CodeTour 樹視圖中查找編輯/删除步驟。
在錄制時，系統會要求選擇要将 tour 檔案儲存到的檔案夾。 這是必要的，因為 tour 作為檔案寫入工作區，需要明确 tour 應儲存到哪個檔案夾。
預設情況下，CodeTour 樹使用以下顯示名稱格式顯示每個遊覽步驟：
如果想給步驟一個更友好/更容易識别的名稱，可以使用以下方法之一：
右鍵單擊 CodeTour 樹中的步驟并選擇 Change Title
支援 Markdown 文法，可以使用任何标題級别。 例如，如果添加一個描述以 ### Activation 開頭的步驟，步驟和樹視圖将如下所示：
預設情況下，每個步驟都與建立注釋的代碼行相關聯，但是，如果想調出特定範圍的代碼作為步驟的一部分，隻需在添加步驟之前突出顯示代碼（單擊 Add Tour to Step 按鈕），所選内容将作為步驟的一部分被捕獲。
在錄制時，添加的每個新步驟都将附加到錄制的末尾，可以通過執行以下操作之一按順序上下移動現有步驟：
将滑鼠懸停在 CodeTour 樹中的步驟上，然後單擊向上/向下箭頭圖示
右鍵單擊 CodeTour 樹中的步驟并選擇 Move Up 或 Move Down 菜單項
單擊 ... 步驟注釋 UI 中的菜單，然後選擇 Move Up 或 Move Down
如果想在錄制中間添加一個新步驟，隻需導航到要在其後插入新步驟。
可以将 Markdown 代碼塊添加到步驟的正文内容，則 CodeTour 播放器将 Insert Code 在其下方呈現一個連結，該連結允許檢視器自動将代碼片段插入目前檔案中與步驟關聯的行，使得 CodeTour 建立互動式教程或示例變得容易。
，時長00:11
為了更簡單地将 shell 指令嵌入到一個步驟中（例如執行建構、運作測試、啟動應用程式），CodeTour 支援一個特殊的 >> 符号，在後面緊跟想要運作的 shell 指令（例如 >> npm run compile）。 這将被轉換為一個超連結，當點選該連結時，将啟動一個新的內建終端并運作指定的指令。
，時長00:09
要開始預覽，隻需打開包含一個或多個 tour 的代碼庫。 通過以下任意一種方法都可以開始一個 tour：
在活動頁籤的 CodeTour 視圖中選擇 Explorer
運作CodeTour: Start Tour 指令，然後選擇想啟用的 tour
，時長00:29
PS： 防止找不到本篇文章，可以收藏點贊，友善翻閱查找哦。