为何要开发设计这样一个 Vscode 插件?插件的效果?

无需加好友免费技术支持

为何要开发设计这样一个 Vscode 插件？插件的效果？表明插件的最后的结果？这儿先讲 插件的最后的结果：根据鼠标点击鼠标右键文件夹，在这里目录下，形成模板文件！

剩下来的几个问题个问题。

逐渐我们自己的冲关之途！

逐渐组装，键入命令，在这儿挑选 JavaScript，没选择 TypeScript

按 F5 形成新的 扩张寄主的高速发展 的 vscode 调节台

在新 vscode 开启调节台 命令控制面板

win： ctrl shift pmac： command shift p键入 Hello World

发觉我们自己的非常尴尬vscode版本非常低。。。。。。版本非常低。。。。版本非常低。。。版本非常低。。。版本非常低。版本非常低。版本非常低。版本非常低。

要是没有提醒，绕过下边 这一步！

假如你 vscode 并没有提醒，能够绕过这一步！

大家更新一下

发觉没法更新

实行下列二项命令，撤出并重新启动 vscode

留意 第二条命令 最终属于自己 vscode 部位

再度 点一下 检查更新，能够看见 已经更新下载

下边结果显示 已经更新下载

过一会后，这儿，它升级应当不能超过20min（我是用了一会，才知道免费下载好啦）

点一下后， vscode 将重启，撤出并重启。

能够看见 vscode 正在更新。

小插曲完成后，再次大家 vscode 插件开发设计。

从 F5 从部位逐渐，能够看见键入 hello world ，下边将告诫我们 Hello World，点一下它。

这儿很有可能有一个问题？ Hello World，你可以更改一个吗这也是没问题的，它理解是在文件夹中 package.json 文件中

以后我们能够换一个 title 名称，比如 myVscode

能够看见 已经没 Hello World，已经成为了 myVscode

再次点一下后实际操作能够看见在 扩张寄主的高速发展 之上也会得到结论 Hello World from Hello World!

为何这样的结果能够改动？的，它的存在是因为我们的文件放在里边 extension.js 本文件提醒。

大家可以试着修改内容，并获得新提示。注：如今每一个调节也是从 F5 结束之后，开启 扩张寄主的高速发展 的 vscode，打开 命令实行对话框，键入并实施 myVscode

大家可以看到新的改变，新提示。还可以变更弹出框，目前是 info 还可以改为弹出框 error 的弹出框

激话事情奉献点VS Code API在 package.json 和 extension.js 这二份文件相对应的详细介绍

name： 拓展名字的publisher：拓展出版公司名字. 这是你唯一的拓展 ID。大家现阶段的 package.json 要是没有这一字段名，大家可以直接加上这一字段名，然后公布 "publisher": "xxx", // 自已的专享id 复制代码activationEvents 激话事情contributes 奉献点engines.vscode 特定拓展所依靠的 VS Code API 启用最少版本 激话事情 activationEvents，进到 mian 相对应的 通道文件，寻找 activate 函数公式，随后启用 vscode 的申请注册命令 registerCommand 以后，函数调用内部结构方式。

留意 require("vscode") 是引进 "@types/vscode" 这个包。

改动 package.json 里的 奉献点

促使 我们自己的 myVscode 只存在于 在文件夹的鼠标右键菜单中，顶端表明。

再次调节，随后 扩张寄主的高速发展 的 vscode 开启一切文件夹，随后鼠标右键 可以看到 myVscode 并可以实行。

创建src文件目录，目录结构 如图所示

由于 有关插件没有安装，立即在这儿应用 Commonjs 形式进行src/template/index.jsconst myTemplate = ` ` module.exports = myTemplate 复制代码src/index.jsconst myTemplate = require("") const config = { myTemplate: myTemplate } module.exports = config 复制代码模板，这儿大家都能 自定 我们在这里重新回到个性化模板 extension.js 文件中

引进控制模块 node 的 fs 控制模块，大家自己写的 config 文件const fs = require("fs") const config = require("") 复制代码撰写插件编码。这儿表明编码。我放图片。自己写的编码不是太好。你能以自己的方式写，自己写更有利于了解

注：大家实行命令后： 会返回一个值，在这里我用 args，有关怎么查看 args 假如里面有一个具体内容， 跟 chrome 一样浏览器 控制面板就行。正好 vscode 里有！我们在这里开启！ vscode 调节控制面板

大家 在 扩张寄主的高速发展 的 vscode 在实施我们自己的命令后，大家可以看到我们打印 arg 参数是什么！并且我们自己的 文件也建立 出来！

到此 我们自己的插件早已 开发设计进行!

下一步，装包发版！

组装先安装 npm install -g vsce实行 vsce package 命令，得到一个 vsix 结尾的文件

公布全过程非常麻烦，请一起训练。

在这样一个平台上得到本人访问令牌。 Azure DevOps 登陆自身账户，随后建立机构，组织名称，随意逐渐！注：组织名称 不一定要和 出版公司名字的是一样的

挑选 本人访问令牌 后，点一下 New Token ，填好基本信息后，可获得 Token注：还记得拷贝 Token ！！！

建立上传者我们应该 建立上传者 ，填好自已的 Name 就可以

注：必须我们自己的 package.json 中加入 publisher 字段名

登陆储存本人访问令牌 vsce login ,下列将容许您键入刚复制键入 Token 信息内容

公布拓展终于等到了大家公布拓展，键入命令 vsce publish！难堪，寻找我们自己的 hello-world 被别人占那就只能改动 package.json 里的 name 字段名， 改为 hello-world二、再度公布！

这时，我们自己的发布页面早已存有查询公布结论 公布的新项目！ vscode 有我们自己的插件库 hello-world2

应用急不可耐 组装一手 自己写插件，随后用。单击右键您工程中的文件 实行 myVscode，大家建立的文件取得成功发生！

完结撒花

本次新项目 有关 手动式开发设计自已的 Vscode 插件。

为何要开发设计这样一个 Vscode 插件？一是 试着：对我而言，这是一件较为新的事，对于这个行业较为好奇心，勇于探索！二是 繁杂：在每一次工程中，都需要新创建一份文件，先拿一份。提高效率的自动化技术！插件的效果？提高自己的一些附加工作经验，摆脱许多看起来困难的事，其实只有认真学习，来解决！