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

2020-12-21 11:01:08 阅读：328 来源： 互联网

标签：CommentProvider 插件 TypeScript 补全 extension vscode 配置初体验

步骤

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

打包前准备

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

执行打包命令

vsce package

打包成功后，会生成.vsix后缀安装包：
在这里插入图片描述

9.安装

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

参考

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

彩蛋

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

使用：

标签：CommentProvider,插件,TypeScript,补全,extension,vscode,配置,初体验
来源： https://blog.csdn.net/DemoJx/article/details/111365954

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9