【導語】：CodeTour（代碼之旅）是微軟官方開發的 VS Code 擴展，允許記錄和回放代碼的演練和思路。

簡介

CodeTour 是一個 VS Code 插件，允許記錄和回放代碼庫的演練和思路。我們通常都是通過代碼注釋或者文檔來解釋某段代碼或方法的功能及邏輯，這樣的方法相對簡便，但是對閱讀的人來說還不夠友好，CodeTour 允許我們為代碼添加備注，并且將這些備注串聯起來，動態地展示我們的思路以及代碼邏輯。

就像一個目錄，可以輕松地加入到新的項目/功能，并且可視化錯誤報告或了解代碼審查/PR 更改的上下文。“code tour”只是一系列交互步驟，每個步驟都與特定目錄或文件/行進行關聯，并包括對相應代碼的描述。開發人員可以 clone 一個倉庫，然后立即開始學習，而無需參考 CONTRIBUTING.md 文件或依賴他人的幫助。

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 樹使用以下顯示名稱格式顯示每個游覽步驟：

# 步驟-文件名#《stepNumber》 - 《filePath》

如果想給步驟一個更友好/更容易識別的名稱，可以使用以下方法之一：

右鍵單擊 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 創建交互式教程或示例變得容易。

Shell 命令

為了更簡單地將 shell 命令嵌入到一個步驟中（例如執行構建、運行測試、啟動應用程序），CodeTour 支持一個特殊的 》》 符號，在后面緊跟想要運行的 shell 命令（例如 》》 npm run compile）。這將被轉換為一個超鏈接，當點擊該鏈接時，將啟動一個新的集成終端并運行指定的命令。

開啟 Tour

要開始預覽，只需打開包含一個或多個 tour 的代碼庫。通過以下任意一種方法都可以開始一個 tour：

在活動選項卡的 CodeTour 視圖中選擇 Explorer

2. 運行CodeTour： Start Tour 命令，然后選擇想啟用的 tour

責任編輯：haq