簡介

我是一直追蹤 VS Code / GitHub Copilot 動向的 Microsoft Student Ambassador，同時也是 GitHub Copilot User Group Japan（Gh-CUG）運營成員的 ロホマン シャヒン！

如果這篇文章有幫到你一點點，也請務必按讚・分享。
如果有錯誤之處，或是你覺得「這裡不好懂」，也歡迎溫柔地留言指正，真的會很感謝！

在 2026 年 10 月 14 日釋出的 VS Code 1.142 中，最受矚目的功能就是 Canvases（預覽版）。

官方發行說明是這樣介紹的：

Canvases are interactive interfaces to collaborate with an agent. A canvas opens beside the chat, where you and the agent can inspect and update the same artifact instead of coordinating solely through prompts.

（出處: VS Code 1.142 Release Notes - Canvases (Preview)）

簡單來說，就是 在聊天旁邊打開一個「你和代理程式可以一起操作同一份內容」的畫面。有種「終於連 VS Code 也有 Canvas 了！」的感覺。

這篇文章會根據官方文件，以及海外文章與案例，整理以下內容：

• ✅ Canvases 是什麼，和只靠聊天協作有什麼不同
• ✅ 啟用方式與 /create-canvas 的用法
• ✅ 可用與不可用的環境（這裡其實很容易踩坑）
• ✅ 海外熱議的使用方式，以及已經公開的 Canvas 擴充功能
• ✅ 該在 VS Code 用，還是在 GitHub Copilot App 用

對象是已經有接觸 VS Code 與 GitHub Copilot 代理程式功能的讀者。

TL;DR

發生了什麼？
VS Code 1.142（2026/10/14）加入了 Canvases 預覽功能，讓你可以在聊天旁邊開啟一個可與代理程式共享、共同操作的介面。將 chat.canvases.enabled 設為 ON，並在新的 Copilot 工作階段中輸入 /create-canvas，就能請它幫你建立適合自己專案的畫面。

重點整理

項目內容啟用✅ 將 chat.canvases.enabled 設為 ON（只會在新工作階段生效）建立畫面✅ 只要用日文/中文/英文描述 /create-canvas 即可（實測可用）人與代理程式共享✅ 你手動新增的卡片，代理程式也能在不額外說明的情況下讀取既有 Canvas 的使用⚠️ 目前需先在 GitHub Copilot App 安裝外掛，再切回 VS Code 使用的環境⚠️ 只支援桌面版 × Copilot harness × 本機工作階段（我的 WSL 環境無法用分頁打開）Claude / Codex / Web❌ 目前不支援適用對象：VS Code 1.142 以上（桌面版）。由於是 Preview 功能，未來規格可能會變動。

Canvases 有什麼好處？

聊天擅長「傳達意圖」，但不擅長「保存狀態」

把工作交給代理程式時，你是不是也遇過這些情況？

• 「把剛剛加的第 3 個任務標成完成」每次都得重新在聊天裡說一次
• 計畫與進度被聊天紀錄淹沒，搞不清楚目前做到哪裡
• 每次做小修改，都要重新寫一次提示詞

GitHub 的部落格也提到，聊天很適合表達意圖，但一旦真的開始工作，就會變成一長串日誌與修正的捲動紀錄。計畫、判斷點、驗證結果、核准時機，常常都被歷史訊息埋掉。

Canvases 的想法，就是在這裡提供一個「工作擺放處」。

官方的例子是 Kanban（看板）Canvas。

• 你可以即時新增卡片，或拖曳卡片移動
• 代理程式可以把功能拆成任務、更新狀態、加入工作中發現的問題

重點在於：同一塊看板可以由人和代理程式直接一起操作。這不是只能看代理程式產出的結果，而是雙向互動的畫面，這點我覺得很重要。

原理：Canvas 由「Canvas 擴充功能」提供

根據 VS Code 官方文件，所有 Canvas 都是由「Canvas 擴充功能」提供的。

GitHub Copilot App 的文件則把 Canvas 擴充功能的結構說明如下：

.github/extensions/<擴充功能名稱>/   ← 專案用（團隊共享）
~/.copilot/extensions/<擴充功能名稱>/ ← 個人用（只在自己的電腦上）
├─ package.json     … 中繼資料與相依套件
├─ extension.mjs    … Canvas 行為與代理程式可呼叫動作的定義
└─ artifacts/       … （可選）想要持久保存的狀態 JSON 等

當 UI 上的按鈕或卡片被人操作時，狀態就會改變；而代理程式則透過 get_board / add_card / move_card 這類「代理程式可呼叫的動作」 來讀取或更新相同的狀態。

💡 Canvas 擴充功能和 VS Code Marketplace 的擴充功能不是同一回事。
你要嘛用 /create-canvas 自己建立，要嘛安裝包含 Canvas 擴充功能的「聊天外掛」來使用。若把它想成「找支援 Canvas 的 VS Code 擴充功能」，很容易走錯方向，要注意。

啟用後實際試用

Step 1：將設定打開

先到設定頁面搜尋 chat.canvases.enabled。預設是 OFF。

勾選後將它設為 ON。說明文字寫著：在 Agents Window 與 Editor Window 中，本機 Agent Host 的 Copilot 工作階段都能開啟 Canvas。

如果你想直接寫在 settings.json，則是這樣：

settings.json

{
  "chat.canvases.enabled": true
}

另外，說明文字中寫著 "Newly created sessions pick up changes to this setting."。也就是說，修改設定後必須重新建立新的工作階段，已經開著的聊天不會套用。

Step 2：在 Copilot harness 中開啟新工作階段

Canvases 只適用於 Copilot harness 的工作階段。開始新工作階段時，記得確認 harness 是 Copilot。

Step 3：用 /create-canvas 描述想建立的畫面

在聊天欄輸入 /create-canvas 後，它會問你：「What should the canvas show or let users do?（這個 Canvas 要顯示什麼，或讓使用者做什麼？）」

這時只要用中文寫出你想要的畫面即可。awesome-copilot 的學習中心建議，在提示詞裡同時寫出 「人要在 UI 上做什麼」 和 「代理程式可以透過哪些動作操作」，這是訣竅。

我這裡用文章撰寫進度管理看板來舉例：

/create-canvas 請建立一個文章撰寫用的看板 Canvas。
欄位是「發想」「撰寫中」「審查」「已發布」。
人可以新增卡片，也可以拖曳移動卡片。
請讓代理程式可以呼叫 get_board / add_card / move_card。

接著，代理程式會在 .github/extensions/qiita-article-board/ 建立 Canvas 擴充功能。裡面包含 4 欄的看板畫面，以及 get_board / add_card / move_card 這三個動作；卡片資料則儲存在同一資料夾下的 artifacts/board.json。它還會幫忙重新載入擴充功能，並確認動作是否能正常運作，這點真的很實用。

產生出的檔案在檔案總管中看起來如下。extension.mjs 是 Canvas 定義，server.mjs 和 ui/ 是畫面，store.mjs 是儲存邏輯，而 board.test.mjs 則是測試。

Step 4：人和代理程式一起操作同一個看板

我先親手新增並移動卡片。在「發想」「撰寫中」「已發布」這些欄位中放入卡片，並可透過下拉選單或拖曳方式移動。

接著請代理程式幫忙新增卡片。

請把這篇文章公開前需要完成的任務，新增 5 張卡片到看板上。

結果看板上就新增了 5 張卡片（紅框標示的是新增的卡片）。

順帶一提，因為我沒有指定欄位，代理程式自己幫忙分配，結果還把其實還沒完成的「GitHub へ push して Qiita に公開する」放到了「已發布」欄（笑）。所以最好還是明確說出要放在哪一欄，例如「放到發想欄」。

接著，我又手動新增了一張「AI-103記事」卡片到「撰寫中」，然後問代理程式：

現在看板上「撰寫中」有哪些卡片？

代理程式會在聊天中出現 Invoking canvas action，並讀取看板內容，連我手動新增的卡片也一起回答了。

我甚至沒有特地告訴它「我有新增 AI-103記事」，但狀態卻已經共享了。我認為這就是這個功能的核心。 不必再用提示詞重新說明現況，真的方便很多。

如果把 Canvas 關掉了

根據官方文件，即使關掉也能從選單重新開啟（不過如前所述，我的環境無法實測）。

位置操作編輯器視窗Chat 檢視中的 New Chat (+) > CanvasAgents 視窗編輯區的 Add Tab (+) > Canvas編輯器視窗中的 Canvas 子選單，只會在支援的 Copilot harness 工作階段中，送出第一則訊息之後才會出現。如果找不到選單，先確認這一點。

可用環境・不可用環境

這是最容易踩雷的地方，我整理成表格如下。

整理官方文件的注意事項後，可歸納如下：

環境支援VS Code 桌面版 × Copilot harness × 本機 Agent Host 工作階段✅ 可用Claude harness / Codex harness❌ 不支援擴充功能主機的 Local 工作階段❌ 不支援遠端 Agent Host 工作階段❌ 不支援瀏覽器 / Web 用戶端❌ 不支援獨立視窗（auxiliary window）❌ 不支援特別容易卡住的是「Local harness 不會出現」這件事。Local 是 VS Code 內建的 harness，而 Copilot harness 則是基於 GitHub Copilot SDK 的另一套系統。

⚠️ 給企業／組織使用者的提醒
根據 Visual Studio Magazine 與 byteiota 的報導，VS Code 1.142 中如果管理者設定了沙箱或權限政策，聊天就必須在 Copilot harness 中執行，原本的 Local 聊天也會自動轉移到 Copilot。這對使用 Canvases 其實是加分的，但 Claude 或 Codex 無法使用這點，建議先確認。

海外是怎麼討論的？

除了官方資訊，我也調查了海外部落格、新聞與社群的反應。

從「提示詞來回」走向「共同編輯同一份內容」

byteiota 將 Canvases 評價為 從 prompting 轉向 co-editing（共同編輯）。該文章也提到，Windsurf 的 Agent Command Center 雖然也有類似看板的視圖，但 VS Code 的 Canvases 更進一步，因為它不是單純的任務清單，而是讓代理程式與開發者共享實際成果物的狀態。

個人部落格 theblackcloud 則很直白地說，與其一再問聊天「看板上還剩什麼？」，不如直接一起更新看板更方便。他們還舉了發行檢查清單、故障排除時用來記錄「調查結果與待確認事項」的看板等情境，印象很深。

GitHub 內部的人「每天都在用」

GitHub 官方部落格（"How canvases make agentic workflows visible, steerable, and cost-efficient"）中，作者提到自己幾乎 每天都在用 Canvases。這篇文章值得記住的重點有兩個。

① 可用的模式有 4 種

1. 清楚定義工作流程狀態
2. 將重要的判斷點顯示在畫面上
3. 立即保存進度與草稿
4. 明確標示人類的核准節點

文中也介紹了幾個實例，例如用來視覺化 Java 現代化流程（評估 → 修正 → 驗證 → 交付）的 Java Modernization Studio，以及管理個人網站內容的 Site Studio。

② 成本問題也寫得很誠實

建立 Canvas 需要一定成本，Site Studio 大約花了 2,000 AI credits，而現代化工具大約花了 3,000 AI credits。不過文中也指出，只要是會反覆使用的工作流程，這些成本就能透過減少反覆提示、上下文遺失與返工而回收。

另外，Microsoft 的開發者部落格也說明，像篩選器或選項選擇這類日常操作，可以直接由 程式碼處理，而不必呼叫 AI 模型，因此能節省等待時間與 AI credits。

💡 真正有感的地方，是把那些「每次都要叫 AI 又慢又貴」的操作，移到 Canvas 的 UI 裡處理。

已經公開的 Canvas 擴充功能也很有趣

awesome-copilot 的 Extensions 頁面列出了社群製作的 Canvas 擴充功能。

可擴充的功能Agent Arcade代理程式工作期間，可以玩 6 款復古小遊戲Agent Radar以地圖方式顯示你手邊的 Copilot 代理程式與子代理程式的結構與連線目的地Artifact Explorer安全瀏覽 PR 與 GitHub Actions 的成果物（測試結果、靜態網站等）Apng Studio將逐幀畫面轉出為 APNG 動畫Azure Cost Health Check以唯讀方式查看 Azure 成本、預測、預算警示與 Advisor 建議Azure Functions Hosted Skills從 Canvas 中建置、執行與除錯 Azure Functions 的 hosted skills從像 Agent Arcade 這種有趣的玩法，到 Azure 成本分析這類正經的業務用途，都有涵蓋，足以看出 Canvas 不只是「一個看板」而已。

Azure 方向也推出了「用來建立 Canvas」的外掛

9 月底，Microsoft 公開了 Azure Canvases（Azure Functions Hosted Skills / Azure Resources Query / Azure Cost Health Check）。到了 10 月 6 日，又介紹了可用來自行建立 Azure Canvas 的 Canvas authoring plugin，以及其基礎套件 @microsoft/canvas-toolkit（npm 套件）。

部落格中舉了這些例子：

• 透過 create-canvas skill 建立一個「列出資源群組的唯讀 Azure Canvas」
• 建立一個「管理 Azure Container Apps 擴縮的 Canvas」（設計成變更套用前先預覽）

這個 toolkit 包含 Azure 驗證、支援主題的 UI 元件、本機後端、狀態管理與即時更新、以及與代理程式整合的橋接能力。如果你想自己做一個專門給 Azure 用的畫面，這會是很值得參考的選項。

VS Code 和 GitHub Copilot App，該怎麼選？

看到這裡，你可能會想：「Canvas 不是 GitHub Copilot App 的東西嗎？」我一開始也有點混亂，整理後才釐清。

Canvas 擴充功能 同時支援 VS Code 與 GitHub Copilot App。大致上的使用方式如下：

觀點GitHub Copilot AppVS Code（1.142 以上）適合情境直接使用既有的官方／社群 Canvas在你正在寫的程式旁邊，建立或使用開發支援畫面Canvas 取得方式從 Customize > Canvas / Plugins 安裝用 /create-canvas 建立，或叫出在 App 中安裝的外掛顯示位置右側面板編輯器分頁（在 Agents 視窗中則是 Add Tab > Canvas）範例Azure 成本分析、資源搜尋、Functions 進度除錯狀態、任務看板、發行檢查清單VS Code 官方文件也說明：如果你想使用既有 Canvas，建議先在 GitHub Copilot App 裡安裝包含 Canvas 擴充功能的聊天外掛，再回到 VS Code，請代理程式列出可用的 Canvas 並開啟其中一個。

所以我會這樣分：

• 📊 想用現成的 → 在 Copilot App 安裝外掛（也可以在 VS Code 中呼叫）
• 💻 想要專案專用的畫面 → 在 VS Code 裡用 /create-canvas

我自己是選後者，做了一個文章用的看板。

應用點子

awesome-copilot 的學習中心列了幾個 /create-canvas 的提示詞範例。寫法上的重點，是要明確寫出「動作名稱」。

/create-canvas Create an issue triage canvas with list filtering, label editing, and quick-priority actions. Add capabilities for get_issues, update_priority, and apply_label.

/create-canvas Create a release checklist canvas that tracks milestones and owners. Add capabilities for add_item, assign_owner, mark_done, and export_summary.

既然中文也能做，我自己會想試這些：

• 文章／簡報資料的進度看板（前面示範的延伸）
• Gh-CUG 活動籌備清單（含負責人與期限）
• Azure 調查結果看板（以「已確認」「待確認」卡片管理）

另外，做完之後怎麼持續改善也很重要。學習中心建議，把第一次 /create-canvas 的結果視為 version 1，實際使用後找出阻力，再增減動作。對破壞性操作加上核准步驟，也別忘了。

容易踩雷的點

Q：設定已經打開了，怎麼還是沒有 Canvas？

A：請依序確認以下 4 點：

1. 設定修改後是否有 建立新的工作階段
2. harness 是否為 Copilot（Local 與 Claude / Codex 不會動）
3. 在編輯器視窗中，要先送出第一則訊息，選單才會出現
4. 你是不是在 WSL 或 SSH 等遠端連線 下使用（我就是因為這個原因無法打開分頁。官方文件也明確說遠端工作階段不支援）

就算分頁打不開，如果你自製的 Canvas 擴充功能有啟動本機伺服器，也可以直接把網址貼到內建瀏覽器開啟，至少可以操作畫面。這只是替代方案，但做測試時確實有用。

Q：/create-canvas 沒有出現在建議中

A：文件上寫的是「當 /create-canvas skill 可用時」，所以先確認 VS Code 已更新到最新版本（1.142 以上），再用新的工作階段試試看。

Q：Canvas 的狀態會保留嗎？

A：根據學習中心，狀態保存在哪裡取決於擴充功能怎麼設計。如果只需要單一工作階段，就存到 session 專用路徑；如果希望跨多個工作階段保留，就存到擴充功能專用路徑。這次文章中的看板，是被建立成儲存在 repo 內的 artifacts/board.json。

總結

這篇文章整理了 VS Code 1.142 新增的 Canvases。

• Canvases 是一個 在聊天旁邊，讓你與代理程式直接操作同一份成果物的共享畫面（Preview）
• 啟用方式是把 chat.canvases.enabled 設為 ON，然後在 新工作階段 使用 /create-canvas
• 目前只支援 桌面版 × Copilot harness × 本機工作階段
• 海外普遍認為這是從「prompting」走向「co-editing」；Azure 與趣味型擴充功能也已經陸續公開
• 現成內容適合走 Copilot App，而專案專用畫面則很適合在 VS Code 中用 /create-canvas
• 我實際做了一個文章用看板後，發現 人手動加入的卡片，代理程式也能不經額外說明就讀取（但 WSL 這類遠端連線無法用分頁打開）

我個人覺得，這個功能最有價值的地方，就是能把原本被聊天紀錄淹沒的狀態，真正放到一個看得見的地方。雖然現在還是 Preview，但之後我也會持續追蹤它的變化。

📣 GitHub Copilot User Group Japan（Gh-CUG）公告

讀到這裡的人，請容我做個小小宣傳！

我參與營運的 GitHub Copilot User Group Japan（Gh-CUG / ジーカグ），是一個希望「讓 GitHub Copilot 被更多人認識與使用」的使用者社群。

我們的座右銘是 「不是什麼都知道，只知道自己懂的那部分」。不需要完美的知識，也不需要驚人的經歷。只要帶著「我做到了這個！」、「我卡在這裡！」，大家一起輕鬆愉快地學習就好。學生、初學者、非開發者也都非常歡迎！

系列風格氛圍🌙 ゆるよな Gh-CUG線上（夜間）輕鬆自在，隨時歡迎加入🔥 Gh-CUG Night線上偏實作、較深入🤝 Gh-CUG Meetup線下實體交流、熱鬧互動像這次 Canvases 這種「剛推出的新功能實際玩看看」的話題，在社群裡也很常引起熱烈討論。也很期待聽到你分享「我做了這樣的 Canvas！」！

🔗 Connpass 群組頁面： GitHub Copilot User Group Japan

官方 Hashtag 是 #GhCUG。

參考資料

官方

• Visual Studio Code 1.142 - Canvases (Preview)
• VS Code Docs - Use canvases with the Copilot harness
• Working with canvas extensions in the GitHub Copilot app（GitHub Docs）
• How canvases make agentic workflows visible, steerable, and cost-efficient（GitHub Blog）
• Build with Azure Canvases: a shared workspace for agents（Microsoft Developer Blog）
• Build Azure canvases with the Canvas authoring plugin（Microsoft Developer Blog）

社群・海外文章

• Working with Canvas Extensions（awesome-copilot Learning Hub）
• Community Canvas Extensions（awesome-copilot）
• VS Code 1.142 Brings AI Canvases, Tighter Agent Controls and a New Model Picker（Visual Studio Magazine）
• VS Code 1.142: Copilot Canvases, Portable Chats, Harness Mandate（byteiota）
• VSCode 1.142 - Canvases bring interactive workspaces to agent workflows（The Black Cloud）

原文出處：https://qiita.com/shahin0809/items/81e6a6737b2254bdc6ed