五步完成一个 VSCode 扩展(插件)开发

第一步: 安装扩展生成器

npm install -g yo generator-code vsce

第二步: 初始化一个 Hello World 扩展

yo code

图来自 CN-VScode-Docs 网站

按提示, 输入扩展名, ID, 描述 等信息, 然后等待安装完成~

第三步: 测试一下扩展

  1. 打开 VS Code,选择"文件 > 打开文件夹",选择你刚刚生成的项目目录
  2. 直接按下 F5 或 切换到 VSCode 的调试面板, 点击 Debug 按钮,然后点击开始
  3. 新的 VS Code 实例会运行在一个特殊环境中 (Extension Development Host), 也就是会打开多一个 VSCode 窗口
  4. 按下 Shift + Ctrl + P (Mac OS ??P),输入命令 Hello world
  5. 右下角会提示一个 Hello World~ 恭喜!你的第一个 VS Code 插件成功了

图来自 CN-VScode-Docs 网站

第四步: 打个包发给别的同学玩下

vsce package             记得 修改 README.md 文件, 不然会提示没有准备好 README.md

执行此命令没有报错的情况下, 会生成一个 .vsix 的文件, 这个就可以发给别的同学体验了, 当然你还可以使用其他命令将扩展打包发布到微软 VSCode 市场~

第五步: 安装 扩展

在 VS Code 中 按下 Shift + Ctrl + P (Mac OS ??P),输入命令 Install from VSIX 选择本地的 .vsix 文件, 提示安装成功, 重新加载一次, 即可生效~

参考

https://www.bookstack.cn/read/CN-VScode-Docs/md-%E6%89%A9%E5%B1%95-%E8%8C%83%E4%BE%8B-%E8%B0%83%E8%AF%95%E5%99%A8.md

原文地址:https://www.cnblogs.com/linr/p/10348117.html

时间: 2024-10-14 00:53:23

五步完成一个 VSCode 扩展(插件)开发的相关文章

一个mui扩展插件mui.showLoading加载框【转】

转:http://ask.dcloud.net.cn/article/12856 写在前面:好像mui目前dialog系列唯独缺少showLoading加载框(加载中)组件,为了统一组件样式和体验,写了这么一个扩展插件.CSS和JS代码耦合性应该还是较低的,不妥之处欢迎指教!优点:可以同时兼容Html5和plus,不必为不同环境单独分别Loading组件.缺点:在页面嵌套情况下,遮罩仅对当前页面起作用. 使用方法:显示加载框: mui.showLoading("正在加载..",&quo

思达报表工具Style Report基础教程-五步创建一个报表

一.连接数据源1)建立数据源连接打开报表设计器  首先选择新建数据源,输入合适的数据源名称. 然后在数据源向导中填写有关JDBC URL和用户名等信息.  点击完成保存新建的数据源,点击测试连接按钮测试新建的数据源,如果信息填写正确则会出现测试成功的信息提示,这时就可以开始建立数据查询了.  2)建立查询新建一个查询并在界面中输入合适的SQL语句.  点击预览tab可以看到数据库中查询出来的数据,如果可以正常查询则可以开始制作报表. 二.新建报表数据源连接完成后,选择 文件菜单->新建->报表

五步搞定Android开发环境部署——非常详细的Android开发环境搭建教程

在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环境的搭建,文章写的尽量详细,希望对准备进入Android开发的朋友有帮助. 本教程将分为五个步骤来完成Android开发环境的部署. 第一步:安装JDK. 第二步:配置Windows上JDK的变量环境 . 第三步: 下载安装Eclipse . 第四步:下载安装Android SDK . 第五步:为Eclips

五步搞定Android开发环境部署

五个步骤来完成Android开发环境的部署.第一步:安装JDK.第二步:配置Windows上JDK的变量环境 .第三步: 下载安装Eclipse .第四步:下载安装Android SDK .第五步:为Eclipse安装ADT插件. 第一步:安装JDK 要下载Oracle公司的JDK可以百度"JDK"进入Oracle公司的JDK下载页面(当前下载页面地址为http://www.oracle.com/technetwork/java/javase/downloads/index.html)

安卓开发基础知识0(五步搞定Android开发环境部署——非常详细的Android开发环境搭建教程)

需求说明:安卓开发 内容       :安卓开发所需的环境搭建 来自       :时间的诗 原文:http://www.cnblogs.com/zoupeiyang/p/4034517.html 参考:http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html 引言 在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为

vscode同步设置&扩展插件

首先安装同步插件 第二部进入你的github如图:  打开设置选项: 新建一个token: 如图:  记住这个token值 转到vscode 按shift+alt +u  在弹出窗里输入你的token,然后等下会生成syncSummary.txt文件在窗口中打开这样就算成功了. syncSummary.txt这个文件里有个gist值或者到用户设置文件中查看gist的值,这个值用来你再另一台电脑上来下载你的设置 下载你的设置方法为:打开vscode--按alt+shift+d  在弹出窗里输入你的

产品开发阵容的重要性:APP开发只需五步

最早认识的一个朋友是程序员,曾经到一家外包公司接单子,小外包公司经常遇到的问题就是和需求方谈产品功能.客户要做外包,对方让他一次性报价,但是客户连功能点自己都不清楚,这时朋友说还是按照具体功能点来做吧.但是客户坚持先给个估价才会考虑做不做,最终朋友在不得已的情况下给了个价钱,结果遇到另外一个程序员只报了他一半的价格去做这个单子..... 可想而知,当开发成本和需求不匹配的情况下,项目失败是必然的! 这种情况在我们目前创业的项目程序员客栈屡见不鲜,其实目前全世界都是类似的这样外包不靠谱的情况.不过

15款web设计师和前端开发必备的Chrome扩展插件

Responsive Web Design Tester 方便快捷的测试响应式网站的小工具 Window Resizer 模拟不同屏幕分辨率的工具 Page Ruler 绘制页面的分割线,帮助来调整和控制页面中的元素 Dimensions 一个帮助设计师控制屏幕尺寸的工具 ColorZilla 提供了颜色选择器,渐变生成器及其其它高级功能的插件 WhatFon t 最简单的方式来识别页面的文字内容 TypeWonder 快速帮助你检测页面字体 CSS-Shack 一个web和桌面应用,允许你创建

大流量网站性能优化:一步一步打造一个适合自己的BigRender插件(转)

BigRender 当一个网站越来越庞大,加载速度越来越慢的时候,开发者们不得不对其进行优化,谁愿意访问一个需要等待 10 秒,20 秒才能出现的网页呢? 常见的也是相对简单易行的一个优化方案是 图片的延迟加载.一个庞大的页面,有时我们并不会滚动去看下面的内容,这样就浪费了非首屏部分的渲染,而这些无用的渲染,不仅包括图片,还包括其他的 DOM 元素,甚至一些 js/css(某些js/css 是根据模块请求的,比如一些 ajax),理论上,每增加一个 DOM,都会增加渲染的时间.有没有办法能使得