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