vscode是我日常所使用的编辑器，包括在写这篇文章的时候。在编辑markdown文档的时候，总会遇到插入图片的问题。所以我就想实现一个简单的vscode插件，在运行时，可以将剪贴板里的图片上传到aws s3上之后把文件的url插入到vscode里。这样在写文章的时候就会提高效率。

准备工作

首先确认自己的环境有nodejs和npm，之后安装

  • yeoman
    • npm install -g yo
  • generator-code
    • npm install -g generator-code

实现

首先运行,创建一个新的项目, 选择typescript，之后回答几个问题，就会新建一个项目。

yo code

这里的文件结构如图:

➜  paste-to-s3 git:(master) ✗ tree -I node_modules
.
├── CHANGELOG.md
├── README.md
├── package-lock.json
├── package.json
├── src
│   ├── extension.ts
│   └── test
│       ├── runTest.ts
│       └── suite
│           ├── extension.test.ts
│           └── index.ts
├── tsconfig.json
└── vsc-extension-quickstart.md

3 directories, 10 files

src里是实际的代码，package.json定义了包的信息。

在这里我们为了简单，将实际上传的逻辑写在脚本里，这里要求在本机有可运行的aws cli。脚本如下，首先通过uuiden生成一个独一无二的文件名，之后利用pngpaste 把mac的剪贴板的内容导出到tmp文件夹里，之后上传到自己的s3 folder里，同时输出网址。将此文件放在根目录下的新建的res folder。

NAME="$(uuidgen | tr -d - | tr -d '\n' | tr '[:upper:]' '[:lower:]')"
pngpaste "/tmp/${NAME}.png"
aws s3 cp "/tmp/${NAME}.png" s3://xxx/yyy/ --acl public-read 
rm "/tmp/${NAME}.png"
echo \!\[\]\(https://xxx.s3.amazonaws.com/yyy/$NAME.png\);

在extension.ts里可以写如下的代码

export function activate(context: vscode.ExtensionContext) {

    // Use the console to output diagnostic information (console.log) and errors (console.error)
    // This line of code will only be executed once when your extension is activated
    console.log('Congratulations, your extension "paste-to-s3" is now active!');
    // 注册命令
    let disposable = vscode.commands.registerCommand('paste-to-s3.paste2s3', () => {
        vscode.window.showInformationMessage('正在上传至s3');
        let editor = vscode.window.activeTextEditor;
        // 调用js库实现运行脚本
        const child_process = require("child_process");
        const free = child_process.spawnSync(__dirname + `/../res/run.sh`, { shell: true });

        //如果有错误 输出
        if (free.stderr !== null) {
            const message = free.stderr.toString();
            if(message.length > 0) {
                vscode.window.showInformationMessage("错误(error): " + message);
            }
        }
        //读取输出
        if (free.stdout !== null) {
            const message = free.stdout.toString();
            const lines = message.split("\n");

            for (var line of lines) {
                if (line.includes("tczimg.s3.amazonaws.com")) {
                    vscode.window.showInformationMessage('已上传至s3...（Uploaded to s3...）');
                    if (!editor) {
                        return;
                    }
                    //将结果插入
                    const selection = editor.selection;
                    if (!selection) {
                        return;
                    }
                    editor.edit((editBuilder: vscode.TextEditorEdit) => {
                        let img = line;
                        editBuilder.insert(selection.active, img);

                    });
                }
            }
        }

    });
    context.subscriptions.push(disposable);
}

代码比较简单。

调试

接下来就是调试，可以直接按f5，自动打开一个新的vscode测试环境，这时候打开command palette已经可以看到自己的命令。

接下来可以调用，也可以在自己源代码上断点调试。

打包

觉得可以打包时，可以安装vsce

npm install -g vsce

这时候先把package.json里添加"publisher": "xxxx",之后运行

vsce package

这时候就可以生成xxxxx-0.0.1.vsix,可以直接在自己本地vscode里安装

小结

这就是我开发自己第一个vscode插件的经验，希望可以帮助到大家。vscode里还有很多有意思的东西等待着我们去发掘。