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

簡介

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

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

VSCode 地址：

https://marketplace.visualstudio.com/items？itemName=vsls-contrib.codetour

項目地址：

https://github.com/microsoft/codetour

入門

錄制

單擊樹視圖中的 + 按鈕 CodeTour（如果它可見）或運行 CodeTour： Record Tour 命令。這將啟動 CodeTour，這時候我們可以開始打開文件，單擊要注釋的行的“注釋欄”，然后添加相應(yīng)的描述。添加任意數(shù)量的步驟，完成后，單擊停止。

錄制時，CodeTour 樹狀視圖將顯示當(dāng)前錄制的預(yù)覽，以及當(dāng)前的一組步驟?？梢灾喇?dāng)前正在進行哪個 tour 的錄制。

如果需要在錄制時編輯或刪除步驟，單擊 。.. 步驟描述旁邊的菜單，然后選擇適當(dāng)?shù)牟僮?，也可以?CodeTour 樹視圖中查找編輯/刪除步驟。

工作區(qū)

在錄制時，系統(tǒng)會要求選擇要將 tour 文件保存到的文件夾。這是必要的，因為 tour 作為文件寫入工作區(qū)，需要明確 tour 應(yīng)保存到哪個文件夾。

步驟標(biāo)題

默認情況下，CodeTour 樹使用以下顯示名稱格式顯示每個游覽步驟：

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

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

右鍵單擊 CodeTour 樹中的步驟并選擇 Change Title

支持 Markdown 語法，可以使用任何標(biāo)題級別。例如，如果添加一個描述以 ### Activation 開頭的步驟，步驟和樹視圖將如下所示：

選擇文本

默認情況下，每個步驟都與創(chuàng)建注釋的代碼行相關(guān)聯(lián)，但是，如果想調(diào)出特定范圍的代碼作為步驟的一部分，只需在添加步驟之前突出顯示代碼（單擊 Add Tour to Step 按鈕），所選內(nèi)容將作為步驟的一部分被捕獲。

調(diào)整錄制步驟

在錄制時，添加的每個新步驟都將附加到錄制的末尾，可以通過執(zhí)行以下操作之一按順序上下移動現(xiàn)有步驟：

將鼠標(biāo)懸停在 CodeTour 樹中的步驟上，然后單擊向上/向下箭頭圖標(biāo)

右鍵單擊 CodeTour 樹中的步驟并選擇 Move Up 或 Move Down 菜單項

單擊 。.. 步驟注釋 UI 中的菜單，然后選擇 Move Up 或 Move Down

如果想在錄制中間添加一個新步驟，只需導(dǎo)航到要在其后插入新步驟。

代碼塊

可以將 Markdown 代碼塊添加到步驟的正文內(nèi)容，則 CodeTour 播放器將 Insert Code 在其下方呈現(xiàn)一個鏈接，該鏈接允許查看器自動將代碼片段插入當(dāng)前文件中與步驟關(guān)聯(lián)的行，使得 CodeTour 創(chuàng)建交互式教程或示例變得容易。

Shell 命令

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

開啟 Tour

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

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

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

責(zé)任編輯：haq