【初体验】vscode插件开发与打包（TypeScript）

2023-10-06 08:43:46

步骤

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": "您的名字"
				}
			}
		}
	},