VS code 插件开发3 --- 装饰数字(官网demo) 教程文档

一、效果展示

小伙伴们，今天我们来学习一下如果装饰我们想要的内容。如果数字长度3展示一种样式，长度小于3的话展示另一种样式。

二、安装

关于安装，我在VS Code插件开发教程–树视图+网页视图这里的开头有详细的介绍。如果是刚入门的小伙伴们请先花费5分钟的时间来这里看下如何安装以及最初的使用。

我在这里快速的讲解一遍，没看懂的小伙伴自行看上面的链接哈～

• 终端键入：npm install -g yo generator-code
• 终端键入 yo code
• 选择第一项 New Extension (TypeScript)
• 重新打开 vscode 进入该项目的目录下
• 按下 F5 启动插件
• 按下 ctrl+shift+P 或者 command+chift+P 弹出命令界面，输入 Hello World 点击回车
• 如果右下角弹出 Hello World 的消息，那么插件就创建成功了

补充一点： 官网api 这里的 api 请大家一定要尽量学会用。一开始不会用看不懂很正常。每次遇到新的属性就上这里查一查，时间久了自然能摸出一点门道来。谷歌浏览器有翻译功能。

三、创建功能文件框架

如果有看过 VS Code插件开发教程2 – StatusBar 状态栏的小伙伴应该会知道

我们会创建一个 .ts 文件用来放功能性代码，而 extension.ts 文件只负责激活插件。

我们在 extension.ts 文件的同级目录下创建一个 DecorationNumber.ts 文件

import {
    window } from 'vscode';

export class DecorationNumber {
   

  constructor() {
   }

  // 创建一个方法，一会我们会把功能代码编写在此
  public DecNumber() {
   
    window.showInformationMessage('装饰数字');
  }

  dispose() {
   }
}

我们来详细介绍下上面的小框架

constructor: 给该类增加构造函数，类似与我们创建对象传递参数一样

dispose(): 销毁对象和自由资源，比如我们在构造函数中创建了一些内容，就需要在这个方法中进行销毁，如果没有内容需要销毁的话，就像我上面那样写个空函数在那里。

dispose() 很重要，如果不写后面会报错哈！希望小伙伴们谨记

接下来我们先让 DecNumber() 方法能够跑起来，一步一步慢慢来不会错哈。

打开 package.json 文件，编辑它：

"activationEvents": [                           // 创建激活事件
  "onCommand:extension.decorationNumber"        // 创建激活该插件的命令
],
"main": "./out/extension.js",
"contributes": {
                                   // 配置实例
  "commands": [{
                                   // 命令面板
    "command": "extension.decorationNumber",
    "title": "decNumber"
  }]
},

讲解下上面的代码(以下是官网截图)：

最后一步 打开并编辑 extension.ts:

import {
    DecorationNumber } from './DecorationNumber';
export function activate(context: vscode.ExtensionContext) {
   
  // 实例化放类
  let decorationNumber = new DecorationNumber();

  // 当执行 'extension.decorationNumber' 命令时，掉用类中的方法
	context.subscriptions