vscode插件开发实践与demo源码
vscode插件开发实践与demo源码
写在前面
工欲善其事必先利其器。vscode作为优秀的开发工具,给我的日常开发工作提供了极大的便利。其拓展机制更是如此。
但是,最近在做年度专业线任务时,有需要用到漂亮的行尾注释对齐,搜索后发现vscode官方插件市场没有我想要的。
于是便想着自己来开发这么个东西,一方面方便后边自己使用,一方面也能学习下vscode的插件开发、发布方法,另一方面要是发布后对其他人有所帮助就更好了。
本文主要内容
这篇文章是在我完成插件开发、发布后写的,记录下方法。
主要包含两个方面的内容:
- vscode插件开发、发布主要流程
- vscode插件demo源码参考https://github.com/gitshan/vscode-extension-comment-aligner
vscode插件开发、发布主要流程
- 插件开发前的准备:vscode、nodejs、vscode插件生产工具、git、微软账号
- 插件开发:插件构思、官方文档查阅
- 插件发布:打包、上传、插件市场操作
- 插件维护:更新迭代后打包、上传、插件市场操作
插件开发前的准备:
vscode、nodejs、git、微软账号,这个的准备无需多说。
vscode插件生产工具:官方推荐使用Yeoman 和 VS Code Extension Generator。用如下命令安装:
npm install -g yo generator-code
至此开发所需的准备已做好。
插件开发
使用生产工具初始化代码
执行如下指令
yo code
结果如下:
$ yo code_-----_ ╭──────────────────────────╮| | │ Welcome to the Visual │|--(o)--| │ Studio Code Extension │`---------´ │ generator! │( _´U`_ ) ╰──────────────────────────╯/___A___\ /| ~ |__'.___.'__´ ` |° ´ Y `? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)New Extension (JavaScript)New Color ThemeNew Language SupportNew Code SnippetsNew KeymapNew Extension Pack
(Move up and down to reveal more choices)
在os系统上通过上下键来选择要创建的类型,在win上输入1、2、3后按回车来选择。
其余步骤根据提示即可。得到如下结构目录结构:
├── .vscode // 资源配置文件
├── CHANGELOG.md // 更改记录文件,会展示到vscode插件市场
├── extension.js // 拓展源代码文件
├── jsconfig.json
├── package.json // 资源配置文件
├── README.md // 插件介绍文件,会展示到vscode插件市场
├── test // 测试文件
└── vsc-extension-quickstart.md
ps:其余项目类型的文档目录可能会有所差别,以生成的文件目录为准。在js拓展项目下,最重要的就是extension.js
和package.json
。
插件构思
灵感来源于生活、工作,这个想到了就可以去做。比如我这个行尾注释对齐(上面的目录注释就是用的我刚开发好的插件)。
关于comment-aligner的具体思路就不写在这里了,感兴趣的可以去下载源码看看,里边包含了完整的注释。逻辑十分简单。
查阅文档开发
这里不得不说一下官方文档不太好看,至少不是那么友好。传送门https://code.visualstudio.com/api/references/vscode-api。英文实在吃力的可以使用chrome的一键翻译,翻译的还算准确的。
对于基本的应用主要查看window
相关的就足够了,结合yo code
生成的基本代码可以实现简单的功能。
插件发布
安装打包、发布工具
npm install -g vsce
创建发布人
在插件市场官网创建发布人
完善package.json
package.json
中有vscode的自定义配置,在执行打包命令时vscode会自检,如果配置错误或者遗漏会有提示信息。
较完整的信息如下(下方是我发布的comment aligner的package.json文件):
{"name": "comment-aligner","displayName": "comment aligner","description": "A tool for aligning the inline trailing comment","version": "1.0.1","publisher": "huangbaoshan", // 发布人,在插件市场官网创建的发布人id"icon": "icon/icon.png", // 插件图标,用于在插件市场展示的icon;可以放到同级目录内,打包会带入"repository": {"type": "git","url":"https://github.com/gitshan/vscode-extension-comment-aligner.git"},"engines": {"vscode": "^1.30.0" // vscode版本号},"categories": ["Other" // vscode插件类别,会在插件市场的对应类别中展示],"activationEvents": ["onCommand:extension.commentaligner"],"main": "./extension.js","contributes": {"commands": [{"command": "extension.commentaligner", // 插件注册的类名"title": "Comment Aligner" // 插件在命令面包的展示名称}]},"scripts": {"postinstall": "node ./node_modules/vscode/bin/install","test": "node ./node_modules/vscode/bin/test"},"devDependencies": {"typescript": "^3.1.4","vscode": "^1.1.25","eslint": "^4.11.0","@types/node": "^8.10.25","@types/mocha": "^2.2.42"}
}
打包
执行如下命令:
vsce package
在根目录得到:comment-aligner-1.0.1.vsix
文件
发布
- 方法一:用vsce的
vsce publish
工具来发布,但是需要在官网配置Personal Access Token
较为繁琐。可参考官方教程 - 方法二:在官网直接上传发布
上传后点击确定即可发布成功。
发布检查
- 在插件市场官网看状态
- 在插件市场官网搜索
- 在vscode插件页搜索
以上均表示已发布成功。
插件维护
在发现bug和新功能开发完成后,需要更新插件,只需要将新生产的.vsix包上传到官网即可。
最后
希望有用,谢谢大家。
vscode插件开发实践与demo源码相关推荐
- winserver的consul部署实践与.net core客户端使用(附demo源码)
前言 随着微服务兴起,服务的管理显得极其重要.都知道微服务就是"拆",把臃肿的单块应用,拆分成多个轻量级的服务,每个服务可以在短周期内重构.迭代.交付.随着微服务的数量增多,因量变 ...
- Webrtc从理论到实践七: 官方demo源码走读(peerconnection_server)
系列文章目录 Webrtc从理论到实践一:初识 Webrtc从理论到实践二: 架构 Webrtc从理论到实践三: 角色 Webrtc从理论到实践四: 通信 Webrtc从理论到实践五: 编译webrt ...
- jQuery百叶窗效果原理(附3个demo源码)
jQuery百叶窗效果原理,附3个demo源码 一.前言 二.原理图解 三.在线演示及源码 一.前言 对于轮播图切换,其实可以有更多效果,其中一类型就是百叶窗.本人参考了网上一些特效,做一些练习和实践 ...
- Api demo源码学习(8)--App/Activity/QuickContactsDemo --获取系统联系人信息
本节通过Content Provider机制获取系统中的联系人信息,注意这个Anctivity直接继承的是ListActivity,所以不再需要setContentView函数来加载布局文件了(我自己 ...
- Api demo源码学习(4)--App/Activity/Dialog --Activity以Dialog形式呈现
这一节实际上比 Api demo源码学习(2)--App/Activity/Custom Dialog 自定义Activity样式 还要简单一些,在源码学习(2)里,也是让Activity以Dial ...
- C# Windows系统音量调节Demo源码
基于.NET Framework 4.0开发,包含滑块设置音量,键盘F1.F2调节音量. 通过滑块调节系统音量核心代码 /// <summary>/// 滑块设置音量/// </su ...
- GEF教程及demo源码
GEF教程及demo源码下载http://download.csdn.net/download/sidihuo/9695103 GEF教程及demo源码
- GreenDao的简单学习(附带demo源码)
先看效果图: 添加实体: 按条件查询实体: GreenDao 概述: 适用于Android的轻量级快速ORM框架,可将对象映射到SQLite数据库中,并且针对Andriod进行了高度的优化,g ...
- 【游戏开发实战】Unity循环复用列表,支持不规则尺寸(对象池 | UGUI | ScrollRect | Demo源码)
文章目录 一.前言 二.使用方法 1.创建Scroll View 2.设置Scroll View参数 2.1.调整宽高 2.2.删除Scrollbar滑块 2.3.设置item模板: Item Tem ...
最新文章
- WF4 Beta,RC版文章总结
- python在哪下载-python在哪里下载
- ibatis mysql 配置文件详解_MyBatis Generator 配置文件详解
- VTK:相互作用之InteractorStyleUser
- 为什么安装了Microsoft .NET Framework 4之后我的电脑网卡启动会变得很慢很慢。。...
- 工作148:父子组件传值 获取时间戳
- SpringBoot时间格式化的5种方法!
- android 组件化_你曾遇到的某大厂奇葩问题:Android组件化开发,组件间的Activity页面跳转...
- ASP.Net下使用ExtJS报“Ext未定义”错误的原因
- 【robot framework】GET/POST请求
- Rabbit MQ 安装
- CBV-2-CBV流程-view源码解析-面向对象-继承
- linux学习—— CentOS命令行版下创建KVM虚拟机(VM)并添加SR-IOV的虚拟网卡(VF)
- 机器学习十大常用算法
- SSDP,简单服务发现技术
- pack_padded_sequence;pad_packed_sequence
- 在《2000年通则》中,根据卖方承担义务的不同,将13种贸易术语划分为下列四组:...
- java导出word文档(office,wps均可)
- 浅谈数据库,数据仓库,数据中台
- iOS模拟各种网络状态测试