帶你開發一個提示顏色程式碼的VS Code外掛

 npm i -g yo generator-code

 yo code

 import * as vscode from 'vscode';
 
 // activate方法會在外掛被啟用時呼叫
 export function activate(context: vscode.ExtensionContext) {
     
     // 註冊命令，第一個引數是命令名稱，第二引數是回撥
     let disposable = vscode.commands.registerCommand('chinese-colors.helloWorld', () => {
         // 彈出訊息提示
         vscode.window.showInformationMessage('Hello World from Chinese Colors!');
     });
 
     // 新增到外掛上下文
     context.subscriptions.push(disposable);
 }
 
 // deactivate方法會在外掛失活時呼叫
 export function deactivate() {}

 {
     "activationEvents": [
         "onCommand:chinese-colors.helloWorld"
     ],
     "contributes": {
         "commands": [
             {
                 "command": "chinese-colors.helloWorld",
                 "title": "Hello World"
             }
         ]
     },
 }

 {
     // ...
     "contributes": {
         "configuration": [{
             "title": "color mode",// 設定項名稱
             "properties": {
                 // 設定屬性
                 "RGB": {
                     "type": "boolean",  // 屬性值型別
                     "default": false,   // 屬性預設值
                     "description": "控制預設的中國色採用RGB格式"    // 屬性描述
                 }
             }
         }]
     },
 }

 import { workspace } from "vscode";
 const configuration = workspace.getConfiguration();
 const isRGB = configuration.RGB;

 import * as vscode from 'vscode';
 
 export function activate(context: vscode.ExtensionContext) {
 
     // 註冊供應者：languages.registerCompletionItemProvider
     const provider2 = vscode.languages.registerCompletionItemProvider(
         'plaintext',// plaintext，表示對txt檔案啟用該外掛
         {
             // 實現provideCompletionItems方法
             // document的內容見下文，position為當前遊標的位置
             provideCompletionItems(document: vscode.TextDocument, position: vscode.Position) {
 
                 // 獲取當前這行程式碼
                 const linePrefix = document.lineAt(position).text.substr(0, position.character);
                 // 如果這行程式碼不是以console.結尾，返回undefined，表示不會彈出程式碼提示
                 if (!linePrefix.endsWith('console.')) {
                     return undefined;
                 }
 
                 // 返回CompletionItem物件組成的陣列，補全程式碼列表：log、warn、error
                 // CompletionItem物件可以自己建立，也可以像下面這樣new vscode.CompletionItem的方式建立
                 // vscode.CompletionItem()有兩個引數： 
                 // 第一個是補全的程式碼，第二個是程式碼型別，用於控制顯示在每一行提示前的圖示
                 // vscode.CompletionItemKind.Method表示該程式碼是一個方法
                 return [
                     new vscode.CompletionItem('log', vscode.CompletionItemKind.Method),
                     new vscode.CompletionItem('warn', vscode.CompletionItemKind.Method),
                     new vscode.CompletionItem('error', vscode.CompletionItemKind.Method),
                 ];
             }
         },
         '.' // 以.作為觸發
     );
 
     context.subscriptions.push(provider2);
 }

 import * as vscode from "vscode";
 import { CompletionItemKind } from "vscode";
 
 export function activate(context: vscode.ExtensionContext) {
   const cc = vscode.languages.registerCompletionItemProvider(
     "css",
     {
       provideCompletionItems() {        
         return [
             {
                 detail: '#66ccff',
                 documentation: '天依藍',
                 kind: CompletionItemKind.Color,
                 filterText: `#66ccff天依藍`,
                 label: '天依藍',
                 insertText: '#66ccff'
             },
             {
                 detail: '#39c5bb',
                 documentation: '初音綠',
                 kind: CompletionItemKind.Color,
                 filterText: `#39c5bb初音綠`,
                 label: '初音綠',
                 insertText: '#39c5bb'
             }
         ];
       },
     },
     "#"
   );
   context.subscriptions.push(cc);
 }
 
 export function deactivate() {}

"activationEvents": [
    "onLanguage:css"
  ]

 {
     "activationEvents": [
         "onLanguage:css",
         "onLanguage:scss",
         "onLanguage:sass",
         "onLanguage:less",
         "onLanguage:stylus",
         "onLanguage:html",
         "onLanguage:xml",
         "onLanguage:json",
         "onLanguage:javascript",
         "onLanguage:typescript",
         "onLanguage:javascriptreact",
         "onLanguage:typescriptreact",
         "onLanguage:vue",
         "onLanguage:vue-html"
     ],
     "contributes": {
         "configuration": [{
             "title": "Chinese Colors",
             "properties": {
                 "RGB": {
                     "type": "boolean",
                     "default": false,
                     "description": "控制預設的中國色採用RGB格式"
                 }
             }
         }]
     },
 }

 // 宣告Color型別
 export type Color = {
   rgb: number[];
   hex: string;
   name: string;
   phonics: string;
 };
 
 // 這裡只列兩個顏色
 export const colors: Color[] = [
   {
     rgb: [92, 34, 35],
     hex: "#5c2223",
     name: "暗玉紫",
     phonics: "anyuzi",
   },
   {
     rgb: [238, 162, 164],
     hex: "#eea2a4",
     name: "牡丹粉紅",
     phonics: "mudanfenhong",
   },
   // ...
 ]

 import * as vscode from "vscode";
 import { workspace, CompletionItemKind } from "vscode";
 import { colors, Color } from "./colors";
 
 const isRgb = workspace.getConfiguration().RGB;
 
 export function activate(context: vscode.ExtensionContext) {
   const cc = vscode.languages.registerCompletionItemProvider(
     [
       "css",
       "scss",
       "sass",
       "less",
       "stylus",
       "html",
       "xml",
       "json",
       "javascript",
       "typescript",
       "javascriptreact",
       "typescriptreact",
       "vue",
       "vue-html",
     ],// activationEvents
     {
       provideCompletionItems() {
         const list = [] as CompletionItemKind[];
 
         colors.forEach((color: Color) => {
           list.push({
             detail: isRgb ? rgb : hex,
             documentation: color.name,
             kind: CompletionItemKind.Color,
             filterText: "#" + color.name + color.phonics,
             label: color.name,
             insertText: isRgb ? rgb : hex,
           });
         });
         return list;
       },
     },
     "#"
   );
   context.subscriptions.push(cc);
 }
 
 export function deactivate() {}

import * as vscode from 'vscode';

// 外掛啟用時呼叫
export function activate(context: vscode.ExtensionContext) {

	console.log('decorator sample is activated');

	let timeout: NodeJS.Timer | undefined = undefined;

    // 為small numbers建立裝飾效果型別
	const smallNumberDecorationType = vscode.window.createTextEditorDecorationType({
        // 以下是裝飾效果的樣式
		borderWidth: '1px',
		borderStyle: 'solid',
		overviewRulerColor: 'blue',
		overviewRulerLane: vscode.OverviewRulerLane.Right,
		light: {
			// 亮色主題下的邊框顏色
			borderColor: 'darkblue'
		},
		dark: {
			// 暗色主題下的邊框顏色
			borderColor: 'lightblue'
		}
	});

	// 為large numbers建立裝飾效果型別
	const largeNumberDecorationType = vscode.window.createTextEditorDecorationType({
		cursor: 'crosshair',
		// 設定裝飾的背景顏色, 在package.json中可以設定該名稱對應的顏色
		backgroundColor: { id: 'myextension.largeNumberBackground' }
	});

    // activeEditor是當前活躍（展示）的檔案編輯器範例
	let activeEditor = vscode.window.activeTextEditor;

    // updateDecorations方法，在每次檔案被更新或切換檔案時呼叫。
	function updateDecorations() {
		if (!activeEditor) {
			return;
		}
        // 匹配數位的正則
		const regEx = /\d+/g;
        // 獲取檔案的文字
		const text = activeEditor.document.getText();
        // 裝飾效果陣列，用於歸集每一個Decoration物件
		const smallNumbers: vscode.DecorationOptions[] = [];
		const largeNumbers: vscode.DecorationOptions[] = [];
		let match;
		while ((match = regEx.exec(text))) {
            // 獲取匹配結果的起始位置
			const startPos = activeEditor.document.positionAt(match.index);// 開始位置
			const endPos = activeEditor.document.positionAt(match.index + match[0].length);// 結束位置
            // Decoration物件
			const decoration = {
                // 裝飾效果的位置
                range: new vscode.Range(startPos, endPos), 
                // 滑鼠懸停（hover）的提示資訊
                hoverMessage: 'Number **' + match[0] + '**' 
            };
            // 將符合的結果歸集
			if (match[0].length < 3) {
				smallNumbers.push(decoration);
			} else {
				largeNumbers.push(decoration);
			}
		}
        // 新增裝飾效果
		activeEditor.setDecorations(smallNumberDecorationType, smallNumbers);
		activeEditor.setDecorations(largeNumberDecorationType, largeNumbers);
	}

    // 給方法節流
	function triggerUpdateDecorations(throttle = false) {
		if (timeout) {
			clearTimeout(timeout);
			timeout = undefined;
		}
		if (throttle) {
			timeout = setTimeout(updateDecorations, 500);
		} else {
			updateDecorations();
		}
	}

    // 開啟檔案時呼叫一次
	if (activeEditor) {
		triggerUpdateDecorations();
	}
    
	// 切換檔案時呼叫
	vscode.window.onDidChangeActiveTextEditor(editor => {
        // 這一步賦值是必須的，確保activeEditor是當前開啟的檔案編輯器範例
		activeEditor = editor;
		if (editor) {
			triggerUpdateDecorations();
		}
	}, null, context.subscriptions);

    // 檔案內容傳送改變時呼叫
	vscode.workspace.onDidChangeTextDocument(event => {
		if (activeEditor && event.document === activeEditor.document) {
			triggerUpdateDecorations(true);
		}
	}, null, context.subscriptions);

}

const decorationType =  window.createTextEditorDecorationType({
    // 在匹配位置之前新增裝飾效果：
    before: {
        color: '#eee',
        backgroundColor: '#fff',
        width: 'fit-content'
    }
})

const decorationType =  window.createTextEditorDecorationType({
    // 在匹配位置之後新增裝飾效果：
    after: {
        color: '#333',
        backgroundColor: '#fff',
        width: 'fit-content',
        height: '0.8em',
        // fontSize: '0.6em', 這麼設定是無效的，因為並不支援fontSize欄位，
        // 但我們可以將其新增在任意欄位後面
        fontStyle: 'normal;font-size:0.6em;line-height:0.8em'
    }
})

// 通過hex值計算應該使用的字型顏色
function getContrastColor(hexcolor: string) {
  const r = parseInt(hexcolor.substring(1, 2), 16)
  const g = parseInt(hexcolor.substring(3, 4), 16)
  const b = parseInt(hexcolor.substring(5, 6), 16)
  const yiq = (r * 299 + g * 587 + b * 114) / 1000
  return yiq >= 8 ? 'black' : 'white'
}

vsce package