>  기사  >  개발 도구  >  색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.

색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.

青灯夜游
青灯夜游앞으로
2022-10-19 19:57:064129검색

내가 VSCode플러그인을 개발하는 독학 과정을 기록해 보세요. 색상 코드 프롬프트를 사용하여 중국어 번체 색상을 얻는 Visual Studio Code 확장을 구현합니다.

색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.

References

공식 문서: code.visualstudio.com/api

공식적으로 제공되는 다양한 플러그인의 예: github.com/microsoft/v…

Requirements

저는 CSS를 작성하고 있습니다. 때로는 색상 선택에 어려움을 겪는 경우가 많습니다. VS Code에 내장된 플러그인에서 색상 선택 기능을 제공하지만 256^3 색상 중에서 선택할 때 원하는 색상을 찾지 못할 수도 있습니다. 그래서 색상 프롬프트 플러그인을 갖고 싶었습니다. # + 색상 이름을 입력하면 해당 색상이 나열되어 코드 프롬프트 형식으로 선택할 수 있습니다. [추천 학습: "vscode 입문 튜토리얼# + 颜色名,就能以代码提示的方式,将对应的颜色列出来供我选择。【推荐学习:《vscode入门教程》】

我在VS Code插件市场搜了一圈,没找到类似的插件,最终决定自己写一个,本着学习的态度,我将学习过程记录下来。

这是最终效果:

색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.

演示是使用拼音,直接用汉字也是可行的。

在VS Code插件市场搜索Chinese Colors或者“中国色”即可找到我写的这个插件。

仓库地址:taiyuuki/chinese-colors

获取颜色

首先第一件事就是要有现成的颜色代码,很快我就找到了这个网站:中国色

这个网站提供了500多种颜色的rgb值以及hex值,打开浏览器控制台,输入colorsArray就能全部拿到,这就是我想要的。

색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.

从网站底部的信息来看,这个网站是山寨自日本色,颜色据称来自中科院科技情报编委会名词室编写、科学出版社1957年出版的《色谱》。

这个颜色来源是否可信我无从考证,随便百度一下“中国传统色”,就可以找到很多版本的所谓中国色,我在github上还找到了另一个接近2k star的中国色项目:中国传统颜色手册,这个网站使用的颜色与前者完全不同,是来自于一篇现在已经无法查看的新浪博客,颜色数量我没有统计,粗略估计在200以内。

初始化项目

安装开发工具

 npm i -g yo generator-code

新建项目

 yo code

各项配置如下:

색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.

Hello World

初始项目中有个Hello World,用VS Code打开项目,然后按F5(或者点击“运行-->启动调试”)可以开启调试窗口。

然后在调试窗口下 Ctrl + Shift + P (或者点击“设置-->命令面板”),输入并选择 Hello World 命令,就会在编辑器右下角弹出一个消息提示。

extension.ts是插件的入口文件:

 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() {}

package.json

查看package.json"]

저는 VS에 있습니다 코드 플러그인 시장을 검색했지만 비슷한 플러그인을 찾을 수 없었습니다. 마침내 스스로 학습하는 자세로 학습 과정을 기록하기로 결정했습니다.

최종 효과는 다음과 같습니다.

1 .gif

🎜시연에서는 병음을 사용하지만 한자를 직접 사용하는 것도 가능합니다. 🎜🎜VS Code 플러그인 마켓에서 Chinese Colors 또는 "China Color"를 검색하여 내가 작성한 플러그인을 찾아보세요. 🎜🎜창고 주소: taiyuuki/chinese-colors🎜🎜

색상 얻기🎜🎜먼저 할 ​​일은 기성 색상 코드를 갖는 것입니다. 곧 다음 웹사이트를 찾았습니다: 중국 색상🎜🎜🎜이 웹사이트는 500개 이상의 색상에 대해 RGB 값과 16진수 값을 제공합니다. 브라우저 콘솔을 열고 colorsArray를 입력하면 모두 얻을 수 있습니다. 이것이 제가 원하는 것입니다. . 🎜🎜색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.🎜
🎜사이트 하단의 정보로 판단하면 이 사이트는 일본색🎜을 카피캣으로 하고 있으며, 이 색은 중국과학원에서 나온 것이라고 한다. "크로마토그래피"는 과학기술정보편집위원회 용어집에서 편찬하고 1957년 과학출판사에서 출판했다. 🎜🎜이 색상의 출처를 신뢰할 수 있는지 확인할 방법이 없습니다. Baidu에서 "중국 전통 색상"을 검색하면 소위 중국 색상의 여러 버전을 찾을 수 있습니다. github에 있는 거의 2,000개의 별: 중국어 번체 색상 매뉴얼🎜, 이 웹사이트에 사용된 색상은 완전히 이전과 다르게 지금 기사에서 나온 내용입니다. 시나 블로그에 더 이상 볼 수 없는 색상 수에 대한 통계는 없지만 대략 200개 이내로 추정됩니다. 🎜

프로젝트 초기화🎜🎜개발 도구 설치🎜
 {
     "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格式"    // 属性描述
                 }
             }
         }]
     },
 }
🎜구성은 다음과 같습니다.🎜🎜색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.🎜

Hello World🎜🎜초기 프로젝트에 Hello World가 있습니다. VS Code로 프로젝트를 연 다음 F5 키를 누릅니다(또는 "실행->디버깅 시작" 클릭). 디버깅 창을 엽니다. 🎜🎜그런 다음 디버깅 창에서 Ctrl + Shift + P(또는 "설정-->명령 패널" 클릭)에서 Hello World 명령을 입력하고 선택하면 편집기 오른쪽 하단에 메시지 프롬프트가 나타납니다. 🎜🎜extension.ts는 플러그인의 항목 파일입니다. 🎜
 import { workspace } from "vscode";
 const configuration = workspace.getConfiguration();
 const isRGB = configuration.RGB;

package.json🎜🎜View package.json, 더 중요한 두 가지: 🎜
 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);
 }
🎜activationEvents는 플러그인의 활성화 구성입니다. 각 항목은 플러그인 활성화 조건에 해당합니다. 형식은 ":"이고 onCommand는 호출 명령입니다(즉, 위의 입력 Hello World). 🎜🎜contributes: 일반적으로 기여 포인트로 번역되며 활성화이벤트 구성 항목에 해당하는 "chinese-colors.helloWorld"가 구성됩니다. 🎜🎜다른 package.json 구성은 아래 표를 참조하세요. 🎜
名称 必要 类型 说明
name string 插件名称,必须为小写且不能有空格。
version string 插件版本
publisher string 发布者
engines object 一个至少包含vscode键值对的对象,该键表示的是本插件可兼容的VS Code的版本,其值不能为*。比如 ^0.10.5 表示插件兼容VS Code的最低版本是0.10.5
license string 授权。如果有授权文档LICENSE.md,可以把license值设为"SEE LICENSE IN LICENSE.md"
displayName string 插件市场中显示的名字。
description string 描述,说明本插件是什么以及做什么。
categories string[] 插件类型:[Languages, Snippets, Linters, Themes, Debuggers, Other]
keywords array 一组 关键字 或者 标记,方便在插件市场中查找。
galleryBanner object 插件市场中横幅的样式。
preview boolean 在市场中把本插件标记为预览版本。
main string 插件的入口文件。
contributes object 一个描述插件 贡献点 的对象。
activationEvents array 一组用于本插件的激活事件。
dependencies object 生产环境Node.js依赖项。
devDependencies object 开发环境Node.js依赖项。
extensionDependencies array 一组本插件所需的其他插件的ID值。格式 ${publisher}.${name}。比如:vscode.csharp
scripts object 和 npm的 scripts一样,但还有一些额外VS Code特定字段。
icon string 一个128x128像素图标的路径。

用户自定配置项

颜色代码有多种表示方式,比较常用的是16进制(#ffffff)和rgb(255,255,255)这两种,因此我需要让用户自己选择采用哪种方式。

在contributes中有个configuration,允许用户对插件进行一些自定义配置。

package.json

 {
     // ...
     "contributes": {
         "configuration": [{
             "title": "color mode",// 配置项名称
             "properties": {
                 // 配置属性
                 "RGB": {
                     "type": "boolean",  // 属性值类型
                     "default": false,   // 属性默认值
                     "description": "控制预设的中国色采用RGB格式"    // 属性描述
                 }
             }
         }]
     },
 }

这样就可以在扩展设置中进行一些自定义的设置:

색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.

我们可以通过workspace.getConfiguration()获取用户的配置。

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

代码补全

API

代码补全API:

vscode.languages.registerCompletionItemProvider(selector, provider, …triggerCharacters)

该api的文档:code.visualstudio.com/api/referen…

该方法有三个参数:

参数 Description
selector: string/string[] 选择编程语言,比如python
provider 供应者配置对象
triggerCharacters: string/string[] 触发字符, 比如 .:

register completion item provider(注册完成件供应者),这个provider也是比较费解的一个词,直译是供应者,我猜:代码补全就相当于插件给我们供应了代码,所以叫provider。

provider是一个对象,要求必须包含一个叫provideCompletionItems的方法,该方法需要返回一个数组,数组的每一项是一个CompletionItem对象,规定了代码提示和补全的规则。

官方示例

完整示例:github.com/microsoft/v…

 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);
 }

provideCompletionItems参数:

position:当前光标所处的位置。

document:用于获取、控制文档的内容或状态,这里列举几个常用的方法和属性:

  • 方法:

    • getWordRangeAtPosition(position): Range:获取指定位置单词的范围(起始位置)
    • getText(Range):string:获取指定范围的文本
    • lineAt(position):string:获取指定位置的文本
    • validatePosition(position):Position:获取鼠标停留的位置
  • 属性

    • lineCount:总代码行数
    • languageId:语言名称
    • isClosed:当前文件是否关闭
    • isDirty:当前文件的代码是否更改未保存

CompletionItem对象

CompletionItem对象可以通过new vscode.CompletionItem()的方式创建,但它默认只能补全代码,不能自定义替换,并不能满足我的需求,因此需要自己创建。

CompletionItem对象包含的属性:

属性 说明
detail: string 语义化描述
documentation: string 语义化描述
filterText: string 代码过滤。匹配输入的内容,没有设置时,使用label
insertText: string 插入、补全的代码。没有设置时,使用label
label: string 默认的匹配代码、补全代码
kind 代码类型,控制显示代码提示前的图标
sortText: string 排序文本,与sortText匹配的提示代码会排在靠前的位置
textEdit 对补全代码进行编辑,如果设置了textEdit,insertText会失效

색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.

kind的取值:

  • Class
  • Color
  • Constructor
  • Enum
  • Field
  • File
  • Function
  • Interface
  • Keyword
  • Method
  • Module
  • Property
  • Reference
  • Snippet
  • Text
  • Unit
  • Value
  • Variable

简单的示例

 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() {}

记得要在package.json里配置激活:

"activationEvents": [
    "onLanguage:css"
  ]

中国色插件

package.json关键配置:

 {
     "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格式"
                 }
             }
         }]
     },
 }

颜色列表colors.ts

 // 声明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",
   },
   // ...
 ]

extensions.ts

 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() {}

如此,代码补全的功能已经基本实现,实际开发时,为了便于维护,需要将这部分逻辑抽离出来。

颜色预览

接下来,需要实现颜色的预览,虽然VS Code内置的插件已经实现了这项功能,但我的需求是:不仅能预览颜色,还得显示颜色名称。

색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.

API

实现颜色预览需要用到装饰效果,涉及以下这些API:

window.createTextEditorDecorationType(options):创建装饰效果的类型

window.activeTextEditor.setDecorations(decorationType, decorations):添加装饰效果至文档

window.onDidChangeActiveTextEditor:文档内容变化事件

workspace.onDidChangeTextDocument:切换文档事件

官方示例

首先来看一下官方提供的示例片段

完整实例: github.com/microsoft/v…

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);

}

效果如下:

색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.

DecorationType

DecorationType是通过window.createTextEditorDecorationType(options)创建的对象,它主要用来设置装饰效果的样式,其实就是css样式,比如border、color、backgroundColor等等。

如果要在匹配结果之前或之后添加装饰,可以添加before/after字段进行设置,还可以分别给dark、light模式配置不同的样式。

const decorationType =  window.createTextEditorDecorationType({
    // 在匹配位置之前添加装饰效果:
    before: {
        color: &#39;#eee&#39;,
        backgroundColor: &#39;#fff&#39;,
        width: &#39;fit-content&#39;
    }
})

由于该方法支持的样式字段有限,有些样式(比如line-height)无法在options里直接添加,但我们可以在任意字段后添加分号,将这些样式写在后面,比如:

const decorationType =  window.createTextEditorDecorationType({
    // 在匹配位置之后添加装饰效果:
    after: {
        color: &#39;#333&#39;,
        backgroundColor: &#39;#fff&#39;,
        width: &#39;fit-content&#39;,
        height: &#39;0.8em&#39;,
        // fontSize: &#39;0.6em&#39;, 这么设置是无效的,因为并不支持fontSize字段,
        // 但我们可以将其添加在任意字段后面
        fontStyle: &#39;normal;font-size:0.6em;line-height:0.8em&#39;
    }
})

具体支持哪些字段,可以查看此API的官方文档:

VS Code API | Visual Studio Code Extension API

Decoration对象

Decoration对象有三个属性:

  • range:装饰效果的位置,range对象可以通过new vscode.Range(start, end)创建

  • hoverMessage:鼠标悬停时的提示信息

  • renderOptions:和decorationType类似,可以单独对每一个装饰效果设置样式。但只支持before、after、dark、light四个字段,也就是说,无法再对匹配的内容本身设置样式。

示例

由于实现的代码比较长,和上述官方示例其实差不多,这里就不再贴出来了,感兴趣的可以我去文章开头的仓库地址查看。

值得一提的是,为了颜色的名称在不同的颜色背景下都能清晰的显现,我这里用到了一个计算对比色的方法,贴出来供参考:

// 通过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 ? &#39;black&#39; : &#39;white&#39;
}

插件打包

打包命令:

vsce package

如果打包失败,可能的原因:

  • packege.json缺少上文表格中必要的配置项
  • VS Code版本与packege.json里设置的版本不兼容
  • 根目录下缺少README.md文件
  • 根目录下缺少LICENSE.md文件

更多关于VSCode的相关知识,请访问:vscode教程

위 내용은 색상 코드를 표시하는 VS Code 플러그인을 개발해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제