背景我经常在掘金团队发文章，公司前端发帖有自己固定的格式，主要有：([\u4e00-\u9fa5]+)([\da-zA-Z]+)替换为$1$2：中英文必须有一个空格；([\da-zA-Z]+)([\u4e00-\u9fa5]+)换成$1$2:中文和英文英文必须有一个空格；!\[.+\]替换为![]：过程画面描述；在头部插入主题，内容如下：---theme:cyanosihighlight:atom-one-dark--->自我介绍每次都需要手动处理动作，费时费力，容易出错。尝试使用vscode插件自动实现固化过程，然后出现edit-article插件；贴出相关链接贴出相关链接，大家可以直接下载看看。如果你有类似的需求，可以留言让我完成。（还求star）github：https://github.com/Sympath/edit-article-pluginvscode市场：edit-article目前实现结果在扩展中搜索下载；由于文章的目标是实现效果，所以不打算使用自己实现的edit-article插件作为案例。思路：vscode插件是一个node应用，所以我们只需要找到对应的脚手架基础，然后实现我们插件的具体功能即可。本文demo插件的功能：快捷键反转选中的字符串。成就效果：实用系列文章，注重产出。看到某物出现的满足感会让人上瘾。让我们放弃基于文档的学习并开始吧！脚手架创建基本模板以供安装和使用。首先，您需要yeoman，一个脚手架工具。使用yeoman可以快速创建代码模板，如下：npminstall-gyo然后需要安装VSCode的模板：npminstall-ggenerator-code借助脚手架，可以创建VSCode的插件模板。下次运行：yocodemyextension请注意，第三个参数将是您新创建的插件的文件夹名称。VSCode插件脚手架介绍从上图可以看到有七个插件模板：前两个通过编程提供插件功能，可以选择TypeScript或者JavaScript，结果都差不多，因为TypeScript也需要在最后编译第三个是主题插件，可以把自己创建的主题分享给他人；第四是语言支持，即语法高亮、语言定义等；五是代码片段的分享；六是共享快捷键；七是多插件合并共享。首先实现最基本的NewExtension(JavaScript)，即javascript版的模板。接下来会提示依次输入插件的名称、介绍、要使用哪个账号发布、是否开启类型检查、是否使用git等。大家可以暂时按照我的示例输入，后面可以根据需要修改。项目基本信息介绍切换到项目根目录；cdmyextension项目目录结构及相应信息；'├──.vscode│├──launch.json//插件加载调试配置│└──tasks.json//配置TypeScript编译任务├──.gitignore//忽略构建输出和node_modules文件├──README.md//插件文档├──CHANGELOG.md//插件更新日志├──extension.ts//插件源代码├──package.json//插件配置列表├──jsconfig.json//查看效果启动默认项目，按F5开始调试，如果打开了一个新的vscode窗口，尝试打开命令面板执行helloworld，如果执行出现弹窗就说明我们创建成功了vscode插件项目。命令面板唤起快捷键mac:cmd+shift+pwin:ctrl+shift+p更多关于面板的内容可以阅读：你所不知道的vscode的空间控制。实现业务——反转字符串我们已经知道了如何用脚手架创建一个vscode插件项目，接下来就是实现我们自己的业务逻辑了。本章只有两个目标。功能：实现命令【选中文本反转字符串】将命令和对应的描述注册到package.json中；完成extension.js中命令的实现。优化：绑定快捷键注意：建议在launch.json的“args”中加上“--disable-extensions”，防止其他插件加载，否则要调试的插件加载会很慢。命令的注册：package.json我们先来了解一下【命令的注册】，我们先从package.json中注册命令的过程和相应的说明说起。在extension.js中执行命令。在package.json中注册命令，package中对应的描述.json中有一个contributes对象，属性commands对应command数组。每个命令都是一个对象，具有以下属性：command：命令的key，在命令的执行中会用到。title：命令的描述，会出现在命令面板配置如下："commands":[{"command":"edit-article.reserve","title":"Helloreserve"}],配置完成！命令的实现：extension.jspre-summary传入package.json配置activationEvents来定义插件的激活时机。项目根路径下的extension.js文件通过activehook注册命令和对应的实现。激活时机：activationEvents我们的业务逻辑在项目根路径下的extension.js文件中实现，默认导出两个hook方法。activate：插件激活时deactivate：插件关闭时module.exports={activate,deactivate,};这里的激活时机并不是一打开vscode就执行，而是需要在package.json中有一个属性activationEvents，值为一个数组，里面存放了所有会触发插件激活的时机；只有打开js文件才会激活，配置如下："activationEvents":["onLanguage:javascript"]，在业务逻辑实现extension.js文件中也引入了一个vscode对象，作为载体关于vscode提供的能力，我们后面会单独分析。constvscode=require("vscode");这里的active函数实现的逻辑非常清晰。首先，我们要读取的信息是当前文档信息和主光标的信息。让文档=editor.document；让选择=editor.selection；有了这两条信息，就很容易读懂光标选中的内容了。lettext=document.getText(选择);document中的API这里就不介绍了，相信大家可以自己摸索，这里我们使用getText来获取某段代码。下一步是反转此文本。我们可以写一个非常简单的版本，将字符串拆分成一个字母数组，反转它，最后重新组合成一个字符串。让result=text.split('').reverse().join('');最后一步是替换原始编辑器中的文本。此时我们将使用编辑API函数。值得注意的是，这个API的第一个参数是一个回调，回调的参数是editBuilder，也就是实际用来修改代码的对象。editBuilder有如下API：deleteinsertreplacesetEndOfLine当然我们这里要用到的是replace。editBuilder.replace（选择，结果）；我们只需要用新的结果替换原来选择中的内容即可。完整代码如下：on,result);});});context.subscriptions.push（保留）；}functiondeactivate(){}module.exports={activate,deactivate,};至此，如何注册命令我们也了解到，当我们要实现其他功能时，自然焦点就变成了vscode的对象，在文末【扩展】模块中分享。优化：绑定快捷键实现绑定支持我们完成命令设置和命令执行，但是每次都要找到命令面板执行；如果我们可以使用快捷键绑定命令，按快捷键执行会不会更方便？去做就对了！package.json的contributions中还有一个keybindings属性，用于实现绑定快捷键。这是一个对象数组，存储的对象结构如下：key:shortcutKeycommand:commandwhen:什么时候触发假设我们将反向命令绑定到ctrl+shift+r，我们可以添加如下内容："keybindings":[{"key":"ctrl+shift+r","command":"edit-article.reserve"}]实现效果发布插件终于，最激动人心的时刻到了！还记得您第一次在浏览器中看到我们的页面时的兴奋吗？让我们再次回到那一刻。跟着下面文章的步骤走，自己跟着别人的文章遇到了一半问题的痛苦，所以说得详细一点（啰嗦），还望大家多多包涵。不管怎样，亲测的结果是有效的！发布，先创建一个账号VisualStudioCode的应用市场是基于微软自己的AzureDevOps；所以你需要在两个平台上注册一个帐户。拥有账号后，生成基于AzureDevOps平台的PAT（PersonalAccessToken，个人访问令牌）；创建一个基于应用市场的发布者账户，你可以用这两个发布。安排如下：注册一个账号；根据AzureDevOps平台生成PAT（PersonalAccessToken，个人访问令牌）；根据应用市场创建发布者账户；根据vsce在本地发布。基于AzureDevOps平台生成令牌，用于登录微软。首先，访问微软官网登录你的微软账户。如果您没有，请先注册一个：系统会要求您输入您的电子邮件地址。登录Azure，访问：Azure官网，如果你没有用过Azure，会看到如下提示：点击继续，默认会创建一个以邮箱前缀命名的组织。（只需要填写验证码即可）创建token后默认进入机构主页，点击右上角的Security：点击新建个人访问token。这里要特别注意Organization要选择`allaccessibleorganizations````Scopes要选择Fullaccess否则后续发布会失败。token创建成功后，需要在本地记下，因为网站不会帮你保存。根据应用市场创建发布者账号进入应用市场，填写名称，滑到最后保存。至此，我们有以下内容：PAT:PersonalAccessToken,personalaccesstokenpublisher：发布者账号可以在本地执行发布的动作！根据vsce在本地发布，输入自己的插件，如果没有，可以阅读【插件脚手架：如何创建插件】学习创建。配置插件信息在发布之前，我们需要在package.json中配置一些项目信息，下面是publisher的必要信息：publisherid；activationEvents：扩展激活事件，建??议填写指定文件类型激活（如js文件，onLanguage:javascript）配置项可参见官网文档；repository：仓库地址。还有很多其他配置，我们慢慢了解，package.json配置概览放在文末。安装命令包使用发布工具发布插件vsce是一个用于向市场发布插件的命令行工具。请确认本机已经安装了Node.js，然后运行：npminstall-gvsce就可以在命令行直接使用vsce了。下面是一个快速发布的例子：登录vscelogin[publisherName]#然后输入之前获取的token执行发布（这里的patch是指自动更新版本后发布，没有它也是可以的，你必须手动修改package.json文件）。$vscepublishpatchPublishinguuid@0.0.1...成功发布uuid@0.0.1！几分钟后，就可以去vscode的扩展区看到自己的插件啦！检查结果。一图胜千言，静静地感受成就感，真好！到此为止，看到本文的小伙伴们应该已经在插件市场找到了自己的插件了。老规矩，分享一个感受：关注自己的每一次抱怨，甚至别人的抱怨，并努力去解决，这就是成长。知识扩展：package.json配置概览//package.json{"name":"vscode-demo","displayName":"vscode-demo","description":"","version":"0.0.1","repository":"",//仓库地址"publisher":"",//publisherid，如何发布到插件市场后面会讲"engines":{//vscode最低版本"vscode":"^1.57.0"},"categories":[//插件市场的类别可以设置为其他类型如语言主题"Other"],"activationEvents":[//扩展激活事件"onCommand:vscode-demo.helloWorld",//调用命令时激活"onLanguage:python",//调用py时激活插件"workspaceContains:**/.editorconfig",//调用py时激活"onDebug"folderisopened,//调试前激活..."*"//启动时激活，不用设置其他设置],"main":"./extension.js",//指定插件入口文件"icon":"",//pluginicon"contributes":{//大部分配置应该配置在这里"commands":[],//配置命令，如果需要暴露给用户，这里需要配置"menus":[],//配置菜单"submenus":[],//配置子菜单将使用"languages":[],//配置语言"grammars":[],//为语言配置TextMate语法"keybindings":[],//配置快捷键"snippets":[],//配置代码片段"themes“：[],//配置主题"views":[],//配置活动栏视图"viewsWelcome":[],//配置左侧视图欢迎页"viewsContainers":[],//配置视图容器"configuration":{},//配置插件配置"configurationDefaults":{},//配置插件默认配置"colors":{},"problemMatchers":{},"taskDefinitions":{},"typescriptServerPlugins":{}},}扩展知识：vscode发布相关的releasehook预发布步骤可以添加到manifest文件中。每次打包插件都会执行如下命令：{"name":"uuid","version":"0.0.1","publisher":"joaomoreno","engines":{"vscode":"0.10.x"},"scripts":{"vscode:prepublish":"tsc"}}上面的例子会在插件每次打包时调用Typescript编译器增量更新插件版本。使用SemVer语义标识符：major（最大数字加一）、minor（第二位加一）和patch（最小数字加一）增量更新插件版本号。比如你想把插件从1.0.0更新到1.1.0，那么添加minor:vscepublishminor会先更新插件package.json的版本，然后再发布插件。也可以通过命令行指定版本号：scepublish2.0.1更多可用的命令参数，请使用vsce--help扩展知识：vscode提供了获取编辑器对象的能力由于是编辑器相关的命令，我们绝对需要它访问编辑器及其内容。我们需要获取的第一件事是：用户在当前工作区中使用的编辑器。constvscode=require('vscode');让editor=vscode.window.activeTextEditor;我们也关注这个对象。通过这个编辑器，我们可以获得很多信息。但别担心，编辑器变量可能并不总是有一个有效值。比如用户没有打开任何文件，editor是空的，那么此时editor的值是undefined。所以，在正式使用编辑器之前，我们需要先判断一下编辑器是否是undefined，如果是，则结束命令。if(!editor){return;}接下来我们可以输入editor.，自动补全会立刻提示我们很多属性。Editor对象能力文档，即当前编辑器中文档的内容；edit，用于修改编辑器中的内容；revealRange，用于将某个代码滚动到当前窗口；selection，当前编辑器中的主光标；selections，当前编辑器中的所有光标，第一个光标为主光标，后面为用户创建的多光标；setDecorations，设置编辑器装饰器（我会在后面的章节介绍这个API的使用）。
