寫一個(gè)VS Code 插件：Color to See

景

在進(jìn)行項(xiàng)目開發(fā)的時(shí)候，可能會(huì)遇到“想找某個(gè)色值”的場景，因?yàn)轭伾狄话闶菙?shù)字類型，沒有語義，不好全局搜索。所以就希望有一個(gè)工具，能夠快速展示工作目錄下的所有顏色，方便取值。

由于是在編寫代碼階段，所以這個(gè)工具最方便的其實(shí)是編輯器的插件。我使用VSCode插件，所以先來試試開發(fā)一個(gè)VSCode插件。

在正式開發(fā)之前，先來給這個(gè)插件取個(gè)好名字，color, see, 一想到這兩個(gè)單詞，我腦海里直接蹦出了“給你點(diǎn)顏色看看”的中文式表達(dá)”give you color to see”，看起來Color to See 是個(gè)好名字。

需求分析

在開發(fā)之前，先來想想我們的”產(chǎn)品“長什么樣子，要實(shí)現(xiàn)什么功能。

插件要實(shí)現(xiàn)的目標(biāo)是能夠快速找到某個(gè)色值，所以我們要將顏色可視化，色值是最終我們希望能拿到的，所以需要將項(xiàng)目中所有的顏色收集起來，統(tǒng)一展示（包含可視化、色值）。

具體功能清單如下：

收集工作區(qū)下的所有顏色

文件更新（刪除、新建、文本更新）了能夠獲取到最新的顏色

可視化所有顏色塊

以網(wǎng)格狀的形式展示顏色色塊

色值展示和獲取

點(diǎn)擊顏色展示對(duì)應(yīng)的色值，支持Hex和RGB格式
點(diǎn)擊色值一鍵復(fù)制

UI設(shè)計(jì)如下：

功能實(shí)現(xiàn)

VSCode WebView

WebView可以用來創(chuàng)建自定義的視圖，可以看成是VSCode內(nèi)部的 Iframe 容器，可以渲染任何HTML, 通過消息傳遞實(shí)現(xiàn)通信，所以具備非常強(qiáng)大的頁面渲染和交互能力。

VSCode內(nèi)部提供了三個(gè)API可以創(chuàng)建WebView:

window.createWebviewPanel

創(chuàng)建一個(gè)編輯器面板。即時(shí)的，關(guān)閉編輯器就銷毀了，主要用于那些不需要持久化狀態(tài)（在關(guān)閉后不需要恢復(fù)）的場景，示例代碼如下：

const panel=vscode.window.createWebviewPanel(
    'webviewId', // Webview 的標(biāo)識(shí)符
    'My Webview', // 面板標(biāo)題
    vscode.ViewColumn.One, // 面板顯示在哪個(gè)編輯器列中
    { enableScripts: true } // 額外的 Webview 選項(xiàng)
);

panel.webview.html="<html><body><h1>Hello, Webview!</h1></body></html>";

window.registerWebviewPanelSerializer

定義如何序列化和反序列化 WebView 面板的狀態(tài)，這樣即使在 VSCode 重啟后，這個(gè) WebView 面板的狀態(tài)也可以被恢復(fù)。所以這種WebView，對(duì)于那些需要保留用戶狀態(tài)或信息的面板來說非常有用。

class MyWebviewPanelSerializer implements vscode.WebviewPanelSerializer {
    async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
        // 重新設(shè)置 Webview 的內(nèi)容等
        webviewPanel.webview.html="<html><body><h1>Restored Webview</h1></body></html>";
    }
}

context.subscriptions.push(vscode.window.registerWebviewPanelSerializer('webviewId', new MyWebviewPanelSerializer()));

window.registerWebviewViewProvider

創(chuàng)建一個(gè)編輯器面板。持久的視圖，常駐在側(cè)邊欄（Sidebar）和面板(Panel)上

class MyWebviewProvider implements vscode.WebviewViewProvider {
    resolveWebviewView(webviewView: vscode.WebviewView) {
        webviewView.webview.html="<html><body><h1>Hello, Sidebar Webview!</h1></body></html>";
    }
}

const provider=new MyWebviewProvider();
context.subscriptions.push(vscode.window.registerWebviewViewProvider('myWebview', provider));

考慮我們插件的使用場景一般是沒有UI稿的后臺(tái)開發(fā)，使用次數(shù)不會(huì)很頻繁，所以插件的視圖不需要持久，所以可以選擇用createWebviewPanel創(chuàng)建一個(gè)編輯器面板來承載界面。

項(xiàng)目初始化

通過官方文檔給的腳手架命令，開始初始化我們的插件項(xiàng)目。目錄結(jié)構(gòu)如下：

├─ .eslintrc.json
├─ .gitignore
├─ .vscode
│  ├─ extensions.json
│  ├─ launch.json
│  ├─ settings.json
│  └─ tasks.json
├─ .vscode-test.mjs
├─ .vscodeignore
├─ .yarnrc
├─ CHANGELOG.md
├─ README.md
├─ package.json
├─ src
│  ├─ extension.ts
│  ├─ test
│  │  └─ extension.test.ts
├─ tsconfig.json
├─ vsc-extension-quickstart.md
├─ webpack.config.js
├─ yarn-error.log
└─ yarn.lock

在package.json文件中，可以看到main配置是dist文件夾下的extension.js文件，這是我們項(xiàng)目的入口文件，是Webpack把src/extentions.ts作為入口文件編譯過來的

看package.json的script配置，發(fā)現(xiàn)可以運(yùn)行yarn watch命令進(jìn)行熱更新，也就是實(shí)時(shí)把改動(dòng)的代碼編譯成可執(zhí)行的JS文件。

運(yùn)行完yarn watch后，通過按“F5”或者“運(yùn)行->啟動(dòng)調(diào)試”，運(yùn)行我們的插件，這時(shí)候VSCode會(huì)打開一個(gè)新的窗口，快捷鍵ctrl + shift + p輸入hello world

最后，點(diǎn)擊執(zhí)行這個(gè)命令，可以看到右下角彈出了歡迎標(biāo)語。如下圖所示：

如果修改了代碼，可以F5刷新debug窗口，也可以在debug窗口上使用快捷鍵command + R刷新，和在瀏覽器刷新網(wǎng)頁一樣。

以上就是 VSCode 插件開發(fā)起步的過程。

接入WebView

新增colorToSee命令

在package.json文件的commands屬性上新增extension.colorToSee，這個(gè)命令是使用我們插件的起點(diǎn)，所以務(wù)必寫個(gè)好title，為了讓插件國際化，我的title設(shè)置為"ColorToSee: Show colors of the working directory in a webview panel"

 "commands": [
    {
      "command": "extension.colorToSee",
      "title": "ColorToSee: Show colors of the working directory in a webview panel"
    }
  ],

這個(gè)命令的執(zhí)行回調(diào)函數(shù)在extension.ts文件上，重點(diǎn)代碼如下：

 vscode.commands.registerCommand(COMMAND_NAME, ()=> {
  registerWebviewViewProvider(context);
})

在這串代碼中，我們把具體的實(shí)現(xiàn)邏輯封裝在registerWebviewViewProvider方法上，接下來我們可以只關(guān)注這個(gè)方法的實(shí)現(xiàn)。

創(chuàng)建WebView來顯示自定義UI

使用WebView API createWebviewPanel來創(chuàng)建一個(gè)自定義的HTML頁面，基本的代碼塊如下所示：

const panel=vscode.window.createWebviewPanel(
  CatCodiconsPanel.viewType,
  "Cat Codicons",
  column || vscode.ViewColumn.One
 );

panel.webview.html=_getHtmlForWebview(panel.webview, extensionUri);

function _getHtmlForWebview(webview: vscode.Webview) {
    // Use a nonce to only allow specific scripts to be run
    const nonce=getNonce();

    return `<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <!-- Use a content security policy to only allow loading images from https or from our extension directory, and only allow scripts that have a specific nonce. -->
                <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Your View</title>
            </head>
            <body>
                <h1>Hello from Your View!</h1>
            </body>
            </html>`;
}

function getNonce() {
    let text='';
    const possible='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    for (let i=0; i < 32; i++) {
        text +=possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return text;
}

在registerWebviewViewProvider方法中，我們將基于上述代碼做些改造，大致的框架如下：

const registerWebviewViewProvider=(context: vscode.ExtensionContext)=> {
  const provider=new ViewProvider(context.extensionUri, config);

  const panel=vscode.window.createWebviewPanel(
    ViewProvider.viewType, // Webview 的標(biāo)識(shí)符
    PANEL_TITLE, // 面板標(biāo)題
    vscode.ViewColumn.One, // 面板顯示在哪個(gè)編輯器列中
    {
      enableScripts: true
    } // 額外的 Webview 選項(xiàng)
  );

  provider.resolveWebviewView(panel as unknown as vscode.WebviewView);

  context.subscriptions.push(panel);
};

在這段代碼中，我們把頁面信息維護(hù)在ViewProvider這個(gè)類上。在這個(gè)類上，我們要實(shí)現(xiàn)頁面的渲染和更新。

頁面渲染

頁面的渲染機(jī)制可以借用React 框架的 render(state) 思想，這個(gè)思想基于函數(shù)式編程的原則，其核心是將UI視為狀態(tài)的函數(shù)，UI的每一次更新可以看作是一個(gè)狀態(tài)轉(zhuǎn)換的結(jié)果。

本插件的頁面構(gòu)成比較簡單，為了方便，可以直接使用原生JS和HTML開發(fā)。頁面的模塊主要分為以下4個(gè)部分：

刷新按鈕
顏色網(wǎng)格
顏色值展示
toast彈窗提醒（消息提醒）

整個(gè)數(shù)據(jù)驅(qū)動(dòng)式的頁面渲染如下所示：

<body>
  ${generateMainDiv(this.colorInfos)}
</body>

定義狀態(tài)

首先，我們定義colorInfos狀態(tài)，這個(gè)變量存儲(chǔ)了當(dāng)前工作區(qū)所有顏色信息，包括該顏色的所在文件的位置和色值，TS定義如下所示：

export type ColorItem={
  /** 顏色值起始位置 */
  start: number;
  /** 顏色值結(jié)束位置 */
  end: number;
  /** 顏色值 */
  color: string;
  /** 顏色值所在的文件路徑 */
  file: string;
};

渲染函數(shù)

”顏色網(wǎng)格“是我們整個(gè)頁面主要的功能模塊，所以我們重點(diǎn)介紹這個(gè)功能的渲染函數(shù)，根據(jù)colorInfos，一個(gè)能根據(jù)這個(gè)狀態(tài)生成HTML的函數(shù)可以簡化成這樣：

function generateMainDiv(colors) {
  return colors.map(info=> `<div style="color: ${info.color}" data-colorItem="${encodeURIComponent(
    JSON.stringify(item)
  )}">${info.color}</div>`).join('');
}

其中自定義屬性data-colorItem存儲(chǔ)了整個(gè)顏色塊的所有信息。

頁面掛載

把html元素賦值給WebView的html屬性，就可以實(shí)現(xiàn)頁面的掛載。

this._view.webview.html=this._getHtmlForWebview(this._view.webview);

function _getHtmlForWebview(webview: vscode.Webview) {
    // Use a nonce to only allow specific scripts to be run
    const nonce=getNonce();

    return `<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <!-- Use a content security policy to only allow loading images from https or from our extension directory, and only allow scripts that have a specific nonce. -->
                <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Your View</title>
            </head>
            <body>
                ${generateMainDiv(this.colorInfos)}
            </body>
            </html>`;
}

如何構(gòu)造狀態(tài)colorInfos?

上面描述的數(shù)據(jù)驅(qū)動(dòng)式框架比較簡單，還沒有涉及到本項(xiàng)目的難點(diǎn)實(shí)現(xiàn)，如果構(gòu)造colorInfos數(shù)據(jù)，是本項(xiàng)目的難點(diǎn)之一，本節(jié)主要講這塊內(nèi)容。

顏色格式分析

在項(xiàng)目開發(fā)中，比較常見的顏色格式分為RGB, Hex, HSL和顏色關(guān)鍵字（Named Colors）這幾種。下面我們來分析這幾種顏色在CSS中的語法。

從MDN官網(wǎng)發(fā)現(xiàn)rgb()的寫法分為絕對(duì)和相對(duì)格式，我們平時(shí)熟悉的寫法是這樣的：rgb(x, y, z)，其中x、y、z是從0到255的整數(shù)，屬于絕對(duì)格式的一種。

為了讓項(xiàng)目能盡快先落地，我們此處只分析“絕對(duì)格式”的場景。絕對(duì)格式的寫法如下：

rgb(R G B[ / A])

其中R G B的值可以為0-255的整數(shù)，或者0%-100%的百分比；A的值為0到1（或者0%-100%），表示顏色的透明度信息。如果有A值時(shí)，需要使用 / 。

我們經(jīng)常見到的一種寫法是R G B通過逗號(hào)隔開，這種寫法其實(shí)是一種過時(shí)的寫法，但是考慮到大部分人都在用，匹配CSS RGB顏色的時(shí)候也應(yīng)該考慮到。rgba()語法也是一種過時(shí)的寫法，同樣本次也會(huì)考慮這種顏色格式的匹配。

CSS hsl() 的語法和rgb()是一致的，這里不在贅述，需要請(qǐng)移至MDN官網(wǎng)查看。

16進(jìn)制Hex的色值寫法分為以下幾種：

#RGB        // The three-value syntax
#RGBA       // The four-value syntax
#RRGGBB     // The six-value syntax
#RRGGBBAA   // The eight-value syntax

其中R G B的值為0到ff。

在CSS中，一些常用顏色可以使用預(yù)定義的關(guān)鍵字來表示，例：red、blue、green等，這些就是顏色關(guān)鍵詞。完整的標(biāo)準(zhǔn)關(guān)鍵詞可以在MDN官網(wǎng)找到。

顏色匹配

了解了顏色在項(xiàng)目中的多種寫法，下面考慮如何匹配代碼中的顏色。常見的方案分為兩種：

基于文本模式的正則匹配
基于代碼結(jié)構(gòu)的抽象語法樹（AST)分析

前者實(shí)現(xiàn)比較簡單且通用性大，因此本插件選擇通過正則語法，針對(duì)不同的顏色格式，定制不同的匹配策略。

編寫一個(gè)基本的正則表達(dá)式來匹配顏色代碼其實(shí)不難，但是如果想提高要求，確保寫出來的正則表達(dá)式既準(zhǔn)確又具有良好的防御性，能夠考慮到各種邊緣情況以及性能優(yōu)化，這并不容易。

為了實(shí)現(xiàn)這一點(diǎn)，此處我借鑒了另外一個(gè)插件Color Highlight的實(shí)現(xiàn)。這個(gè)插件是我目前在使用的比較好用的插件，在開發(fā)自己的插件之前，我從沒想過它是如何實(shí)現(xiàn)的，但是我熟悉它的功能：在編寫代碼的時(shí)候，可以高亮顯示當(dāng)前當(dāng)前編輯器中的顏色格式。要實(shí)現(xiàn)的功能和我的有相似之處，所以了解這個(gè)插件的實(shí)現(xiàn)應(yīng)該對(duì)于完成自己的插件很有幫助。

事實(shí)確實(shí)是這樣的，Color Highlight插件給出了一系列針對(duì)不同顏色格式的匹配策略，如下圖所示。

基于它的實(shí)現(xiàn)，下面分析了針對(duì)不同顏色格式的正則表達(dá)式解析。

RGB和HSL

const colorRegex=/((rgb|hsl)a?(\s*[\d]*.?[\d]+%?\s*(?<commaOrSpace>\s|,)\s*[\d]*.?[\d]+%?\s*\k<commaOrSpace>\s*[\d]*.?[\d]+%?(\s*(\k<commaOrSpace>|/)\s*[\d]*.?[\d]+%?)?\s*))/gi;

整個(gè)正則表達(dá)式是一個(gè)全局不區(qū)分大小寫的匹配（由結(jié)尾的 gi 標(biāo)志指定），用于在文本中查找所有匹配的顏色值。主要分為兩部分：格式名稱(值)，其中格式名稱分為三種情況，如下圖所示，分別為rgb,hsl,rgba, hsla。后半部分主要是匹配它們的不同書寫方式，包含數(shù)字值、逗號(hào)或空格分割。具體解析如下：

((rgb|hsl)a?: 這部分使用捕獲組來匹配 rgb 或 hsl 字符串，后面跟著一個(gè)可選的 a 字符，這樣可以匹配 rgb、rgba、hsl 和 hsla。
(：匹配左括號(hào)
**\s*[\d]*.?[\d]+%?\s***: 用來匹配顏色值的第一個(gè)參數(shù)，（如紅色值 R、色相值 H ），首先是匹配零個(gè)或多個(gè)空格符，然后是一個(gè)數(shù)字（可能是整數(shù)或小數(shù)），該數(shù)字可能后跟一個(gè)百分號(hào) %。

(?<commaOrSpace>\s|,): 定義了一個(gè)命名捕獲組 commaOrSpace，用來匹配空格或逗號(hào)。這是顏色值參數(shù)之間的分隔符。
**\s*[\d]*.?[\d]+%?\s***: 用來匹配顏色值的第二個(gè)參數(shù)，（如紅色值 R、色相值 H ），首先是匹配零個(gè)或多個(gè)空格符，然后是一個(gè)數(shù)字（可能是整數(shù)或小數(shù)），該數(shù)字可能后跟一個(gè)百分號(hào) %。

\k<commaOrSpace>: 對(duì)前面定義的 commaOrSpace 捕獲組的引用，確保分隔符的一致性。
\s*[\d]*.?[\d]+%?: 再次匹配一個(gè)數(shù)字（整數(shù)或小數(shù)），可能后跟一個(gè)百分號(hào) %。這部分用于匹配顏色值的第三個(gè)參數(shù)。

**\s*(\k<commaOrSpace>|/)\s*[\d]*.?[\d]+%?)?\s*: 這是一個(gè)可選的捕獲組，用于匹配顏色透明度值（alpha 值）。它首先匹配空格，然后是前面定義的分隔符（commaOrSpace）或斜杠 /，后面跟著空格和數(shù)字（整數(shù)或小數(shù)），數(shù)字后面可能有一個(gè)百分號(hào) %**。
)：最后匹配右括號(hào) )。

顏色關(guān)鍵詞

收集MDN官網(wǎng)給出的顏色關(guān)鍵字，寫一個(gè)簡單的正則，下面是列舉了部分色值的正則匹配：

(aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow)

16進(jìn)制Hex

const colorHex=/.?((?:#|\b0x)([a-f0-9]{6}([a-f0-9]{2})?|[a-f0-9]{3}([a-f0-9]{1})?))\b/gi;

這個(gè)正則表達(dá)式用來匹配 CSS 中的十六進(jìn)制顏色值，同時(shí)也匹配十六進(jìn)制顏色值的簡寫形式，并且考慮到可能的透明度值（RGBA格式）。下面逐部分解釋這個(gè)正則表達(dá)式：

.?: 匹配任意單個(gè)字符，但不捕獲它。
((?:#|\b0x): 這是一個(gè)非捕獲組（由?:開頭），用于匹配 # 或 0x。這里的 \b 是一個(gè)單詞邊界，確保 0x 前面是一個(gè)單詞邊界，避免中間匹配到不正確的字符串。

([a-f0-9]{6}([a-f0-9]{2})?|[a-f0-9]{3}([a-f0-9]{1})?): 這部分有兩大選項(xiàng)，分別通過 | 分隔：
[a-f0-9]{6}([a-f0-9]{2})?: 匹配6個(gè)十六進(jìn)制字符，后面可選地跟隨2個(gè)十六進(jìn)制字符（通常用于表示透明度）。
[a-f0-9]{3}([a-f0-9]{1})?: 匹配3個(gè)十六進(jìn)制字符，后面可選地跟隨1個(gè)十六進(jìn)制字符。這是十六進(jìn)制顏色的簡寫形式
\b: 單詞邊界，確保匹配的字符串在一個(gè)單詞的邊界結(jié)束，防止部分匹配到更長的字符串中。

顏色獲取

了解了不同顏色格式的匹配規(guī)則后，顏色的獲取思路其實(shí)很簡單：遍歷每個(gè)文件，獲取每個(gè)文件的文本字符串，通過對(duì)應(yīng)的正則匹配策略去匹配。基本的代碼如下所示：

策略維護(hù)

從產(chǎn)品的使用場景看來，本插件所關(guān)注的顏色格式比較簡單：一些基本的rgb, hex, hsl，單詞的顏色可以不考慮，因?yàn)橛貌簧?，能用上我都可以直接匹配了，因此我們只關(guān)注沒有語義、且常用的顏色格式。

最終，針對(duì)本插件，可以總結(jié)出下面三種策略：

findColorFunctionsInText: 查找rgb(a), hsl(a)基本顏色
findHexRGBA：查找hex顏色

this.strategies=[findColorFunctionsInText,findHexRGBA];

文件遍歷

for (const file of files) {
  try {
    const document=await vscode.workspace.openTextDocument(file);
    const instance=await this.findOrCreateInstance(document);

    colorsInfos.push(await instance.getColorInfo());
  } catch {
    continue;
  }
}

顏色獲取getColorInfo

 getColorInfo(document=this.document) {
    const text=this.document.getText();
    const version=this.document.version.toString();

    const file=this.document.uri.fsPath; // file path
    const result=await Promise.all(this.strategies.map((fn)=> fn(text)));
   return resolveResult(result); // 顏色解析，根據(jù)colorInfos的數(shù)據(jù)格式進(jìn)行數(shù)據(jù)解析
}

頁面更新

顏色的更新場景主要有以下幾種情況：

編輯已有文件的顏色
新增有顏色的文件
刪除了有顏色的文件

針對(duì)這三種情況，在產(chǎn)品設(shè)計(jì)上，可以設(shè)置一個(gè)“刷新按鈕“按鈕，點(diǎn)擊該按鈕，拉取最新的顏色信息。本章節(jié)主要從消息通信和更新機(jī)制兩個(gè)角度討論本插件的實(shí)現(xiàn)。

消息通信

在頁面上點(diǎn)擊按鈕，然后執(zhí)行對(duì)應(yīng)的事件，這點(diǎn)的實(shí)現(xiàn)涉及到VSCode插件中Extension 和 Webview 的通信，主要是通過postMessage和onDidReceiveMessage實(shí)現(xiàn)消息的發(fā)送與接收。

在Webview發(fā)送消息

Extension 里通過vscode.postMessage發(fā)送消息:

// 刷新
refreshBtn.addEventListener('click', ()=> {
  // 如果已經(jīng)在Loading, 無需發(fā)送message
  if (refreshBtn.classList.contains('btn--loading')) {
    return;
  }

  refreshBtn.classList.add('btn--loading');
  vscode.postMessage({ command: 'refresh' });
});

在Extension接收消息

webviewView.webview.onDidReceiveMessage((message)=> {
  switch (message.command) {
    case 'refresh':
      const prom=()=> this.doUpdateWebView()

      prom().finally(()=> {
        webviewView.webview.postMessage({
          command: 'refreshEnd'
        });
      });

      break;
  }
});

更新機(jī)制

在Extension接受到需要更新的消息后，需要執(zhí)行對(duì)應(yīng)的更新機(jī)制，這個(gè)實(shí)現(xiàn)主要封裝在doUpdateWebView方法中。更新機(jī)制主要實(shí)現(xiàn)的就是更新colorInfos，并重新執(zhí)行渲染函數(shù)以更新UI。

為了讓插件的第一個(gè)版本快速上線，文件新增、刪除場景的更新我們可以重新掃描一下所有文件；文件編輯的場景容易定位具體文檔，所以可以按需更新。

下面給出了本項(xiàng)目的更新實(shí)現(xiàn)，其中整個(gè)了頁面初始化的渲染，因?yàn)檫@個(gè)場景的邏輯和文件新增、刪除重復(fù)。

private async doUpdateWebView() {
  try {
    if (
      this.type==='init' ||
      this.type==='add' ||
      this.type==='delete'
    ) {
      await this.initDataView();

      return Promise.resolve();
    }

    // 顏色變更：text change

    // 收集變更的document，局部更新顏色視圖
    for (let index=0; index < this.instanceMap.length; index++) {
      const instance=this.instanceMap[index];

      // 如果頁面更改了
      if (instance.changed) {
        const colorDocumentItem=await instance.getColorInfo();
        this.colorMapArray[index]=colorDocumentItem;
        // 恢復(fù)
        instance.changed=false;
      }
    }

    // 更新顏色信息
    this.colorInfos=updateColorInfosByMap(this.colorMapArray);

    // 更新視圖
    this._view.webview.html=this._getHtmlForWebview(this._view.webview);

    return Promise.resolve();
  } catch {
    return Promise.reject();
  }
}

代碼示意圖如下所示：

插件配置

并不是項(xiàng)目中所有文件都有顏色值，所以為了讓插件能夠有效地找到有用的色值，我們需要給插件增加文件類型配置項(xiàng)，用來定義哪些文件應(yīng)該在文件掃描過程中包含或排除。

include 和 exclude 這兩個(gè)配置項(xiàng)在很多前端開發(fā)相關(guān)的工具和配置文件中非常常見，如 webpack.config文件、tsconfig文件、babel.config文件。為了降低插件使用者的學(xué)習(xí)曲線，本插件也選擇使用 include 和 exclude 來指定掃描的文件類型。

下面是本插件默認(rèn)的配置屬性。

"color-to-see.findFilesRules": {
  "default": {
    "include": [
      "**/*.js",
      "**/*.jsx",
      "**/*.tsx",
      "**/*.css",
      "**/*.less",
      "**/*.sass",
      "**/*.html",
      "**/*.vue"
    ],
    "exclude": [
      "**/node_modules/**",
      "**/dist/**",
      ".git"
    ]
  },

掃描的文件類型主要關(guān)注實(shí)際開發(fā)中包含色值定義的文件類型，比如樣式文件、HTML文件或者JS文件。排除不需要掃描或處理的文件夾，如node_modules，dist，.git文件等。include和exclude的值使用 Glob Pattern 語法來指定哪些文件被包括或排除。

在Extension中，這套配置的使用原理如下：

config=vscode.workspace.getConfiguration(EXTENSION_NAME);

const findFilesUsingConfig=async (config: Config)=> {
  const { include, exclude }=config.findFilesRules;
  const includePattern=`{${include.join(',')}}`;
  const excludePattern=`{${exclude.join(',')}}`;

  try {
    const files=await vscode.workspace.findFiles(
      includePattern,
      excludePattern
    );
    return files;
  } catch {
    return [];
  }
};

成品

Demo Snapshop

有顏色

無顏色

插件市場鏈接

：Color to See - Visual Studio Marketplace

局限性分析和優(yōu)化點(diǎn)

盡管插件的功能大致已經(jīng)實(shí)現(xiàn)了，但是本插件還是有一些局限性，以及后續(xù)可以優(yōu)化的地方

文件掃描效率

局限性

插件需要掃描整個(gè)工作區(qū)的所有文件來查找顏色值，盡管增加了文件類型限制少掃描一些文件，但是剩下的文件掃描還是會(huì)消耗大量的計(jì)算資源。

優(yōu)化

編譯打包：項(xiàng)目代碼打包到一個(gè)文件（如app.js）中以減少顏色掃描的文件數(shù)量的方法
緩存+增量更新：通過緩存機(jī)制保留未更改的文件，而只對(duì)更改的文件進(jìn)行掃描，而不是整個(gè)工作區(qū)。

用戶體驗(yàn)

局限性

顏色展示必須等待文件全部掃描完，長時(shí)間的掃描和等待會(huì)影響用戶體驗(yàn)

優(yōu)化

實(shí)現(xiàn)異步掃描機(jī)制，一旦掃描到新的顏色值，就立即在UI中展示，而不是等待所有掃描完成。

顏色值跳轉(zhuǎn)功能配置化

局限性

顏色值跳轉(zhuǎn)功能的實(shí)用性其實(shí)比較低，而且在本插件中，如果一個(gè)顏色在多個(gè)地方出現(xiàn)，我只會(huì)記錄第一個(gè)位置。因此，本插件的使用過程中，用戶應(yīng)該更加關(guān)注于顏色值本身，而不是其在代碼中的具體位置。

除此之外，顏色跳轉(zhuǎn)到具體某個(gè)文件后，當(dāng)前視圖的位置沒有滾動(dòng)到對(duì)應(yīng)的高度。

優(yōu)化

增加一個(gè)配置項(xiàng)讓用戶可以自行決定是否啟用顏色值跳轉(zhuǎn)功能。默認(rèn)關(guān)閉。

總結(jié)

本文基于一個(gè)場景問題，介紹了VSCode插件的開發(fā)過程，總的來說，這個(gè)項(xiàng)目算是一次很有意思的獨(dú)立開發(fā)體驗(yàn)。在這個(gè)過程中，可以總結(jié)出以下幾個(gè)比較重要的點(diǎn)：

善于發(fā)現(xiàn)問題，并嘗試解決它
積累經(jīng)驗(yàn)，關(guān)注細(xì)節(jié)，說不定何時(shí)能派上用場
Always have fun

作者:蘭燕平

來源-微信公眾號(hào):Goodme前端團(tuán)隊(duì)

出處:https://mp.weixin.qq.com/s/WGV70jVODC_IVmh7dM4Sag

TML編輯器是一種用于創(chuàng)建、編輯和預(yù)覽HTML（超文本標(biāo)記語言）代碼的工具或應(yīng)用程序。它提供了一個(gè)直觀的界面，使用戶能夠輕松地編寫和設(shè)計(jì)網(wǎng)頁內(nèi)容。本文主要介紹HTML 常用編輯器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。

參考文檔：https://www.cjavapy.com/article/3299/

1、Visual Studio Code（VS Code ）

Visual Studio Code（簡稱VS Code）是一款由微軟開發(fā)的跨平臺(tái)源代碼編輯器，支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā)，包括編輯HTML、CSS、JavaScript等前端技術(shù)。VS Code是一款輕量級(jí)的代碼編輯器，啟動(dòng)迅速，占用資源少。VS Code提供了豐富的擴(kuò)展和插件，可以根據(jù)需求安裝插件來增強(qiáng)編輯器功能。

1）安裝和配置

官網(wǎng)地址：Visual Studio Code - Code Editing. Redefined

根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的VS Code。打開VS Code后，可以根據(jù)自己的喜好配置編輯器設(shè)置，如主題、字體等。

2）新建HTML文件

在 VS Code 安裝完成后，選擇" 文件(F)->新建文件(N) "，在新建的文件中輸入以下代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個(gè)標(biāo)題</h1>
 
<p>我的第一個(gè)段落。</p>
 
</body>
</html>

3）編輯HTML文件

在VS Code中，點(diǎn)擊左上角的"文件"菜單，選擇"打開文件"，或者使用快捷鍵Ctrl+O（Windows）或Cmd+O（macOS）來打開HTML文件。

在編輯器中可以直接修改HTML文件的內(nèi)容。VS Code會(huì)自動(dòng)識(shí)別HTML標(biāo)記，并提供代碼高亮和智能提示功能。編輯完成后，使用快捷鍵Ctrl+S（Windows）或Cmd+S（macOS）來保存HTML文件。

4）插件推薦

HTML CSS Support：提供對(duì)HTML和CSS的支持，包括代碼片段、自動(dòng)補(bǔ)全等功能。

Live Server：啟動(dòng)一個(gè)本地開發(fā)服務(wù)器，實(shí)時(shí)預(yù)覽HTML頁面的效果。

Prettier：格式化HTML代碼，使代碼結(jié)構(gòu)更整潔。

Auto Close Tag：自動(dòng)閉合HTML標(biāo)簽，提高編碼效率。

Bracket Pair Colorizer：對(duì)成對(duì)的括號(hào)進(jìn)行著色，方便識(shí)別代碼塊。

2、Sublime Text

Sublime Text是一款流行的跨平臺(tái)源代碼編輯器，支持Windows、macOS和Linux等多種操作系統(tǒng)。它被廣泛用于Web開發(fā)，包括編輯HTML、CSS、JavaScript等前端技術(shù)。

Sublime Text的界面非常簡潔，沒有多余的菜單和工具欄，更便于專注于代碼編輯。Sublime Text支持多種編程語言，包括HTML、CSS、JavaScript、Python、Java等。Sublime Text擁有強(qiáng)大的插件系統(tǒng)，用戶可以根據(jù)需要安裝插件來擴(kuò)展編輯器功能。用戶可以自定義快捷鍵、主題、顏色方案等，以滿足個(gè)性化需求。Sublime Text啟動(dòng)迅速，響應(yīng)快速，適合于快速編輯代碼。

1）安裝和配置

官網(wǎng)地址：Sublime Text - Text Editing, Done Right

根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Sublime Text。打開Sublime Text后，可以根據(jù)自己的喜好進(jìn)行編輯器設(shè)置，如字體、主題等。

2）新建HTML文件

在Sublime Text 安裝完成后，選擇" File->New File "，在新建的文件中輸入以下代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個(gè)標(biāo)題</h1>
 
<p>我的第一個(gè)段落。</p>
 
</body>
</html>

3）編輯HTML文件

在Sublime Text中，點(diǎn)擊左上角的"File"菜單，選擇"Open File"，或者使用快捷鍵Ctrl+O（Windows）或Cmd+O（macOS）來打開HTML文件。在編輯器中可以直接修改HTML文件的內(nèi)容。Sublime Text會(huì)自動(dòng)識(shí)別HTML標(biāo)記，并提供代碼高亮和智能提示功能。編輯完成后，使用快捷鍵Ctrl+S（Windows）或Cmd+S（macOS）來保存HTML文件。

4）插件推薦

Emmet：提供HTML/CSS快速編寫和自動(dòng)完成功能，可以大大提高編碼效率。

Sublime Linter：對(duì)代碼進(jìn)行實(shí)時(shí)語法檢查，幫助發(fā)現(xiàn)潛在的錯(cuò)誤和警告。

Color Highlighter：對(duì)CSS中的顏色進(jìn)行高亮顯示，方便調(diào)試和修改樣式。

SideBarEnhancements：增強(qiáng)側(cè)邊欄功能，提供更多文件操作選項(xiàng)。

3、Dreamweaver

Dreamweaver是由Adobe公司開發(fā)的一款全球知名的網(wǎng)頁設(shè)計(jì)和開發(fā)工具。它為開發(fā)人員和設(shè)計(jì)師提供了一個(gè)可視化的界面，可以直觀地創(chuàng)建和編輯網(wǎng)頁內(nèi)容，同時(shí)也支持手動(dòng)編輯代碼。Dreamweaver提供可視化界面，可以直觀地拖拽和編輯網(wǎng)頁元素，無需手動(dòng)編寫代碼。除了可視化界面，Dreamweaver也支持手動(dòng)編輯代碼，適合于開發(fā)人員和設(shè)計(jì)師。Dreamweaver可在Windows和macOS等多個(gè)平臺(tái)上運(yùn)行。Dreamweaver集成了代碼編輯器、預(yù)覽窗口、文件管理器等功能，提供全面的開發(fā)環(huán)境。

1）安裝和配置

官網(wǎng)地址：Website design software | Adobe Dreamweaver

根據(jù)操作系統(tǒng)下載并安裝相應(yīng)版本的Dreamweaver。打開Dreamweaver后，，根據(jù)需要進(jìn)行編輯器設(shè)置，如界面語言、字體、代碼顏色等。

2）編輯HTML文件

在Dreamweaver中，點(diǎn)擊左上角的"File"菜單，選擇"New"，然后選擇"HTML"，即可新建一個(gè)空白的HTML文件。內(nèi)容如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個(gè)標(biāo)題</h1>
 
<p>我的第一個(gè)段落。</p>
 
</body>
</html>

使用可視化界面，可以直接拖拽頁面元素、調(diào)整布局、插入圖片等。若需要手動(dòng)編輯HTML代碼，可以在下方的代碼編輯器中進(jìn)行修改。Dreamweaver會(huì)自動(dòng)提供代碼補(bǔ)全和語法高亮功能。在Dreamweaver中，可以實(shí)時(shí)預(yù)覽網(wǎng)頁效果，點(diǎn)擊右上角的"Live View"按鈕即可。

3）CSS和JavaScript支持

Dreamweaver也支持CSS和JavaScript的編輯和預(yù)覽，可以幫助創(chuàng)建更豐富的網(wǎng)頁效果。在編輯器中可以直接編輯CSS樣式和JavaScript代碼，并實(shí)時(shí)查看效果。

4）網(wǎng)頁上傳和發(fā)布

Dreamweaver集成了FTP功能，可以直接將編輯好的網(wǎng)頁上傳到服務(wù)器。點(diǎn)擊"Site"菜單，選擇"Manage Sites"，配置好站點(diǎn)設(shè)置，即可進(jìn)行上傳和發(fā)布。

5）Dreamweaver模板和庫

Dreamweaver提供模板和庫功能，可以保存和復(fù)用常用的網(wǎng)頁元素和樣式，提高開發(fā)效率。

參考文檔：https://www.cjavapy.com/article/3299/

軟為Visual Studio Code推出了WebTS（Web Template Studio）跨平臺(tái)擴(kuò)充套件，讓開發(fā)者簡單地就能創(chuàng)建全端網(wǎng)頁應(yīng)用程序項(xiàng)目。WebTS擴(kuò)充套件會(huì)以設(shè)定精靈，指引開發(fā)者創(chuàng)建網(wǎng)頁應(yīng)用程序，開發(fā)者可以在過程中選擇前端框架、后端框架、頁面或是云端服務(wù)，WebTS會(huì)自動(dòng)產(chǎn)生樣板代碼以及說明文件。

WebTS擴(kuò)充套件使用TypeScript和React創(chuàng)建，開發(fā)者可以在前端選用Reon、Vue和Angular創(chuàng)建項(xiàng)目，而后端項(xiàng)目則可以選用Node.js和Flask。為了加速應(yīng)用程序創(chuàng)建，開發(fā)團(tuán)隊(duì)提供了幾個(gè)應(yīng)用程序頁面樣板，讓開發(fā)者為頁面添加常用的UI，除了可以留空外，還可選擇預(yù)先增加網(wǎng)格或列表等界面，開發(fā)者可以在添加這些UI之前先預(yù)覽，待確定網(wǎng)頁樣式后再加入。

微軟提到，該擴(kuò)充套件能產(chǎn)生格式良好且易讀的代碼，也提供最佳實(shí)踐代碼為開發(fā)者整合Azure云端服務(wù)，目前支持Azure Cosmos DB以及App Service。所有WebTS擴(kuò)充套件產(chǎn)生的代碼，都會(huì)連結(jié)ReadMe.md文件提供手把手開發(fā)步驟引導(dǎo)。

開發(fā)者可以在Visual Studio市集中找到WebTS擴(kuò)充套件，除了安裝該套件外，用戶也需要在系統(tǒng)安裝Node.js以及Yarn。WebTS擴(kuò)充套件是一個(gè)開源項(xiàng)目，在GitHub釋出原始碼。

在線咨詢

上一篇：看起來很嚇人！但寶寶的這些“狀況”其實(shí)是正常的
下一篇：分享面試HTML5崗位的小技巧

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

寫一個(gè)VS Code 插件：Color to See

景

需求分析

功能實(shí)現(xiàn)

VSCode WebView

window.createWebviewPanel

window.registerWebviewPanelSerializer

window.registerWebviewViewProvider

項(xiàng)目初始化

接入WebView

新增colorToSee命令

創(chuàng)建WebView來顯示自定義UI

頁面渲染

定義狀態(tài)

渲染函數(shù)

頁面掛載

如何構(gòu)造狀態(tài)colorInfos?

顏色格式分析

顏色匹配

RGB和HSL

顏色關(guān)鍵詞

16進(jìn)制Hex

顏色獲取

策略維護(hù)

文件遍歷

顏色獲取getColorInfo

頁面更新

消息通信

在Webview發(fā)送消息

在Extension接收消息

更新機(jī)制

插件配置

成品

Demo Snapshop

插件市場鏈接

局限性分析和優(yōu)化點(diǎn)

文件掃描效率

局限性

優(yōu)化

用戶體驗(yàn)

局限性

優(yōu)化

顏色值跳轉(zhuǎn)功能配置化

局限性

優(yōu)化

總結(jié)

1、Visual Studio Code（VS Code ）

2、Sublime Text

3、Dreamweaver

您的項(xiàng)目需求

3、Dreamweaver