经常在掘金公司团队发文章，而所在公司前端发文存在自己的固定格式，主要包含：,这些动作每次需要人为处理，费时费力且易出错，固化流程尝试改用 vscode 插件自动实现，遂有 edit-article 插件出现；,贴下相关链接，可以直接down下来看看，如有类似需求可以留言提需求我来完成。(也求 star),实现一款自己的 vscode 插件并发布在应用市场，所有人可以在 vscode 扩展中搜索并下载;由于文章目标是实现效果，所以不打算用自己实现的 edit-article 插件作为案例。,实战系列文章专注产出，看一个东西出现的满足感是会上瘾的，让我们抛弃文档式的学习，开始吧!,首先你需要的是 yeoman，一个脚手架工具。通过 yeoman 你可以快速创建代码模板，如下所示：,然后你需要安装 VS Code 的模板：,有了脚手架，你就可以创建一个 VS Code 的插件模板了。接下来运行：,请注意，第三个参数将是你新创建的插件的文件夹名字。,由上图，你可以看到有七个插件模板：,先实现最基础的New Extension (JavaScript)，即javascript版模板。,接下来，你会依次被提示输入插件的名字、介绍、想要用哪个账号发布、是否要打开 type check 以及是否要使用 git 等。你可以暂时按照我的样例进行输入，之后也可以再根据需要修改。,切换到项目根目录；,项目目录结构及对应信息；’,查看效果,启动默认项目，按下F5启动调试，如果打开了一个vscode新窗口，试试打开命令面板执行hello world，如果执行出现了弹窗，就说明我们创建 vscode 插件项目成功啦。,命令面板唤起快捷键,关于面板的更多信息可以阅读：你不知道的 vscode 之空间控制。,我们在之前已经知道了怎么用脚手架创建 vscode 插件项目，接下来就是实现我们自己的业务逻辑了。本章目标只有两个。,功能：实现命令【选中文字反转字符串】,优化：绑定快捷键,注意：建议在 launch.json 中的“args”中添加"--disable-extensions"，阻止其他插件加载，不然要调试的插件加载很慢。,我们先了解下【命令的注册】，先说流程,package.json 中注册命令和对应的描述,在package.json中存在contributes对象，有属性commands对应着命令数组，每个命令是一个对象有如下属性,配置如下：,配置完成!,前置总结,激活时机：activationEvents,我们的业务逻辑实现在项目根路径的extension.js文件中，默认导出两个钩子方法。,这里的激活时机并不是一打开 vscode 就执行，而是需要在package.json中存在一个属性activationEvents，值是一个数组，存储着所有会触发插件激活的时机;改为打开 js 文件时才会激活，配置如下：,业务逻辑实现,extension.js文件中还引入了一个vscode对象，这是 vscode 提供能力的载体，我们在后面单独分析。,这里的 active 函数实现的逻辑很清晰。首先，我们要读取的信息就是当前的文档信息和主光标的信息。,有了这两个信息，读取光标选中的内容就简单了。,document 一共哪些 API 这里我就不介绍了，相信你可以自己探索，这里我们使用就是 getText，以获取某段代码。,接下来就是将这段文本进行反转了，我们可以写一个非常简单的版本，将字符串分割成字母数组，然后反转，最后重新组合成字符串。,最后一步操作就是将原来编辑器内的文本进行替换了。此时我们就要用到 edit 这个 API 函数 了。值得注意的是，这个 API 的第一参数，是一个 callback，callback 的参数是 editBuilder，也就是真正用于修改代码的对象。,editBuilder 有以下几个 API：,这里我们要使用的当然就是 replace 了。,我们只需将原先的 selection 里的内容，替换成新的 result 即可。,完整代码如下：,至此，如何注册一个命令我们也就了解到了，当我们要实现其他功能，自然重点就成了vscode这个对象，在文末【扩展】模块分享。,支持我们完成了命令的设定、命令的实现，但每次都要自己找命令面板去执行;如果我们能用一个快捷键绑定命令，按下快捷键就执行，会不会方便很多?说干就干!,在package.json的contributes中还存在keybindings属性，就是用于实现绑定快捷键的，这是一个对象数组，存储的对象结构如下：,假定我们将反转命令绑定在ctrl+shift+r上，就可以添加如下内容：,终于，到了最激动人心的时刻!还记得第一次在浏览器上看到我们页面时的激动吗?再一次，让我们回到那个瞬间。按后文一步步走，遇到过按别人文章走结果遇问题卡一半的痛苦，所以详细(啰嗦)了点，大家多担待，无论如何，结果亲测有效！,Visual Studio Code 的应用市场基于微软自己的Azure DevOps;所以需要在两个平台都注册好账号。有账号后，根据 Azure DevOps 平台生成PAT(Personal Access Token，个人访问令牌);根据应用市场创建发布者账号，有了这两者就能发布了。,整理如下：,首先访问Microsoft 官网登录你的Microsoft账号，没有的先注册一个：,中间会要求输入邮箱，没有也可以直接通过手机号获取一个；,一路 next，直到创建成功。,然后访问：Azure 官网 ，如果你从来没有使用过 Azure，那么会看到如下提示：,点击继续，默认会创建一个以邮箱前缀为名的组织。(只需要填写验证码即可),默认进入组织的主页后，点击右上角的Security：,点击创建新的个人访问令牌，这里特别要注意,否则后面发布会失败。,创建令牌成功后你需要本地记下来，因为网站是不会帮你保存的。,访问应用市场，填完名称，滑到最后保存即可。,至此，我们就有了如下内容：,就可以执行在本地发布的动作啦!,进入自己的插件，如果没有，可以阅读【插件脚手架：如何创建一个插件】了解创建。,配置插件信息,在发布前，我们需要配置一些项目信息在 package.json 中，下面是必备信息,其他还有很多配置，我们慢慢了解，文末放置 package.json 配置总览。,安装命令包,利用发布工具发布插件,vsce是一个用于将插件发布到市场上的命令行工具。,请确认本机已经安装了Node.js，然后运行：,然后你就可以在命令行里直接使用vsce了。下面是一个快速发布的示例：,完成后过几分钟就可以去 vscode 的扩展区看自己的插件啦!,查看结果,一图胜千言，静静体会成就感的美妙吧!,至此，阅读本文的小伙伴应该已经在插件市场上可以找到自己的插件啦。,老规矩，分享一个感悟：重视你的、甚至是别人的每一个吐槽，尝试解决它，这就是成长。,预发布步骤,可以在清单文件中添加预发布步骤，下面的命令会在插件每次打包时执行：,上面的示例会在每次插件打包时调用 Typescript 编译器。,用 SemVer 语义标识符：major(最大位加一)，minor(次位加一)，patch(最小位加一)增量更新插件版本号。,例如，你想把插件从 1.0.0 更新到 1.1.0，那么加上minor：,插件package.json的 version 会先更新，然后才发布插件。,你也可以通过命令行指定版本号：,更多可用的命令参数，请使用vsce --help,既然是编辑器相关的命令，那么我们肯定需要能够访问到编辑器，以及其中的内容。首先我们要获取的就是：当前工作区内，用户正在使用的编辑器。,我们重点关注的也是这个对象。,有了这个编辑器，我们就能获取非常多的信息了。不过先别急，editor 这个变量并非一定总是有效的值，比如用户现在并没有打开任何文件，编辑器是空的，那么此时 editor 的值就是 undefined。所以， 在正式使用 editor 之前，我们要判断一下，editor 是否为 undefined，是的话就结束命令的运行。,接下来，我们可以输入 editor.，自动补全立刻给我们提示了不少的属性。,
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">