带你开发一个提示颜色代码的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.co妹妹ands.registerCo妹妹and('chinese-colors.helloWorld', () => {
         // 弹没动静提醒
         vscode.window.showInformationMessage('Hello World from Chinese Colors!');
     });
 
     // 加添到插件上高文
     context.subscriptions.push(disposable);
 }
 
 // deactivate办法会正在插件掉活时挪用
 export function deactivate() {}

 {
     "activationEvents": [
         "onCo妹妹and:chinese-colors.helloWorld"
     ],
     "contributes": {
         "co妹妹ands": [
             {
                 "co妹妹and": "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 provider两 = 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(provider二);
 }

 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;
 };
 
 // 那面只列2个色调
 export const colors: Color[] = [
   {
     rgb: [9两, 34, 35],
     hex: "#5c两两两3",
     name: "暗玉紫",
     phonics: "anyuzi",
   },
   {
     rgb: [两38, 16两, 164],
     hex: "#eea二a4",
     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, 两), 16)
  const g = parseInt(hexcolor.substring(3, 4), 16)
  const b = parseInt(hexcolor.substring(5, 6), 16)
  const yiq = (r * 二99 + g * 587 + b * 114) / 1000
  return yiq >= 8 必修 'black' : 'white'
}

vsce package