他们为您
翻译了
Philip Korea的文章，内容涉及他如何为Atom和VS Code编辑器开发扩展。 项目不能称为复杂项目，但这是它们的优点：您可以立即了解创建自己的扩展需要做什么。
首次引入Atom编辑器时，我和许多Web开发人员一样感到非常高兴。 “哦，太酷了，一个基于我所知道的堆栈的可扩展编辑器，”我当时想。 并立即开始扩展编辑器以及数千名其他开发人员的功能。
顺便说一下，我与Atom合作的原因有两个。 首先，每周都有很大的扩展。 第二个-我知道堆栈，可以毫无问题地使用它，创建自己的扩展版本。
我们提醒您： 对于所有“哈勃”读者来说，使用“哈勃”促销代码注册任何Skillbox课程时均可享受10,000卢布的折扣。
Skillbox建议： 前端开发人员职业在线课程。
大光标扩展
当Atom出现时，我编写了Slim，Sass和CoffeeScript。 然后，我不知道其他方式来编辑缩进，除了最常用的方式-分别更改每个缩进。 有时很难确定块的完成，因此我决定更改光标的外观。 我想把它变成像尺子一样的东西，让您可以精确地测量所有东西。 这是一个例子：
为了了解如何执行此操作，我研究了Atom开发人员工具，选择了一个游标元素，然后使用CSS对其进行了更改。 因此，我设法得到了类似概念证明的东西-我意识到我的想法是可以实现的。
接下来，我再次研究了文档，以了解如何注册命令并将更改应用于光标类。 第一次迭代非常简单。
module.exports = activate: (state) -> atom.workspaceView.command 'big-cursor:toggle', @toggle toggle: ()-> atom.workspaceView.getActiveView() .find(".cursor").toggleClass("big-cursor") .big-cursor { top: 0 !important; height:100%; }
这是一个简单且有效的扩展。
他怎么了
没什么特别的，我什至在没有Atom 1.0版本的情况下也写了它，因此API后来发生了变化，但是我不再需要该扩展，并且我不再支持它。
VS代码
几年后，我决定改用VS Code。 为了方便起见，我使用了扩展名，该扩展名使您可以快速更改必要的参数，例如变量名。 但是我必须不断加入一个团队来进行这些更改。 而且我不想将它们绑定到键盘上的任何按钮，因此我开始考虑在ZSH Shell中使用别名的选项。
ZSH有许多插件，此外，您可以使用简短版本的命令来运行它们。 示例-可以使用gco完成git checkout插件的运行，并通过rs命令运行rails服务器插件。
实际上，对于像Change Case Snake Case这样的团队，我可以只输入所有单词的首字母，即使用ccsc缩写来运行所有这些单词。
为VS Code编写扩展因此，我开始探索创建扩展的可能性。 我已经对某些要点有点熟悉，因为我对Scry（Crystal的语言服务器）进行了添加，因此我研究了VS Code的Crystal扩展。
因此，它是使用Yeoman生成器创建的。 它看起来像这样：
Typescript扩展的基础非常方便。 您可以使用tsconfig配置所有内容（但是，这意味着Typescript文件经常会生成错误并且无法编译），但是您可以选择第二个选项tslint。
配置生成器后，您将拥有hello world扩展，其中添加了hello world logging命令。 该项目使用VS Code调试任务来使您能够运行启用了扩展名的VS Code实例。 如果需要的话，添加断点可以很容易地配置所有这些功能。 结果，您可以毫无问题地学习API。
为了创建所需的扩展，我需要了解以下几点：
- 如何创建用户可以使用的调色板框。
- 如何过滤选项板框以根据用户输入的简短版本显示命令。
- 如何获取所有可用的命令，以便在窗口中查找一些内容。
- 如何执行命令。
我必须深入研究文档才能获取所有数据。 API非常有限，这是一个问题。 但是我按计划做了。
1.调色板盒您不需要为此访问DOM或视图。 您可以在此处使用一组视图（其中一个是HTML面板）。 有一个关于调色板框的演示，所以我能够理解它们的全部工作原理。
2.过滤调色板框我必须在这里尝试，因为QuickPick API不会提供这样的机会。 但是他确实有一个事件，每次用户开始输入内容时都可以拦截，我只是更改了选项列表。 此选项效果很好。
let disposable = vscode.commands.registerCommand('short-commands.activatePalette', () => { let list = vscode.window.createQuickPick<CommandOption>(); list.placeholder = "Hello type some stuff"; list.onDidChangeValue((ee) => { if (ee.length === 0) { list.items = []; } else { list.items = options.filter((e) => e.short.startsWith(ee)) } }); });
3.获取可用命令列表在这里也有困难，您可以获取其他已安装扩展的列表。 对于每个人，您都需要访问其自己的package.json。
function parseExtensionCommands( extensions: Extension<any>[] ): CommandOption[] { let options: CommandOption[] = []; extensions.forEach(ext => { let { packageJSON: { contributes: { commands } = { commands: [] } } } = ext; if (commands) { commands.forEach((c: Command) => { options.push(new CommandOption(c)); }); } }); return options; }
4.命令执行嗯，这里的一切都很简单，我们转向API来调用所需的命令。
vscode.commands.executeCommand（list.activeItems [0] .command.command）
结论
实际上，这就是我为编辑所做的一切。 我的目标是展示如何开始开发自己的扩展。 这是我在工作中使用的清单，以及项目的来源：
Skillbox建议：