vscode扩展插件的详细开发

时间：2021-08-24 来源：互联网编辑：宝哥软件园浏览：次

最近公司想用vscode作为开发工具，需要对vscode做一些定制功能，比如代码片段提示、内容提示、以及其他插件集成等。因此，它做了一些调查，做了一些开发和支持。

官方文件https://code.visualstudio.com/docs

以上是vscode提供的官方扩展开发帮助。按照上面的步骤，基本上可以做简单的演示示例

下面主要介绍我在开发中做过的几个简单的功能：

1.小片

感觉vscode的snippet功能真的很强大。只要编辑相应的json配置文件，就可以在文档编辑过程中找到各种提示。在vscode的市场上，也可以找到各种后缀格式的文件的配置。

片段配置非常简单，只需要配置相应的json文件

{/* //将C的代码片段放在这里。每个片段都在片段名称下定义，并有前缀、正文和//描述。前缀用于触发代码片段，主体将被展开和插入。可能的变量是：/$ 1，$2表示制表位，$0表示最终光标位置，${1:label}，$ { 2:another }表示占位符。连接了具有//相同id的占位符。//范例： '打印到控制台' : { '前缀' : '日志'，'正文' :[' console . log '($ 1 ')；'、“$ 2”]、“description”:“控制台的日志输出”} */}片段可以通过两种方式添加：

1.1通过vs code-preferences-用户代码段

这样，就相当于配置了自己的本地代码片段，只能在本地使用。

1.2通过开发代码片段的扩展

开发代码片段的扩展非常简单。要配置vscode扩展的工程结构，只需要配置自己的json文件或者添加从第三方获取的json文件。

contributes ' : { ' snippets ' :[{ ' language ' : ' CPP '，' path ' :/snippets/snippets.json'}]，}这样，插件打包发布后，就可以很方便地与朋友分享了。对于SN来说，

2.注册命令

在vscode的插件开发中，最基础的一个应该叫command，功能命令、右键菜单、菜单、键绑定等等都和command有关，所以在做这些功能之前，需要自己注册一个命令。

//当您的扩展被激活时调用此方法//您的扩展在命令第一次被执行时被激活。ExtensionContext) { //使用控制台输出诊断信息(console.log)和错误(console.error) //当您的扩展被激活时，这一行代码将只执行一次console.log('恭喜，您的扩展' demoCmd '现在处于活动状态！');//命令已经在package.json文件中定义//现在用registerCommand提供命令的实现commandId参数必须与package.json中的命令字段匹配let demo cmd=vs code.commands . registerCommand(' extension . demo cmd '，()={ //每次执行命令时都会执行您在此处放置的代码})；context . subscriptions . push(Democmd)；}//当你的扩展被停用时调用这个方法导出函数deactivate () {}这也是整个插件的入口。在上面的例子中，定义了一个extension.demoCmd的Cmd，上面提到的所有定制功能都需要通过这个cmd在package.json中进行配置。注意：以下命令和配置是package.json中的contributes属性

2.1登记令

注册命令及其名称。请注意，此处的命令必须与门代码中的cmd名称一致。

Commands' : [{'command' : '扩展名。democmd '，' title' :' democmd'}]，注册此命令后，可以通过vscode在F1的弹出窗口中输入命令，找到刚刚注册的cmd。

但是增加一个快捷键会不会更方便？

2.2命令添加按键绑定

键绑定' :[{ ' command ' : '扩展。democmd '，' key': 'ctrl shift a '，' mac': 'ctrl shift a '，' when': 'editorTextFocus' }]，此处注册一个ctrl shift a的快捷键调用我们注册的cmd，添加了以后，可以通过快捷键试试效果，是不是比在子一代中输入命令找到对应的煤矿管理局方便多了。

2.3命令添加菜单

注册了快捷键，是方便了，但是对于很多用户来说，有一个菜单按钮或者有一个右键菜单是不是更方便呢？

菜单： { ' editor/context ' :[{ ' when ' : ' resource langid==CPP '，' command ' : '扩展名。democmd '，' group': 'navigation' }]，' editor/title ' :[{ ' when ' : ' resource langid==CPP '，' command ' : '扩展名。democmd '，' group ' 3: ' navigation ' }]如上，提供了两种方式添加菜单、编辑器/上下文：鼠标右键菜单

编辑/标题：菜单栏按钮

2.4 setting.json配置提示

刚才说了小片文件内容提示，但是对于插件开发来说，很有可能需要用户配置一些本机的环境或者参数之类的变量，对于这个名称格式的提示也是很有必要的，省的用户配置错误。

配置' : { ' type ' : ' object '，' title ' : ' demoCmd配置'，' properties ' : { ' demoCmd。编码' : { ' type ' : ' string '，' default': 'utf-8 '，' description ' : '默认文件编码' } }，配置了这个，在文件-首选项-设置的编辑页面中，就会提示我们刚才配置的属性。此处对于类型，默认值，类型校验都很有作用，可以方便用户配置参数并且减少输入错误率。

3.一些高阶用法

在2.注册命令中的使活动中我们除了注册命令还可以注册一些其他的事件。

如下给一个CompletionItemProvider的例子

3.1 CompletionItemProvider

开发工具除了最基础的小片提示，还有另外一种通过CompletionItemProvider实现的提示功能。

//当您的扩展被激活时调用此方法//您的扩展在命令第一次被执行时被激活扩展上下文){ let DemoProvider=new DemoProvider()；让cppPv=vs代码。语言。registercompletionimprovider(' CPP '，DemoProvider)；语境。订阅。推送(CPppv)；}//当您的扩展为停用索引端口函数停用(){ }导出类demoProvider实现开发工具时，调用此方法CompletionItemProvider { public provideCompletionItems(文档： vs代码.文本文档，位置： vscode .位置，令牌： vscode .cancelationtoken): vs代码.CompletionItem[]{ var CompletionItem=[]；var completionItem=新vscode .CompletionItem(' AAA ')；completionItem.kind=vscode .CompletionItemKind。代码段；completionitem . detail=' aaacompletionitem。筛选器文本=' bbbbcompletionitem。插入TExT=新vs代码.SnippetString(' AAAA $ 1 bbbb $ 2 CCC ')；completionitems。push(completionItem)；返回completionItems}公共解析completionitem(项目： vs代码.CompletionItem，token: vscode .cancelationtoken):任何{返回项目} dispose(){ } }类似的还有代码操作提供程序、悬停提供程序、代码链接提供程序等。

3.2插入片段

在开发工具的新版本中，提供了一个插入片段方法，用于插入小片类型格式内容，通过这种方法插入的可以使用小片的格式，例如$1这种标签跳转等。

private editSnippet(text : string){ let editor=vs code . window . activetexteditor；让选择： vscode。Selection=editor.selection让insertPosition=new vscode。位置(selection.active.line，0)；editor.insertSnippet(新vscode。SnippetString(文本)，insertPosition)；}请注意，此功能可能不存在于较低版本的vscode中。

3.3输出通道

OutputChannel主要用于将输出信息打印到vscode的输出控制台。

放出：vscode。output channel=vs code . window . createoutput channel(' iauto 3 RunScript ')；out . show()；out . appendline(' deom ')；还有状态栏、终端、文本编辑器、装饰类型等等。

4.打包并发布

这是指官方发布方式，再次提醒我，如果是公司内部开发，有些东西是不能提交发布的，可以考虑只打包本地安装

vsce包自身打包后，发布打包的*。vsix内部网，可以由VSIX的同事安装

总结：

随着web的发展，vscode的应用范围也在不断扩大。从extensions市场可以发现，各种功能的插件基本齐全，尤其是snippet、cpp、ruby、react、angular等。相当完整，通过各种提示和验证，可以大大提高代码编码速度，提高代码质量。