Daily Archives: 2020年9月20日

VSCode插件开发全攻略（十）打包、发布、升级

更多文章请戳VSCode插件开发全攻略系列目录导航。 发布方式 插件开发完了，如何发布出去分享给他人呢？主要有3种方法： 方法一：直接把文件夹发给别人，让别人找到vscode的插件存放目录并放进去，然后重启vscode，一般不推荐； 方法二：打包成vsix插件，然后发送给别人安装，如果你的插件涉及机密不方便发布到应用市场，可以尝试采用这种方式； 方法三：注册开发者账号，发布到官网应用市场，这个发布和npm一样是不需要审核的。 本地打包 无论是本地打包还是发布到应用市场都需要借助vsce这个工具。 安装：

打包成vsix文件：

打包的时候如果没有设置repository会有提示，所以最好设置一下。 生成好的vsix文件不能直接拖入安装，只能从扩展的右上角选择Install from VSIX安装： 发布应用市场 Visual Studio Code的应用市场基于微软自己的Azure DevOps，插件的身份验证、托管和管理都是在这里。 要发布到应用市场首先得有应用市场的publisher账号； 而要有发布账号首先得有Azure DevOps组织； 而创建组织之前，首先得创建Azure账号； 创建Azure账号首先得有Microsoft账号； 是不是有点晕，梳理一下： 一个Microsoft账号可以创建多个Azure组织； 一个组织可以创建多个publisher账号； 同时一个组织可以创建多个PAT（Personal Access Token，个人访问令牌）； 3.1. 注册账号 首先访问 https://login.live.com/ 登录你的Microsoft账号，没有的先注册一个： 然后访问： https://aka.ms/SignupAzureDevOps ，如果你从来没有使用过Azure，那么会看到如下提示： 点击继续，默认会创建一个以邮箱前缀为名的组织。 3.2. 创建令牌 默认进入组织的主页后，点击右上角的Security： 点击创建新的个人访问令牌，这里特别要注意Organization要选择all accessible organizations，Scopes要选择Full access，否则后面发布会失败。 创建令牌成功后你需要本地记下来，因为网站是不会帮你保存的。 3.3. 创建发布账号 获得个人访问令牌后，使用vsce以下命令创建新的发布者：

your-publisher-name必须是字母数字下划线，这是全网唯一的账号，然后会依次要求输入昵称、邮箱、令牌： 创建成功后会默认登录这个账号，接下来你可以直接发布了，当然，如果你是在其它地方创建的，可以试用vsce login your-publisher-name来登录。 除了用命令之外，你还可以使用网页版创建发布账号：https://marketplace.visualstudio.com/manage 3.4. 发布 发布很简单：

发布成功后大概需要过几分钟才能在应用市场搜到。过几分钟就可以访问网页版的插件主页：https://marketplace.visualstudio.com/items?itemName=sxei.vscode-plugin-demo vscode里面也能搜到了： 3.4.1. 发布注意事项 README.md文件默认会显示在插件主页； README.md中的资源必须全部是HTTPS的，如果是HTTP会发布失败； CHANGELOG.md会显示在变更选项卡； 如果代码是放在git仓库并且设置了repository字段，发布前必须先提交git，否则会提示Git working directory not clean； 另外，如前面所说，如果Organization没有选择all accessible organizations，或者Scopes没有选择Full access，发布的时候可能会报如下错误：

3.4.2. 增量发布 版本号：major.minor.patch 如果想让发布之后版本号的patch自增，例如：1.0.2 -> 1.0.3，可以这样：

执行这个命令后会自动修改package.json里面的版本号。同理，vsce publish minor也是可以的。 3.5. 取消发布

3.6. 更新 如果修改了插件代码想要重新发布，只需要修改版本号然后重新执行vsce publish即可。 插件升级 4.1. 发布到了应用市场 如果发布到了应用市场，那么一般来说会自动检测有没有新版本，有的话会自动无感知升级，但具体什么时候会去检测我还没有研究过，已经确定的是在扩展面板搜索插件名字会自动检测，重启vscode也会检测。 4.2. 如果是本地打包 如果是打包成vsix，那么只能自己实现升级检测功能呢，通过对比服务器上某个文件的版本号，具体我就不细讲了。   […]

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

文章索引 VSCode插件开发全攻略（一）概览 VSCode插件开发全攻略（二）HelloWord VSCode插件开发全攻略（三）package.json详解 VSCode插件开发全攻略（四）命令、菜单、快捷键 VSCode插件开发全攻略（五）跳转到定义、自动补全、悬停提示 VSCode插件开发全攻略（六）开发调试技巧 VSCode插件开发全攻略（七）WebView VSCode插件开发全攻略（八）代码片段、设置、自定义欢迎页 VSCode插件开发全攻略（九）常用API总结 VSCode插件开发全攻略（十）打包、发布、升级 本系列文章同步首发于多个平台，限于精力有限，后续如有更新和修改，仅更新我的个人博客上的内容，欢迎戳这里查看最新版：http://blog.haoji.me/vscode-plugin-overview.html 写在前面 一年前我写了一篇3万多字的Chrome插件(扩展)开发全攻略，反响还不错，帮助了很多新手快速上手，甚至包括大名鼎鼎的红芯浏览器（戳这里了解更多）。 最近因工作需要又接触到了vscode插件开发，所以趁势再写一篇有关vscode插件开发的文章，记录一些自己踩过的坑以及接触vscode插件开发这2个多月以来的心得体会，让大家少走一些弯路避免重复踩坑。 目前网上有关介绍vscode插件开发的文章也有挺多的，但都不够深入，基本上都是点到为止，篇幅不大，本系列文章争取多讲一些，涵盖面会更广，干货更多。 鉴于之前写过几篇内容较多的文章大家都反馈说阅读麻烦，一篇文章内容太多看起来太累，所以这次就拆分来写。 关于vscode插件 相信大家对vscode应该都不陌生，VSCode是微软出的一款轻量级代码编辑器，免费而且功能强大，以功能强大、提示友好、不错的性能和颜值俘获了大量开发者的青睐，对JavaScript和NodeJS的支持非常好，自带很多功能，例如代码格式化，代码智能提示补全、Emmet插件等。 再强大的IDE那也不可能面面俱到什么功能都塞进去，那样只会导致IDE本身太臃肿。功能嘛，按需索取，所以，vscode的很多强大功能都是基于插件实现的，IDE只提供一个最基本的框子和最基本功能，由插件来丰富和扩展它的功能。 vscode插件可以很轻松的在应用商店搜索并下载到，应用商店官网是：https://marketplace.visualstudio.com/vscode ，vscode推出时间本身并不长，但生态发展得非常好，应用商店已经有各种各样丰富的插件供大家使用了。 因为vscode本身都是用浏览器实现的，所以其插件不用说肯定也是基于HTML+JS等前端技术实现，从形式上看就是一个类似于npm包的vsix文件，只不过按照一些特殊规范来实现一些特殊功能，所以vscode插件开发难度不大，甚至可以说熟悉了相关API之后很容易。 有必要学习vscode插件开发吗 有！而且非常有必要！每个人都会多多少少有一些自己的特殊定制需求，当你不知道开发一个IDE插件其实也很容易、或者你没有意识到通过开发插件可以帮你提升多大效率时，你并不会下意识的将一些问题的解决方式往IDE插件开发上去想。至少我曾经就是这样的，提升开发效率大部分时候想到的都是写一些脚本工具、写一些浏览器插件、写一些客户端工具等，接触到IDE插件开发之后发现原来有些问题可以通过更高效的方式来解决，毕竟IDE才是我们程序员每天接触最多的东西。 但至于可以开发什么样的插件、实现什么样的功能、以什么样的形式呈现，这就要靠你从工作和生活中去发现、去找灵感并提炼了。 demo下载 本系列文章所有demo均在这个仓库里：https://github.com/sxei/vscode-plugin-demo ，可以直接下载运行。当然还有更简单的，这个demo已经发布到应用市场了，大家可以直接点击这里下载安装，或则您也可以直接在vscode里面搜索plugin-Demo就能搜到： vscode插件能做什么 既然前面讲到学习vscode插件开发很有必要，那插件到底能做什么呢？能实现什么功能？能从哪些方面动手脚？下面我们就来列举一些好让大家有个大概了解。 6.1. 不受限的本地磁盘访问 因为vscode是基于Electron开发的，可以使用nodejs随意读写本地文件、跨域请求、甚至创建一个本地server，这都是没有任何限制的，所以只要你想做，基本上没有不能实现的。 6.2. 自定义命令、快捷键、菜单 vscode插件很多功能都是基于一个个命令实现的，我们可以自定义一些命令，这个命令将出现在按下Ctrl+Shift+P后的命令列表里面，同时可以给命令配置快捷键、配置资源管理器菜单、编辑器菜单、标题菜单、下拉菜单、右上角图标等。 6.3. 自定义跳转、自动补全、悬浮提示 自定义跳转： 自动补全： 提示： 6.4. 自定义设置、自定义欢迎页 6.5. 自定义WebView 6.6. 自定义左侧功能面板 6.7. 自定义颜色、图标主题 6.8. 新增语言支持 给某一种原有没有的语言提供语言支持，语言支持包括很多方面，比如代码高亮、语法解析、折叠、跳转、补全等； 6.9. Markdown增强 你可以自定义markdown预览的样式、添加一些新语法、新功能的支持。 6.10. 其它 其它还有比如状态栏修改、通知提示、编辑器控制、git源代码控制、任务定义、Language Server、Debug Adapter等等。 收尾 本文作为开篇，不做太多详细介绍，只是为了让大家对vscode插件有一个大致了解，后面再分篇慢慢细讲。 参考资料 微软VSCode插件开发官方文档：https://code.visualstudio.com/docs/extensions/overview   from:https://www.cnblogs.com/liuxianan/p/vscode-plugin-overview.html

nginx http to https

if ($server_port !~ 443){ rewrite ^(/.*)$ https://$host$1 permanent; }