我制作了一个 Visual Studio Code 插件
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
我最近发现了remove.bg 这个项目。它非常棒，正如其名，它可以移除图片的背景。所以我决定为 VS Code 做一个插件，让我可以右键点击图片并移除背景。
最近我一直在 vscode 和 vim 之间来回切换，但 vscode 最吸引我的一点是它的插件是用 JavaScript 编写的。
我喜欢 JavaScript 以及整个 Web 技术栈的主要原因在于它的无所不在。即使你想编写 Sketch 插件、移动应用、后端、命令行界面或桌面应用，掌握 JavaScript 知识仍然至关重要。
好了，关于 JavaScript 就说到这里，让我们开始吧！
开始
首先，我需要创建一个项目。为此，我遵循了官方文档。可以使用Yeoman来搭建新项目的框架。我之前就了解过Yeoman ，所以当微软选择使用它来搭建项目框架时，我感到非常惊喜。
于是我决定做些研究。我知道remove.bg有一个 HTTP API 可以用，但更棒的是！已经有一个npm 包帮我搞定了这一切。
运行扩展程序
项目搭建完成后，我接下来要做的就是弄清楚如何运行它；这反而是最简单的一步。整个过程非常简单，只需切换到调试选项卡，然后点击运行即可。一个新的 VS Code 窗口打开，我的插件已经安装完毕，可以直接使用，真棒！
在 Visual Studio Code 中封装 NPM 包
我首先安装了 NPM 包。这与安装普通 Node 或 Web 项目的依赖项一样简单。
npm install remove.bg
首先，我知道这个 API 需要 API 密钥。所以如果能在 VS Code 设置中指定这个 API 密钥就太好了。通过在package.json文件中添加以下几行代码，名为“API 密钥”的设置项就被添加到了 VS Code 的设置菜单中（位于名为“移除背景”的部分下）：
{
"contributes": {
"configuration": [
{
"title": "Remove.bg configuration",
"properties": {
"remove-bg.apiKey": {
"type": "string",
"description": "The API key for remove.bg"
}
}
}
]
}
}
下一步是让菜单在右键单击文件时显示。遗憾的是，这方面的资料较少，但我经过一番尝试后找到了解决方案：
"contributes": {
...
"menus": {
"explorer/context": [
{
"command": "remove-bg.removeBg",
"when": "resourceExtname =~ /\\.png$|\\.jpg$|\\.jpeg$/",
"group": "navigation"
}
]
},
"commands": [
{
"command": "remove-bg.removeBg",
"title": "Remove background"
}
]
},
好的，这里的信息量很大，我们先从命令部分开始。命令部分告诉 VS Code，这个扩展程序会提供一个名为remove-bg.removeBg的命令；我们稍后会讲到这个命令是如何实现的，请耐心等待。
接下来是菜单部分。在这里，我们定义要向下拉菜单添加一个项目，该菜单会在用户右键单击资源管理器选项卡中的某个项目时显示。我们设置了一个条件，即只有当用户单击的文件扩展名与正则表达式匹配时，该菜单才应显示：
/\.png$|\.jpg$|\.jpeg$/;
基本上，任何被remove.bg支持的图片都可以。我们还指定此菜单项应触发我们在命令部分指定的命令。
让我们来编写一些 JavaScript 代码吧！
所以，当我说 VS Code 插件是用 JavaScript 编写的时，我并没有撒谎——不过，我决定使用TypeScript，而且 TypeScript 也是通常用于编写 VS Code 插件的语言。
在脚手架项目的 src 文件夹中，有一个名为extension.ts的文件。这是扩展程序加载后将要运行的文件。起初我知道我必须想办法获取用户在设置中指定的 API 密钥。
function loadApiKey(): string | undefined {
const config = vscode.workspace.getConfiguration('remove-bg');
return config.get('apiKey');
}
上面的函数尝试从设置中获取apiKey；如果未指定设置，则返回 undefined。
接下来，我决定在去除背景后不覆盖原文件，而是创建一个新文件。我决定在输出文件后添加后缀`-no-bg`，并为此添加了一个实用函数。这样，如果需要，我可以快速地将其更改为其他后缀/扩展名；该函数如下所示：
interface SuffixConfig {
path: string;
suffix: string;
extension: string;
}
export function addSuffix({ path, suffix, extension }: SuffixConfig): string {
const dots = path.split('.');
return `${dots.slice(0, -1).join('.')}${suffix}.${extension}`;
}
这里的问题在于对 0 到 -1 之间的切片操作。它的作用是返回一个新数组，其中原数组的最后一个元素被移除。在本例中，最后一个小数点后面的元素将被移除。
现在我有了最初的构建模块，就可以使用官方文档和npm 包将各个部分拼接起来。
这是extensions.ts文件中的最终代码：
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
const disposable = vscode.commands.registerCommand(
'remove-bg.removeBg',
async (uri: vscode.Uri) => {
const apiKey = loadApiKey();
if (!apiKey) {
vscode.window.showErrorMessage('No API key was set.');
return;
}
const sourceFile = uri.path;
const outFile = addSuffix({
path: sourceFile,
suffix: '-no-bg',
extension: 'png',
});
try {
await removeBackgroundFromImageFile({
path: sourceFile,
apiKey: apiKey,
outputFile: outFile,
size: 'regular',
type: 'auto',
});
vscode.window.showInformationMessage('Background remove successfully!');
} catch (e) {
vscode.window.showErrorMessage('Failed to remove background.');
}
},
);
context.subscriptions.push(disposable);
}
结语
插件在这里，插件代码在这里。我特意给remove.bg的开发者发了封邮件，询问是否可以使用他们的 logo。他们欣然同意，而且回复得非常迅速。
整个过程对我来说是一次很棒的学习经历，我经常会冒出一些新的 VS Code 插件的想法——如果一天能有更多的时间就好了。
我知道这篇文章可能算不上什么高深的教育性文章，但希望它能启发一些人为自己常用的工具开发插件。很多时候，像封装别人开发的工具这样简单的事情，只要能让工具更容易使用，就足够了。
我还要特别感谢remove.bg的工作人员，他们非常棒，允许我使用他们的徽标，并且抽出时间回复了我这个制作了 vscode 插件的瑞典陌生人。
文章来源：https://dev.to/antonholmberg/i-made-a-visual-studio-code-plugin-42k2