1. 装饰器使用样例

  1. import * as vscode from 'vscode';
  3. function get_selection_postition(editor: vscode.TextEditor) {
  4.     let selection = editor?.selection;
  6.     let selection_start = selection?.start;
  7.     let selection_end = selection?.end;
  9.     return [selection_start, selection_end]
  10. }
  12. function hight_light(context: vscode.ExtensionContext) {
  13.     let disposable = vscode.commands.registerCommand("CustomPlugins:HightLight", () => {
  14.         let decorationType = vscode.window.createTextEditorDecorationType({
  15.             backgroundColor: '#fff'
  16.         });
  18.         let editor = vscode.window.activeTextEditor;
  19.         let [selection_start, selection_end] = get_selection_postition(editor)
  21.         editor?.setDecorations(decorationType, [new vscode.Range(selection_start, selection_end)])
  22.     })
  24.     context.subscriptions.push(disposable)
  25. }
  27. exports.activate = hight_light;
  29. function deactivate() {
  31. }
  33. exports.deactivate = deactivate;
  • 作用：将文档中被使用光标选中的部分使用 #fff 进行高亮标记

2. 内容详解

  1. 获取光标选中位置， let [selection_start, selection_end] = get_selection_postition(editor)
  2. 创建 vscode.window.createTextEditorDecoration 对象，添加属性 backgroundColor
  3. 通过装饰器在指定的代码片段Range上将背景色进行高亮

3. 可用参数说明

  1. export interface DecorationRenderOptions extends ThemableDecorationRenderOptions {
  2.         isWholeLine?: boolean;
  3.         rangeBehavior?: DecorationRangeBehavior;
  4.         overviewRulerLane?: OverviewRulerLane;
  5.         light?: ThemableDecorationRenderOptions;
  6.         dark?: ThemableDecorationRenderOptions;
  7. };
  9. export interface ThemableDecorationRenderOptions {
  10.         backgroundColor?: string | ThemeColor;
  11.         outline?: string;
  12.         outlineColor?: string | ThemeColor;
  13.         outlineStyle?: string;
  14.         outlineWidth?: string;
  15.         border?: string;
  16.         borderColor?: string | ThemeColor;
  17.         borderRadius?: string;
  18.         borderSpacing?: string;
  19.         borderStyle?: string;
  20.         borderWidth?: string;
  21.         fontStyle?: string;
  22.         fontWeight?: string;
  23.         textDecoration?: string;
  24.         cursor?: string;
  25.         color?: string | ThemeColor;
  26.         opacity?: string;
  27.         letterSpacing?: string;
  28.         gutterIconPath?: string | Uri;
  29.         gutterIconSize?: string;
  30.         overviewRulerColor?: string | ThemeColor;
  31.         before?: ThemableDecorationAttachmentRenderOptions;
  32.         after?: ThemableDecorationAttachmentRenderOptions;
  33.     }

1. 颜色相关（color）

  1. backgroundColor?: string | ThemeColor;
  2. borderColor?: string | ThemeColor;
  3. color?: string | ThemeColor;
  4. overviewRulerColor?: string | ThemeColor;
  6. new vscode.ThemeColor('editorWarning.foreground');
  • 注意这些参数除了string类型外，还可以直接使用ThemeColor(如上面例子)，这样对应的颜色就会随着主题的变化而变化

    2. 边框相关（border）

    1. border?: string;
    2. borderColor?: string | ThemeColor;
    3. borderRadius?: string;
    4. borderSpacing?: string;
    5. borderStyle?: string;
    6. borderWidth?: string;

    3. 轮廓相关（Outline）

    1. outline?: string;
    2. outlineColor?: string | ThemeColor;
    3. outlineStyle?: string;
    4. outlineWidth?: string;

4. 字体相关（Font）

  1. fontStyle?: string;
  2. fontWeight?: string;
  3. opacity?: string;
  4. letterSpacing?: string;
  • opacity：控制字体的透明度

  • letterSpacing：控制文字之间的间距

    5. 其他

    1. gutterIconPath?: string | Uri;
    2. gutterIconSize?: string;

  • 可以通过这两个属性在行号旁边添加图标

  • 类似 VSCode中的断点，就可以通过这个属性在插件中实现