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

簡(jiǎn)介

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

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

VSCode 地址：

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

項(xiàng)目地址：

https://github.com/microsoft/codetour

入門(mén)

錄制

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

錄制時(shí)，CodeTour 樹(shù)狀視圖將顯示當(dāng)前錄制的預(yù)覽，以及當(dāng)前的一組步驟。可以知道當(dāng)前正在進(jìn)行哪個(gè) tour 的錄制。

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

工作區(qū)

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

步驟標(biāo)題

默認(rèn)情況下，CodeTour 樹(shù)使用以下顯示名稱格式顯示每個(gè)游覽步驟：

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

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

右鍵單擊 CodeTour 樹(shù)中的步驟并選擇 Change Title

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

選擇文本

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

調(diào)整錄制步驟

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

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

右鍵單擊 CodeTour 樹(shù)中的步驟并選擇 Move Up 或 Move Down 菜單項(xiàng)

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

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

代碼塊

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

Shell 命令

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

開(kāi)啟 Tour

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

在活動(dòng)選項(xiàng)卡的 CodeTour 視圖中選擇 Explorer

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

責(zé)任編輯：haq