VScode on Wayne's blog | 偉恩的部落格 | 技術博客

VSCode MCP Servers 與專案導入 Playwright 自動化測試分享

Sat, 30 Aug 2025 00:00:00 +0000

本篇將分享如何在 VSCode 開發中，結合 MCP Servers 與 Playwright，製作現代化自動化測試的流程。

MCP

MCP 全名為 Model Context Protocol，中文為「模型上下文協定」，是一種開放協定，2024 年 11 月由開發模型 Claude 的美國新創公司 Anthropic 推出，提供了一種標準化的方式，讓 AI 向外部工具請求使用服務和數據。並且透過提供 AI 上下文指示，讓 AI 決定使用哪些工具、按什麼順序以及如何將工作流程連結在一起以完成任務。

換句話說，MCP 不只能當作轉接頭，也像是提供 AI 一本使用說明書，幫助 AI 理解企業數據和應用情境，例如內部數據的結構與存取方式、重要的業務邏輯與規則，以及專業術語等。

以銀行客服系統導入 AI 為例，當客戶詢問：「能否提前還清貸款？」MCP 能提示 AI 該銀行的房貸規則在哪裡查詢、違約金計算方式，和哪些客戶符合提前還款條件等。

典型應用：AI Copilot、Code Search、Test Runner、Remote Workspace 等
讓 VSCode extension 能像微服務一樣，與外部系統互動

MCP Server 架構圖：

MCP 主機（MCP Host）

Claude、ChatGPT…等需要透過 MCP 存取外部工具的 AI 模型，它們會請求 MCP 來幫助執行各種操作。這些 AI 模型就像筆電本身，需要透過轉接頭來連接外部裝置。

例如：Claude、ChatGPT、Gemini、Llama…等 AI 模型。

MCP 客戶端（MCP Client）

AI 存取 MCP 的程式碼，它讓 AI 可以透過 MCP 來請求特定的工具或數據來源。這就像筆電的 USB 連接埠，負責發送請求給轉接頭，讓筆電知道該怎麼存取外部設備。

例如：Anthropic 官方 MCP SDK、OpenAI MCP client library、Python/TypeScript MCP client 實作…等。

MCP 伺服端（MCP Server）

Slack、Gmail、Google 日曆、Mac 檔案系統等，提供 AI 所需的功能與數據，可以是遠端應用程式或本地數據來源。MCP Server 就像滑鼠、鍵盤、硬碟等各種 USB 設備，透過轉接頭連接到筆電。

以 VSCode 為例，MCP Servers 作為 VSCode 與外部工具或數據源之間的媒介，像是使用者可以從 Google Drive 調取數據檔案，也可以從 GitHub 創建任務分支和查詢程式碼。

例如：Google Drive MCP Server、GitHub MCP Server、VSCode MCP Server、Notion MCP Server、Jira MCP Server…等。

VSCode MCP Server 是什麼？

VSCode 官方也提出了自己的 MCP Servers，目標是讓 extension 能以更彈性的方式與外部服務溝通，突破過去 LSP（Language Server Protocol）或 Debug Adapter Protocol 的限制。

MCP Server 特色：

支援多種 context（如 AI、語意分析、測試、執行環境等）
可同時處理多種資料流與事件，適合大型、複雜的 extension
典型應用：AI Copilot、Code Search、Test Runner、Remote Workspace 等
讓 VSCode extension 能像微服務一樣，與外部系統互動

Playwright 是什麼？

Playwright 是由 Microsoft 推出的現代化瀏覽器自動化測試框架，支援 Chromium、Firefox、WebKit 三大主流瀏覽器，並可用 TypeScript、JavaScript、Python、C# 等語言撰寫測試腳本。Playwright 具備跨平台、API 直覺、可錄製操作、支援多分頁與多瀏覽器等特性，適合用於前端、Web App、SPA、Webview 等多種場景的自動化測試。

主要特色：

Playwright 讓開發者能快速撰寫、執行、維護自動化測試腳本，是現代前端開發與測試的主流選擇之一。

Playwright 與其他自動化操作工具的差異

工具	支援瀏覽器	語言支援	API/功能特色	CI/CD 整合	其他特色
Playwright	Chromium、Firefox、WebKit（含 Safari）	JavaScript、TypeScript、Python、C#	API 現代化且直覺，原生多分頁/多瀏覽器、網路攔截、等待同步、錄製腳本	易於整合	進階功能多
Selenium	幾乎所有主流瀏覽器	Java、Python、C#、JS 等	API 較繁瑣、較舊，等待/同步需手動處理	易於整合	穩定性高、跨平台
Cypress	Chromium、Firefox	JavaScript、TypeScript	API 現代化且直覺，原生等待/同步、無多分頁/多瀏覽器	易於整合	內建測試儀表板

重點差異說明：

Playwright 支援三大主流瀏覽器（含 Safari/WebKit），API 現代化，原生支援多分頁、網路攔截、等待同步，適合複雜互動測試。
Selenium 歷史悠久，支援最多語言與瀏覽器，但 API 較繁瑣，等待/同步需手動處理，適合跨平台、穩定性要求高的場景。
Cypress 以前端 E2E 測試為主，API 直覺，原生等待，但僅支援部分瀏覽器，不支援多分頁，適合前端 SPA/React/Vue 等專案。

Playwright 在現代前端、Web App、VSCode extension 測試場景下，通常能提供更高效、易用的自動化體驗。

Playwright 導入方式

安裝 Playwright 套件

1
2


npm install -D @playwright/test
npx playwright install

這會安裝 Playwright 及所需瀏覽器。

建立測試目錄與設定檔

建立 tests/ 目錄，並新增 playwright.config.ts：

playwright.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


import { defineConfig, devices } from "@playwright/test"

export default defineConfig({
 testDir: "./playwright", // 測試腳本目錄
 timeout: 30 * 1000,
 expect: {
 timeout: 5000
 },
 fullyParallel: true,
 forbidOnly: !!process.env.CI,
 retries: process.env.CI ? 2 : 0,
 workers: process.env.CI ? 1 : undefined,
 reporter: [["list"], ["html", { outputFolder: "playwright-report", open: "never" }]],
 use: {
 baseURL: "https://localhost:8082/", // Vite dev server https
 ignoreHTTPSErrors: true,
 trace: "on-first-retry",
 headless: false,
 viewport: { width: 1280, height: 800 },
 ...devices["Desktop Chrome"]
 }
})

撰寫第一個測試腳本

例如建立一支跑自動跑登入流程的腳本：

tests/login.spec.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { test, expect } from '@playwright/test';

test("登入流程測試", async ({ page }) => {
 await page.goto("https://{我要測試的網站}/login");
 await page.fill("input[name="username"]", "wayne");
 await page.fill("input[name="password"]", "123456");
 await page.click("button[type="submit"]");
 await expect(page).toHaveURL(/dashboard|home/);
 await expect(page.locator(".user-info")).toContainText("wayne");
});

執行測試

1
2
3
4
5
6
7
8


# 執行所有測試：
npx playwright test

#執行單一測項（指定檔案）：
npx playwright test tests/login.spec.ts

# 執行單一測項（指定測試名稱）：
npx playwright test -g "登入流程測試"

Playwright 會自動啟動瀏覽器並執行所有或指定的測試腳本。

進階設定與 CI 整合

可在 playwright.config.ts 設定多瀏覽器測試、環境變數、報告格式等
可在 GitHub Actions、GitLab CI 等自動化流程中執行 Playwright 測試

Playwright 在 VSCode Extension/MCP Server 專案的應用

驗證 extension Webview UI/互動
測試 MCP Server API 回應與錯誤處理
整合 CI/CD，確保 extension 發布品質

Playwright 讓開發者能快速撰寫、執行、維護自動化測試腳本，是現代前端開發與測試的主流選擇之一。

Playwright 的設定值與常用元件介紹

playwright.config 常用設定值

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80


import { defineConfig } from '@playwright/test';

export default defineConfig({
 testDir: './tests', // 測試檔案目錄
 timeout: 30000, // 單一測試逾時（毫秒）
 retries: 1, // 測試失敗時重試次數
 reporter: [['list'], ['html']], // 測試報告格式
 fullyParallel: true, // 是否完全平行執行所有測試
 forbidOnly: true, // 禁止 .only，避免漏跑測試
 workers: 2, // 平行執行的 worker 數量
 outputDir: 'test-results/', // 測試產生的快照、截圖、trace 等輸出目錄
 testIgnore: ['**/skip/**'], // 忽略哪些測試檔案（glob pattern）
 testMatch: ['**/*.spec.ts', '**/*.test.ts'], // 匹配哪些測試檔案（glob pattern）
 offline: false, // 是否離線模式（true | false）
 use: {
 headless: true, // 是否無頭模式
 baseURL: 'http://localhost:3000', // 預設 base URL
 viewport: {
 width: 1280,
 height: 720,
 }, // 預設瀏覽器視窗大小
 ignoreHTTPSErrors: true, // 忽略 HTTPS 錯誤
 video: 'retain-on-failure', // 錄影設定: 'on' | 'off' | 'retain-on-failure'
 screenshot: 'only-on-failure', // 截圖設定: 'on' | 'off' | 'only-on-failure'
 trace: 'retain-on-failure', // Trace 記錄: 'on' | 'off' | 'retain-on-failure'
 storageState: 'state.json', // 預載入登入狀態檔
 locale: 'zh-TW', // 預設語系
 colorScheme: 'dark', // 顏色主題: 'light' | 'dark' | 'no-preference'
 permissions: [
 'geolocation',
 'notifications',
 ], // 權限設定
 geolocation: {
 latitude: 25.033,
 longitude: 121.5654,
 }, // 預設地理位置
 timezoneId: 'Asia/Taipei', // 預設時區
 userAgent: 'MyCustomAgent/1.0', // 自訂 User-Agent
 httpCredentials: {
 username: 'user',
 password: 'pass',
 }, // HTTP 基本認證
 extraHTTPHeaders: {
 'x-test-header': 'test',
 'authorization': 'Bearer token',
 }, // 額外 HTTP 標頭
 acceptDownloads: true, // 是否允許下載檔案
 isMobile: false, // 是否模擬行動裝置（true | false）
 deviceScaleFactor: 1, // 裝置像素比例（預設 1）
 hasTouch: false, // 是否支援觸控（true | false）
 javaScriptEnabled: true, // 是否啟用 JS（true | false）
 recordVideo: {
 dir: 'videos/',
 size: { width: 1280, height: 720 },
 }, // 錄影輸出目錄與尺寸
 serviceWorkers: 'allow', // Service Worker 設定: 'allow' | 'block'
 strictSelectors: true, // 是否嚴格選取器（true | false）
 userDataDir: './user-data', // 使用者資料目錄
 launchOptions: {
 slowMo: 100,
 // 其他啟動選項可加在這裡
 }, // 啟動瀏覽器時的額外選項
 },
 projects: [ // 多瀏覽器/多環境測試設定
 {
 name: 'chromium',
 use: { browserName: 'chromium' },
 },
 {
 name: 'firefox',
 use: { browserName: 'firefox' },
 },
 {
 name: 'webkit',
 use: { browserName: 'webkit' },
 },
 ],
 globalSetup: './global-setup.js', // 全域初始化腳本
 globalTeardown: './global-teardown.js', // 全域清理腳本
});

更多請參考官方文件

常用元件與方法

類型	名稱/方法	說明
測試物件	`test`	定義測試案例
頁面物件	`page`	操作瀏覽器分頁
斷言	`expect`	驗證結果
定位器	`locator`	精準選取元素
填值	`fill`	填入表單欄位
點擊	`click`	點擊按鈕或元素
取得文字	`textContent`	取得元素文字內容
等待	`waitForSelector`	等待元素出現
螢幕截圖	`screenshot`	擷取頁面或元素畫面
輸入鍵盤	`keyboard`	鍵盤事件
輸入滑鼠	`mouse`	滑鼠事件
請求物件	`request`	API 請求測試
瀏覽器物件	`browser`	控制瀏覽器（多分頁、多瀏覽器）
配置	`defineConfig`	Playwright 設定檔
錯誤截圖	`trace`	錯誤追蹤與錄影

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


// 定義測試案例 test
test('首頁載入', async ({ page }) => {
 await page.goto('https://example.com');
});

// 操作瀏覽器分頁 page
await page.goto('https://example.com');

// 驗證結果 expect
await expect(page).toHaveURL('https://example.com');

// 精準選取元素 locator
const btn = page.locator('button.login');

// 填入表單欄位 fill
await page.fill('input[name="username"]', 'wayne');

// 點擊按鈕或元素 click
await page.click('button[type="submit"]');

// 取得元素文字內容 textContent
const txt = await page.textContent('.user-info');

// 等待元素出現 waitForSelector
await page.waitForSelector('.loading-done');

// 擷取頁面或元素畫面 screenshot
await page.screenshot({ path: 'home.png' });

// 鍵盤事件 keyboard
await page.keyboard.press('Enter');

// 滑鼠事件 mouse
await page.mouse.click(100, 200);

// API 請求測試 request
const res = await request.get('/api/health');

// 控制瀏覽器 browser
const browser = await chromium.launch();

// Playwright 設定檔 defineConfig
export default defineConfig({ testDir: './tests' });

// 錯誤追蹤與錄影 trace
npx playwright show-trace trace.zip

更多元件與 API 可參考 Playwright 官方文件

實戰一：自動化測試 API healthz check

建立 MCP Server 專案（Node.js/TypeScript）
在 extension 內啟動 MCP Server，並與前端溝通
撰寫 Playwright 測試腳本，模擬 VSCode extension 與 MCP Server 的互動

1
2
3
4
5
6
7
8
9


// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
 testDir: './tests',
 use: {
 headless: true,
 baseURL: 'http://localhost:3000',
 },
});

1
2
3
4
5
6


// tests/mcp-server.spec.ts
import { test, expect } from '@playwright/test';
test('MCP Server health check', async ({ request }) => {
 const res = await request.get('/health');
 expect(res.ok()).toBeTruthy();
});

實戰二：Playwright 自動化流程範例

以下以我自己的專案的登入流程自動化測試為例透過打開我的網站登入頁，並輸入帳號與密碼後進行登入，登入後檢查頁面上是否存在「Dashboard」字樣(因我的網站登入後會導向到 Dashboard 頁面)。

tests/login.spec.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { test, expect } from '@playwright/test';

test('登入流程測試', async ({ page }) => {
 await page.goto('https://{我的網站}/');
 await page.fill('input[name="username"]', 'wayne');
 await page.fill('input[name="password"]', '123456');
 await page.click('button[type="submit"]');
 // 驗證是否登入成功
 await expect(page).toHaveURL(/dashboard|home/);
 await expect(page.locator('.user-info')).toContainText('wayne');
});

封裝成一個 helper 好了：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


import { chromium, Page } from "@playwright/test"

export async function doLogin(page: Page, saveStorageStatePath?: string) {
 await page.goto("https://{我的網站}/")
 await page.fill('input[name="username"], input[placeholder="帳號"], input[type="text"]', "wayne")
 await page.fill('input[name="password"], input[placeholder="密碼"], input[type="password"]', "123456")
 await page.click('button[type="button"]')
 await page.waitForSelector("text=Dashboard")
 if (saveStorageStatePath) {
 await page.context().storageState({ path: saveStorageStatePath })
 }
}

// 若直接執行本檔案，則自動產生 storageState.json
if (require.main === module) {
 ;(async () => {
 const browser = await chromium.launch()
 const page = await browser.newPage()
 await doLogin(page, "playwright/storageState.json")
 await browser.close()
 })()
}

延伸製作一個 登入並切換語系 的自動化測試腳本：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


import { test, expect } from "@playwright/test"
import { doLogin } from "./login-helper"
test("測試登入流程與切換語系功能", async ({ page }) => {
 await test.step("測試登入流程環節", async () => {
 await doLogin(page)
 await page.waitForTimeout(1000)
 await page.screenshot({ path: "debug-login.png" })
 await expect(page.locator("text=Dashboard").first()).toBeVisible()
 })

 await test.step("測試切換語系為简体中文", async () => {
 await page.locator("#btn-lang").hover()
 await page.locator(".v-list-item-title", { hasText: "简体中文" }).click()

 // 驗證文字是否變成簡體中文了
 await expect(page.locator("text=仪表板").first()).toBeVisible()
 })

 await test.step("測試切換語系為英文", async () => {
 await page.locator("#btn-lang").hover()
 await page.locator(".v-list-item-title", { hasText: "English" }).click()

 // 驗證文字是否變成英文了
 await expect(page.locator("text=Dashboard").first()).toBeVisible()
 })

 await test.step("測試切換語系為繁體中文", async () => {
 await page.locator("#btn-lang").hover()
 await page.locator(".v-list-item-title", { hasText: "繁體中文" }).click()

 // 驗證文字是否變成繁體中文了
 await expect(page.locator("text=儀錶板").first()).toBeVisible()
 })
})

實戰三：Playwright 串聯 Vitest UI 跑單元測試

串聯一下之前在闡述單元測試、元件測試，並學習在自己的 Vue3 專案中加入 Vitest！，自己撰寫的 Utils tools function 的單元測試好了，讓自己後續可以直接打打字，讓 Agent 幫我跑這些單元測試(工程師沒有最懶，只有更懶)。

test-tools-unit.spec.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


import { test, expect } from "@playwright/test"

test("執行 tools.test.ts 所有 Vitest 單元測試", async ({ page }) => {
 // 檢查 Vitest UI 服務
 try {
 const response = await page.goto("http://localhost:51204/__vitest__/")
 if (!response || !response.ok()) {
 throw new Error("Vitest UI 服務未啟動或無法連線，請先執行 npx vitest --ui")
 }
 } catch (e) {
 throw new Error("Vitest UI 服務未啟動或無法連線，請先執行 npx vitest --ui")
 }

 // 搜尋 tools.test.ts
 await page.fill('input[placeholder="Search..."]', "tools.test")
 await page.keyboard.press("Enter")

 // 點擊 tools.test.ts 測試檔
 await page.click("text=tools.test.ts")

 // 點擊 rerun file 按鈕
 const rerunButton = await page.$('button[title="Rerun file"], button[aria-label="Rerun file"]')
 if (rerunButton) await rerunButton.click()

 // 等待測試進入 running 狀態
 await page.waitForSelector("text=Running", { timeout: 10000 }).catch(() => {})

 // 等待 running 消失
 await page.waitForSelector("text=Running", { state: "detached", timeout: 60000 }).catch(() => {})

 // 等待「All tests passed in this file」出現以驗證單元測試是否通過
 await page.waitForSelector("text=All tests passed in this file", { timeout: 20000 })
 const successText = await page.textContent("text=All tests passed in this file")

 console.log("測試摘要:", successText)
 expect(successText).toContain("All tests passed in this file")
})

＊流程非常的彈性可控，且可以依照自己的需求去撰寫測試腳本，達到自動化測試的目的，以上就舉幾個較為單純的腳本內容，可以依各自業務需求去撰寫自己需要的腳本。
＊若你的 VSCode 有開啟 chat.mcp.enabled，則可直接透過 VSCode Chat 的 Agent 模式進行即時的測試腳本撰寫與調試，加速完成你的測試項目腳本，甚至直接透過 Chat 來執行你的測試項目。
＊可以在開發時，多在 DOM 上埋入 id、class，這樣當執行自動化驗證的操作時，可以更輕鬆的獲取到你所需要的元素，確保自動化測試流程的穩定與品質。

開發心得與建議

MCP Server 架構彈性高，適合 AI/自動化/大型 extension。
建議在開發前端代碼時，在 DOM 上多埋入 id、class，方便 Playwright 定位元素，確保自動化測試流程的穩定與品質。
建議可以透過 VSCode Chat 的 Agent 模式進行即時的測試腳本撰寫與調試，記得 vscode 的settings 要開啟 chat.mcp.enabled。
Playwright 腳本可直接整合 CI，快速驗證功能。
建議在使用 VSCode 時，安裝 Playwright 的官方 extension，方便在 VSCode 內撰寫、執行測試腳本。
建議將 MCP Server、Playwright 測試與 extension 專案分層管理，方便維護。
Playwright 支援多瀏覽器測試，建議在 CI 中同時驗證 Chrome/Firefox/WebKit。

結語

VSCode MCP Servers 與 Playwright 的結合，讓 extension 開發與測試更現代化、流程自動化。推薦給有志於 VSCode 生態圈、AI 工具、測試自動化的開發者！

如有相關問題，歡迎留言討論或參考官方文件。

【VSCode】重置儲存在雲端的設定、擴充套件與資料！

Fri, 31 Mar 2023 00:00:00 +0000

參考網站
 參考網站
 參考網站

Visual Studio Code 的「擴充套件」裝太多，而且啟用了「設定同步」功能，不好移除。「設定同步」功能會幫我在多台電腦之間自動同步所有使用者設定、自訂快速鍵定義、擴充套件、設定檔(Profile)等等；直接砍掉重裝，會因為「設定同步」功能而自動從雲端同步設定回來。這篇文章就來說明如何清空雲端資料的過程。

問題發生過程

原本的需求其實很簡單，就是單純想把擴充套件全部移除重新安裝，但又不想一個一個移除；所以我這樣移除：

關閉 Visual Studio Code。
開啟檔案總管，進入 %USERPROFILE%\.vscode\extensions 資料夾。
直接刪除 %USERPROFILE%\.vscode\extensions 整個資料夾。
重新啟動 Visual Studio Code。

這樣就可以移除所有的 Visual Studio Code 擴充套件！👍

但是我啟用了 Visual Studio Code 的「設定同步」功能，使用這個功能需要登入 GitHub 或 Microsoft 帳戶，而只要你登入之後，發現本地沒有任何擴充套件，他就會開始從雲端同步設定回來！

正確的操作步驟說明

為了解決我的問題，正確的操作步驟應該是：

備份目前的設定檔

由於設定檔可以匯出匯入，所以預先匯出已經設定好的設定檔，日後匯入就會很方便。

清除雲端中的資料

這裡對我來說最難的地方在於找到「清除雲端中的資料」這個功能，官網文件的 How do I delete my data? 章節描述完全是錯誤的。

刪除所有擴充套件

此時就可以用上個段落所寫的技巧快速刪除所有擴充套件。

重新開啟設定同步

重新登入「設定同步」的帳號即可重新開始同步設定！

如何清除雲端中的資料

其正確的清除方法步驟如下：

先確定設定同步已開啟

按下 F1 ➡️ 搜尋 Settings Sync: Show Synced Data 命令

在設定同步視窗的右上角點擊 ... 並點選 清除雲端中的資料… 選項

點擊「重設」即可清除雲端中資料，並在你所有的裝置上停止同步

重設 VSCode 設定同步認證

如果每次開啟 Visual Studio Code 都需要登入一次設定同步的話，可能代表你的認證資訊已經亂掉了，需要參考官方文件的 Troubleshooting keychain issues 章節來修復這個問題。

如果是 Windows 的話，透過 PowerShell 執行以下命令即可：

1

cmdkey /list | Select-String -Pattern "LegacyGeneric:target=(vscode.+)" | ForEach-Object { cmdkey.exe /delete $_.Matches.Groups[1].Value }

【Polacode】一款好用的 VSCode 截圖套件推薦

Tue, 14 Feb 2023 00:00:00 +0000

常常會在社群中看到有些開發者在問問題或是在做討論時，會有需要展示程式碼的部分，這時候如果直接講程式碼貼出來，在沒有排版的情況下，光是要了解對方的程式碼可能就需要一段時間，更何況是要從中找出問題，這樣其實是非常浪費時間的，所以今天來介紹一個相當好用的 VSCode 套件 - 【Polacode】，這個套件可以輕鬆將程式碼做美美的截圖！

如何使用？

到 VSCode 的 Extensions，輸入關鍵字： Polacode。

然後把第一個安裝起來，我們就可以開始截圖啦！

使用快捷鍵：「ctrl + shift + p」 (Mac 系統用 command + shift + p )，找到「Polacode📸」並執行。

你的畫面應該會出現這樣：

接著就照著上面的步驟去操作：

1
2
3
4


console.log('0. Run command `Polacode 📸`')
console.log('1. Copy some code')
console.log('2. Paste into Polacode view')
console.log('3. Click the button 📸')

複製你要截圖的程式碼區塊。
在 Polacode 的 file 裡貼上。
點擊按鈕截圖。

完整流程如下：

注意事項

Polacode 會連你的主題一起截取。
Polacode 的 file 會影響你的成品，因此 file 內因為擠壓而換行，儲存出來的成品也會換行。

介紹這個套件是希望在跟其他開發者討論程式碼，或是自己有撰寫部落格與文章的習慣時，可以讓對方或讀者有個良好的閱讀體驗，閱讀起來會更加順暢！

今天來搞一個屬於自己的 VScode Extension 吧！

Tue, 22 Nov 2022 00:00:00 +0000

參考網站
 參考網站
 參考網站

前言

VScode 使用者一定會安裝各種 Extension 來建立一個適合自己的開發環境，而這些強大的 Extension 大部分都由世界各地的愛用者開發並發布(publish) ，一切都是為了要讓 VSCode 更加實用上手甚至美觀。

這篇就是要分享如何建立並發佈一個 Extension，英文程度不錯的建議直接閱讀官方文件，會有更加詳細的解說

開發環境配置

在開始前，請照下方指示正確設置自己的環境。

確認已安裝 nodejs 與 npm

1

node -v && npm -v

如未安裝兩者，請先至 Nodejs 官方網站下載。npm 會隨著 nodejs 下載一併被安裝，有時候您可能使用過舊的 npm，這時您可以使用以下指令更新它到最新版。

1

npm install -g npm@latest

如果正確安裝了以上兩者，會跳出兩行版本號資訊。

export：

1
2


v16.15.0
8.15.1

安裝 yoman

Yoman 是一款流行已久的code generator，可以允許我們使用yoman設置專案的樣板，並讓我們使用 yo 指令快速產生樣板專案。

VSCode 官方已經發布了 VSCode Yoman 專案，並且定期更新，因此我們可以直接使用 yo 指令產生 VSCode Extension，無需手動開發 yoman 樣板。

請使用以下指令安裝yoman與VSCode Extension Generator：

1

npm install -g yo generator-code

安裝 yoman 後，再次使用版本號指令確認有無正確安裝：

1

yo --version

使用 yo 快速產生第一個 Extension 專案

首先，於 terminal 進入一個要放置專案的資料夾後，使用指令：

1

yo code

generator 會跳出提示，讓我們選擇要產生的 extension 種類：

這些 Extension 選項的描述與說明如下：

Extension 選項	描述
New Extension(Typescript)	產生使用typescript開發的extension專案
New Extension(Javascript)	產生使用javascript開發的extension專案
New Color Theme	配置VSCode介面顏色的擴充套件專案(詳見: Color Theme)
New Language Support	程式語言(Programming Languages)擴充套件
New Code Snippets	程式碼片段擴充套件
New Keymap	快捷鍵擴充套件，keymap讓使用者得以在vscode中使用vim、sublime等等不同編輯器的快捷鍵開發。
New Extension Pack	打包多個已發佈的extension，讓使用者一鍵快速安裝。
New Language Pack (Localization)	配置VSCode編輯器多國語氣的擴充套件。

我們依序輸入如下：

What type of extension do you want to create?
選擇你要建立的專案類型
這邊我選擇第一個 New Extension(Typescript) 選項
What’s the name of your extension?
Extension 名稱: 對應到 package.json “displayName”
這裡我輸入： wconvert
What’s the identifier of your extension?
識別碼：對應到 package.json “name”
這裡我輸入： wconvert
What’s the description of your extension?
描述: 對應到 package.json “description”
這裡我輸入： my first vscode extension practice.
Initialize a git repository?
是否要使用 git
Bundle the source code with webpack?
是否要使用 webpack 做原始碼的 bundle
Which package manager to use?
要使用哪個套件管理工具

讓子彈飛一會兒，最後 generator 會詢問是否使用 vscode 打開，這邊選擇打開。

Extension 專案重點相關檔案介紹

打開後，我們會看到一個 nodejs 的 typescript 專案，結構如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


 ├── .vscode
 │ ├── extensions.json
 │ ├── launch.json
 │ ├── settings.json
 │ └── tasks.json
 ├── node_modules
 ├── src
 │ ├── extension.ts
 │ └── test
 │ ├── runTest.ts
 │ └── suite
 │ ├── extension.test.ts
 │ └── index.ts
 ├── .eslintrc.json
 ├── .gitignore
 ├── .vscodeignore
 ├── CHANGELOG.md
 ├── README.md
 ├── package-lock.json
 ├── package.json
 ├── tsconfig.json
 └── vsc-extension-quickstart.md

.vscode/*： workspace 設定

檔案名稱	說明
task.json	設定 defaultBuild Task，用於 compile extension 專案的 typescript 程式。
launch.json	配置 debug mode 的兩個選項：Run extension 與 Test extension，用於執行 extension 主程式與相關測試程式，程式執行前，會先執行 defulat buildTask。
settings.json	extension 專案的設定檔，此處的設定會覆蓋 user settings 跟 default settings。
extensions.json	設定用於輔助 extension 專案安裝的 extension recommendations list，此處推薦安裝 eslint extension。

src/extensions.ts： 主程式檔案
src/test.ts： 測試程式檔案
.eslintrc.json：用於 extension 專案的 eslint 設置
.vscodeignore：用於忽略不打包進發布套件的專案檔案
tsconfig.json：用於專案 ts compiler 的設定選項
package.json：用於配置 node 相關依賴與相關 npm script，在 extension 專案裡，package.json 亦用於配置 extension 重要相關設定 (詳見: Extension Manifest)
vsc-extension-quickstart.md：產生的 extension 專案的 markdown 說明文件

Extension 專案程式簡介

讓我們打開 extension.ts 吧，打開後可以看見 extension.ts 裡面有個 active function 跟 deactive function。

active function 為 extension 程式的進入點。當 extension 被 active 事件啟動時，即會執行 extension 程式。

因此我們可以查看 pakcage.json，package.json 配置了 activeEvents 清單，可以看到清單裡列出跟active 有關的設定 activationEvents。

package.json

1
2
3
4
5
6
7


{
 // ...
 "activationEvents": [
 "onCommand:wconvert.helloWorld"
 ],
 // ...
}

activationEvents 指定了一個 hello world command，此即是說，當使用者執行 hello world command 時，extension 即會活躍並執行 active function。

此處的 onCommand 語法為：

1

onCommand: ${commandId}

那麼，command 的 id 是在哪裡配置的呢？

一樣是在 package.json 裡，我們可以到 contributes 屬性 (Contribution Point: 詳見 Contribution Point) 下面查看：

package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


{
 // ...
 "contributes": {
 "commands": [
 {
 "command": "wconvert.helloWorld",
 "title": "Hello World"
 }
 ]
 },
 // ...
}

可以看到在 contrubutes 屬性下面已經配置了 commands 清單，裡面條列著一個 command 設定，此處 command 設定的語法為：

1
2
3
4
5
6
7


{
 /**
 * 被產生的Command會預設使用extension的id作為namespace，亦可自訂其他Namespace名稱
 */
 "command": ${自定義的command-id},
 "title": ${Command的標題內容}
}

當我們使用 Command Palette (Cmd/Ctrl + Shift + P) 搜尋 Command 並執行時，是使用 Command 的 Title 搜尋。

好，現在我們已經了解如何在 Contribution Point 設定簡單的 Command id 跟 title，以及設定它為活躍 extension 的 event。現在回到 extension.ts 的 active function 吧！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


export function activate(context: vscode.ExtensionContext) {

 // Use the console to output diagnostic information (console.log) and errors (console.error)
 // This line of code will only be executed once when your extension is activated
 console.log('Congratulations, your extension "wconvert" is now active!');

 // The command has been defined in the package.json file
 // Now provide the implementation of the command with registerCommand
 // The commandId parameter must match the command field in package.json
 let disposable = vscode.commands.registerCommand('wconvert.helloWorld', () => {
 // The code you place here will be executed every time your command is executed
 // Display a message box to the user
 vscode.window.showInformationMessage('Hello World from wconvert!');
 });

 context.subscriptions.push(disposable);
}

我們可以看到，active function 裡面在 extenions 活躍後將註冊我們在 Contribution Point 那邊設定的 command id，並且有一個 callback 函式，當我們配置的 command 執行之後，即會在 vscode 裡跳出顯示「Hello World from day05-first-command!」的訊息。

這個註冊過後的 command 函式 (disposable) 會再 push 進 extension context 裡面，如此當 extension 被關閉後，VSCode 就可以自動釋放 listen 這個 command 的相關資源。

執行 extension 專案應用程式

讓我們來執行 extension 吧，vscode 專案已經幫我們配置好了 lanunch.json，因此我們可以在 debug mode 裡執行 extension。讓我們點開「Run and Debug」，再點擊 sidebar 上方的 Run Extension 旁的執行按鈕開始 extension 吧！(此處的快捷鍵為 F5)

執行後，vscode 會開啟一個新的 vscode 的 window 視窗，window 視窗上的 title 會註明這個視窗為 [Extension Development Host] 並預設載入 extension 了，我們可以在這個視窗操作我們開發中的 extension，並且使用中斷點偵錯。

檢查已被註冊的 command

先來檢查一下剛才註冊的 command，在 Contribution Point 裡宣告的 Command，一樣在 Keyboard Shortcuts 下方可以搜尋的到。從 Manager > Keyboard Shortcuts 進入 Keyboard Shortcuts 頁中，並在搜尋條上輸入 wconvert，使用 extension id 來列出剛才註冊的 command。

輸入後我們可以看到，Command 已正確被註冊。

執行註冊後的 Command

現在，我們打開 Command Palette (快捷鍵：Cmd/Ctrl + Shift + P)，輸入 hello world，使用註冊的 Command Title 查找到 command。

然後，點擊下去，我們可以看到 vscode 的 window 正確跳出「Hello World from day05-first-command!」訊息。

然後，我們回到原本專案的 Vscode Window，我們可以在專案的 debug console 檢視 active function 下面的 console.log 訊息。

加入套件邏輯

這邊可以依照你的需求進行套件邏輯的開發，我只是寫來玩而已，此處參考即可！

註冊自己想要使用的 Command

我打算製作以下幾個功能：

輸入指定的時間格式，會在當前檔案指標位置插入產生的時間戳
輸入指定的時間格式，僅會在vscode 的 window 顯示
將選取起來的時間戳，轉換為指定時區的時間格式(這邊以 YYYY-MM-DD hh:mm:ss.milsecond 格式為主)

附上完成後的程式碼：

extension.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96


import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
 const input = async (placeHolder: string) => await vscode.window.showInputBox({
 placeHolder
 }) || '';

 function pad(num: string | number, size: number): string {
 num = num.toString();
 while (num.length < size) {
 num = "0" + num;
 }
 return num;
 }

 // show timestamp at vscode Information Window
 function showTimestamp(datetime: string) {
 let timestamp: number | undefined = NaN;
 try {
 timestamp = new Date(datetime).getTime();
 if (typeof timestamp !== "number" || isNaN(timestamp) || timestamp.toString() === "NaN") {
 return askDateTime();
 };
 vscode.window.showInformationMessage(timestamp.toString());
 } catch(e) {
 console.log(e);
 vscode.window.showErrorMessage("Invalid Date.");
 askDateTime();
 }
 }

 // create input with asking DateTime
 async function askDateTime() {
 const fullDateTime = await input("DateTime (format: YYYY-MM-DD hh:mm:ss.ms) (example: 2022-12-31 23:59:59.999)：");
 if (fullDateTime) {
 showTimestamp(fullDateTime);
 }
 }

 // Insert timestamp at cursor position
 vscode.commands.registerTextEditorCommand("wconvert.genTimestamp", async (editor, edit) => {
 const fullDateTime = await input("DateTime (format: YYYY-MM-DD hh:mm:ss.ms) (example: 2022-12-31 23:59:59.999)：");
 if (!fullDateTime) {
 return;
 }

 try {
 let timestamp = new Date(fullDateTime).getTime();
 if (!isNaN(timestamp) && typeof timestamp === "number" && timestamp.toString() !== "NaN") {
 editor.edit((editBuilder) => {
 editor.selections.forEach((selectionItem) => {
 editBuilder.insert(selectionItem.active, timestamp.toString());
 });
 });
 } else {
 vscode.window.showErrorMessage("Datetime convert failed.");
 }
 } catch(e) {
 vscode.window.showErrorMessage("Invalid Date.");
 }
 });

 // only show generated timestamp
 let generateTimestamp = vscode.commands.registerCommand("wconvert.genTimestampJustShow", askDateTime);

 // format timestamp to YYYY-MM-DD HH:mm:ss that selections
 let timestamp2DateTime = vscode.commands.registerTextEditorCommand("wconvert.timestamp2dateTime", async (editor, edit) => {

 const offsetStr = await input("Time zone (example: +8)：");
 const offset = Number(offsetStr);

 editor.edit((editBuilder) => {
 editor.selections.forEach((selectionItem) => {
 try {
 const selection = editor.document.getText(selectionItem);
 let dateArr = new Date(parseInt(selection) - (-offset * 60 * 60 * 1000)).toISOString().split("T");
 const [YYYYMMDD, hhmmss] = dateArr;
 const [year, month, day] = YYYYMMDD.split("-");
 const [hour, minute, fullSecond] = hhmmss.split(":");
 const [second, millionSecondZ] = fullSecond.split(".");
 const millionSecond = millionSecondZ.replace("Z", "");

 let fullDateTime = `"${year}-${pad(month, 2)}-${pad(day, 2)} ${pad(hour, 2)}:${pad(minute, 2)}:${pad(second, 2)}.${pad(millionSecond, 3)}"`;

 editBuilder.replace(selectionItem, fullDateTime);
 } catch (e) {
 vscode.window.showErrorMessage("Invalid Date.");
 }
 });
 });
 });

 context.subscriptions.push(timestamp2DateTime, generateTimestamp);
}

export function deactivate() {}

package.json 的 activationEvents 記得加上欲註冊使用的 command，也可直接使用 "*"，將全部的 command 暴露出去！

package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63


{
 "name": "wconvert",
 "displayName": "wconvert",
 "description": "help you convert datetime value",
 "version": "1.0.3",
 "icon": "photo.jpeg",
 "publisher": "4006wayne",
 "repository": {
 "type": "git",
 "url": "https://github.com/wjdesign/vscode-extension-wconvert.git"
 },
 "homepage": "https://github.com/wjdesign/vscode-extension-wconvert/blob/master/README.md",
 "pricing": "Free",
 "engines": {
 "vscode": "^1.73.0"
 },
 "categories": [
 "Other"
 ],
 "activationEvents": [
 "onCommand:wconvert.timestamp2dateTime",
 "onCommand:wconvert.genTimestamp",
 "onCommand:wconvert.genTimestampJustShow"
 ],
 "main": "./out/extension.js",
 "contributes": {
 "commands": [
 {
 "command": "wconvert.timestamp2dateTime",
 "title": "WConvert: DateTime to timestamp"
 },
 {
 "command": "wconvert.genTimestamp",
 "title": "WConvert: Generate Timestamp"
 },
 {
 "command": "wconvert.genTimestampJustShow",
 "title": "WConvert: Generate Timestamp Only Show"
 }
 ]
 },
 "scripts": {
 "vscode:prepublish": "npm run compile",
 "compile": "tsc -p ./",
 "watch": "tsc -watch -p ./",
 "pretest": "npm run compile && npm run lint",
 "lint": "eslint src --ext ts",
 "test": "node ./out/test/runTest.js"
 },
 "devDependencies": {
 "@types/vscode": "^1.73.0",
 "@types/glob": "^8.0.0",
 "@types/mocha": "^10.0.0",
 "@types/node": "16.x",
 "@typescript-eslint/eslint-plugin": "^5.42.0",
 "@typescript-eslint/parser": "^5.42.0",
 "eslint": "^8.26.0",
 "glob": "^8.0.3",
 "mocha": "^10.1.0",
 "typescript": "^4.8.4",
 "@vscode/test-electron": "^2.2.0"
 }
}

範例 repo

vsce

打包並發布 Extension，官方文件

使用 vsce 來打包與發布我的 Extension

首先全局安裝 vsce：

1

npm i -g vsce

打包

1

vsce package

下完指令後，會因為沒有 LICENSE 檔案而詢問是否繼續，這邊選擇 Y 直接下一步即可。

完成後會在指定位置產生一個 .vsix 檔案，此即為我的 Extensions。

本地安裝我的 Extension

若只是要製作一個自己用的 extension，沒有打算發布到網上，到此步驟即可。

於 VScode 的 Extensions 頁籤，選擇 Install from VSIX，選擇剛剛產生的 .vsix 檔，即可完成安裝，在 Extensions 的 INSTALLED 內即可看到自己的 extension。

發布到 Marketplace 前的準備

記住！每次發佈都要幫版本號加一下！

package.json

1
2
3
4
5


{
 // ...
 "version": "0.0.1",
 // ...
}

vsce 要求 Personal Access Token 個人訪問金鑰，以下的步驟圖片來源為官方說明文件

首先請到 https://dev.azure.com/ 申請帳號並登入，在右上角打開 Personal access tokens 頁面。

點選 New Token 按鈕。

給這個新 Token一個名字、過期時間，重點是 Organization 請選擇 All accessiable organization，點選 Custom defined 並點選 Show all scopes 打開所有選項。

找到 Marketplace 項目勾選 Acquire 與 Manage 後點選 Create。

然後你會得到一個 Token 請複製下來。

建立發佈器 - Publisher

建立一個 Publisher 用來儲存發佈的 Token ，請在 package.json 中指定要使用的發佈器"publisher": (publisher name)

package.json

1
2
3
4
5


{
 // ...
 "publisher": "{your publisher name}",
 // ...
}

使用 Marketplace 後台建立 Publisher

請到 https://marketplace.visualstudio.com/manage/publishers/ 建立一個 Publisher。

使用 vsce 指令建立 Publisher

1

vsce create-publisher (publisher name)

輸入剛剛的 Personal access token，vsce 將會記得這個 publisher 與 token 以方便快速發佈。

Token 更新

在我們建立 token 時，token 是有效期的，當 token 過期時我們就需要以下這個指來更新 token：

1

vsce login (publisher name)

發布方式(一)：使用 vsce 發布 extension

下指令發布到 Marketplace：

1

vsce publish

使用 vsce show 確認 extension 的資訊：

1
2


# vsce show {publisher name}.{extension id}
vsce show 4006wayne.wconvert

也可以在 vsce publish 時直接指定 token：

1

vsce publish -p <token>

發布方式(二)：使用 Marketplace 後台上傳，發布 extension

前往網址 https://marketplace.visualstudio.com/manage/publishers/，選擇剛剛創建的 Publisher。

點選 New extension > Visual Studio Code，選擇剛剛 package 出來的 .vsix 檔案後上傳。

上傳後等待驗證，驗證完畢後即可看到我的 extension：

結語

到這裡我已經成功發佈我的第一個 Extension 了！

這是我寫的第一個 Extension，功能很陽春，用途是產生指定時間的時間戳與時間戳轉回指定時區的時間格式。

非常推薦使用 Typescript 會比較容易開發，不然要查官方API會看得很痛苦，畢竟範例不多或者都要下載才能看。

實際撰寫時會遇到 VScode API 到底有哪些功能可以使用的問題，甚至要去了解 VScode 的設計結構！

常見問題

Extension validation error

出現如圖的問題，自行排查 extension 程式碼後發現非程式碼邏輯的問題，可以上 issues 將資訊反應給 vsmarketplace，此可能為 marketplace 驗證 extension 時偵測到特定字元組合而阻擋掉，會專人協助處理。

附上本人遇到此問題的 Issues

VScode on Wayne's blog | 偉恩的部落格 | 技術博客

VSCode MCP Servers 與專案導入 Playwright 自動化測試分享

MCP

MCP 主機（MCP Host）

MCP 客戶端（MCP Client）

MCP 伺服端（MCP Server）

VSCode MCP Server 是什麼？

Playwright 是什麼？

Playwright 與其他自動化操作工具的差異

Playwright 導入方式

安裝 Playwright 套件

建立測試目錄與設定檔

playwright.config.ts

撰寫第一個測試腳本

tests/login.spec.ts

執行測試

進階設定與 CI 整合

Playwright 在 VSCode Extension/MCP Server 專案的應用

Playwright 的設定值與常用元件介紹

playwright.config 常用設定值

常用元件與方法

實戰一：自動化測試 API healthz check

實戰二：Playwright 自動化流程範例

tests/login.spec.ts

login-helper.ts

實戰三：Playwright 串聯 Vitest UI 跑單元測試

test-tools-unit.spec.ts

開發心得與建議

結語

【VSCode】重置儲存在雲端的設定、擴充套件與資料！

問題發生過程

正確的操作步驟說明

如何清除雲端中的資料

重設 VSCode 設定同步認證

【Polacode】一款好用的 VSCode 截圖套件推薦

如何使用？

注意事項

今天來搞一個屬於自己的 VScode Extension 吧！

前言

開發環境配置

確認已安裝 nodejs 與 npm

export：

安裝 yoman

使用 yo 快速產生第一個 Extension 專案

Extension 專案重點相關檔案介紹

Extension 專案程式簡介

package.json

package.json

執行 extension 專案應用程式

檢查已被註冊的 command

執行註冊後的 Command

加入套件邏輯

註冊自己想要使用的 Command

extension.ts

package.json

vsce

打包

本地安裝我的 Extension

發布到 Marketplace 前的準備

package.json

建立發佈器 - Publisher

package.json

使用 Marketplace 後台建立 Publisher

使用 vsce 指令建立 Publisher

Token 更新

發布方式(一)：使用 vsce 發布 extension

發布方式(二)：使用 Marketplace 後台上傳，發布 extension

結語

常見問題

Extension validation error