【初体验】vscode插件开发与打包(TypeScript)

目录

步骤

1.安装搭建脚手架插件(命令行执行)

npm install -g yo generator-code

2.搭建脚手架(命令行执行)

yo code

配置如下各选项:
【初体验】vscode插件开发与打包(TypeScript)

? 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" }

目录结构如下所示:
【初体验】vscode插件开发与打包(TypeScript)

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 左边的运行按钮即可打开 扩展开发宿主窗口:
【初体验】vscode插件开发与打包(TypeScript)
在自动弹起的宿主窗口中,新建一个文件(ctrl+n,无需保存),并修改右下角的语言模式,修改为JavaScript,在编辑区域输入 // 即可调试效果。
【初体验】vscode插件开发与打包(TypeScript)

7.在调试中配置用户名

在调试中配置自动补全的用户名:
设置 > 扩展 > 自动补全插件配置
【初体验】vscode插件开发与打包(TypeScript)
为了测试,将其配置为 demoJx:
【初体验】vscode插件开发与打包(TypeScript)
测试结果:
【初体验】vscode插件开发与打包(TypeScript)

8.打包

  • 安装打包依赖
npm i -g vsce
  • 打包前准备
  1. 检查package.json文件是否配置 publisher 属性。
  2. 检查package.json文件是否配置 repository 属性。
    【初体验】vscode插件开发与打包(TypeScript)
  3. 修改 README.md 文件
    【初体验】vscode插件开发与打包(TypeScript)
  • 执行打包命令
vsce package

打包成功后,会生成.vsix后缀安装包:
【初体验】vscode插件开发与打包(TypeScript)

9.安装

扩展 > …(视图和更多操作) > 从 VSIX 安装
选中生成的.vsix后缀安装包安装后即可激活插件使用:
【初体验】vscode插件开发与打包(TypeScript)

参考

VSCode插件开发全攻略(一)概览
Extension API

彩蛋

作者额外开发的vscode看热搜插件【weibo-hot-news】:
(可边 工(mo)作(yu) 边看 微博热搜 )
安装:(扩展 > 搜索"微博" > 安装即可)
【初体验】vscode插件开发与打包(TypeScript)
使用:
【初体验】vscode插件开发与打包(TypeScript)

上一篇:Flutter——Dart Extension扩展方法的使用


下一篇:PHP扩展memcache和memcached的区别