『初体验』 vscode插件开发与打包（TypeScript）

步骤

1.安装搭建脚手架插件（命令行执行）

npm install -g yo generator-code

2.搭建脚手架（命令行执行）

yo code

配置如下各选项：

? What type of extension do you want to create? New Extension (TypeScript)  // 选择ts语言构建脚手架
? What's the name of your extension? providerPlugin // 项目名称
? What's the identifier of your extension? providerplugin  // 项目标识
? What's the description of your extension?   // 项目描述
? Initialize a git repository? No  // 是否初始化git仓库
? Which package manager to use? npm // 使用哪个包管理器

3.脚手架自动搭建完成

若发现您的项目根路径中没有 node_modules 文件夹，说明在搭建时依赖没有安装成功，此时可以自己在命令行中运行 npm install 安装相关依赖。

若安装依赖报错或者插件需要兼容vscode更低版本，可做以下修改：

// 修改package.json中devDependencies项中
"@types/vscode": "^1.27.0"

插件兼容vscode最低版本也相应修改：

// 修改package.json中
"engines": {"vscode": "^1.27.0" }

目录结构如下所示：

4.简化src/extension.ts 入口文件

将extension.ts文件内容简化后，能够清晰看到文件内容结构，如下：

import * as vscode from 'vscode'; // 引入vscode

// 插件激活后执行
export function activate(context: vscode.ExtensionContext) {

}
// 插件失效后执行
export function deactivate() {}

5.小demo（实现一个自动补全功能）

小功能：在编写js语言时，输入注释 // 时，自动补全当前用户（可配置）和当前时间。

• 在src下新增CommentProvider.ts文件：

// CommentProvider.ts
import * as vscode from 'vscode'

class CommentProvider implements vscode.CompletionItemProvider{
    provideCompletionItems(document: vscode.TextDocument, position: vscode.Position): vscode.ProviderResult<vscode.CompletionItem[] | vscode.CompletionList<vscode.CompletionItem>> {
        const line = document.lineAt(position);
        const lineText = line.text.substring(0, position.character);
        if(lineText.slice(-2) === '//') { // 匹配‘//’后进入
            const name= vscode.workspace.getConfiguration().get('providerPlugin.name'); // 获取配置中的用户名
            var tempRes = ` @${name}(${new Date().toLocaleDateString()}) ` // 自动补全内容
            const res = new vscode.CompletionItem(tempRes,vscode.CompletionItemKind.Snippet);
            return [res];
        }
    }
}

export default CommentProvider

• 在入口extension.ts文件中注册：

vscode.languages.registerCompletionItemProvider
参一：要关联的文件类型；
参二：一个对象，里面必须包含provideCompletionItems和resolveCompletionItem这2个方法；
参三：一个可选的触发提示的字符列表；

import * as vscode from 'vscode';
import CommentProvider from './CommentProvider'

export function activate(context: vscode.ExtensionContext) {
    const commentProvider = new CommentProvider();
    context.subscriptions.push(vscode.languages.registerCompletionItemProvider('javascript',commentProvider,'/'))
}

export function deactivate() {}

• 在package.json做相关配置

// 配置 激活事件，配置为打开vscode即激活
"activationEvents": [
   "*"
]

// 配置 插件配置入口
"contributes": {
		"configuration":{
			"title": "自动补全插件配置",
			"properties": {
				"providerPlugin.name":{
					"type": "string",
					"default": "",
					"description": "您的名字"
				}
			}
		}
	},

6.调试

点击 Run Extension 左边的运行按钮即可打开 扩展开发宿主窗口：

在自动弹起的宿主窗口中，新建一个文件（ctrl+n，无需保存），并修改右下角的语言模式，修改为JavaScript，在编辑区域输入 // 即可调试效果。

7.在调试中配置用户名

在调试中配置自动补全的用户名：
设置 > 扩展 > 自动补全插件配置

为了测试，将其配置为 demoJx：

测试结果：

8.打包

• 安装打包依赖

npm i -g vsce

• 打包前准备

1. 检查package.json文件是否配置 publisher 属性。
2. 检查package.json文件是否配置 repository 属性。
   
3. 修改 README.md 文件
   

• 执行打包命令

vsce package

打包成功后，会生成.vsix后缀安装包：

9.安装

扩展 > …（视图和更多操作） > 从 VSIX 安装
选中生成的.vsix后缀安装包安装后即可激活插件使用：

参考

VSCode插件开发全攻略（一）概览
Extension API

彩蛋

作者额外开发的vscode看热搜插件【weibo-hot-news】：
（可边 工(mo)作(yu) 边看 微博热搜 ）
安装：（扩展 > 搜索"微博" > 安装即可）

使用：