vscode是我日常所使用的編輯器，包括在寫這篇文章的時候。在編輯markdown文檔的時候，總會遇到插入圖片的問題。所以我就想實現(xiàn)一個簡單的vscode插件，在運行時，可以將剪貼板里的圖片上傳到aws s3上之后把文件的url插入到vscode里。這樣在寫文章的時候就會提高效率。

準備工作

首先確認自己的環(huán)境有nodejs和npm，之后安裝

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

實現(xiàn)

首先運行,創(chuàng)建一個新的項目, 選擇typescript，之后回答幾個問題，就會新建一個項目。

yo code

這里的文件結(jié)構(gòu)如圖:

? 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.md3 directories, 10 files

src里是實際的代碼，package.json定義了包的信息。

在這里我們?yōu)榱撕唵?#xff0c;將實際上傳的邏輯寫在腳本里，這里要求在本機有可運行的aws cli。腳本如下，首先通過uuiden生成一個獨一無二的文件名，之后利用pngpaste 把mac的剪貼板的內(nèi)容導(dǎo)出到tmp文件夾里，之后上傳到自己的s3 folder里，同時輸出網(wǎng)址。將此文件放在根目錄下的新建的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 ;

在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 activatedconsole.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;// 調(diào)用js庫實現(xiàn)運行腳本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;}//將結(jié)果插入const selection = editor.selection;if (!selection) {return;}editor.edit((editBuilder: vscode.TextEditorEdit) => {let img = line;editBuilder.insert(selection.active, img);});}}}});context.subscriptions.push(disposable); }

代碼比較簡單。

調(diào)試

接下來就是調(diào)試，可以直接按f5，自動打開一個新的vscode測試環(huán)境，這時候打開command palette已經(jīng)可以看到自己的命令。

接下來可以調(diào)用，也可以在自己源代碼上斷點調(diào)試。

打包

覺得可以打包時，可以安裝vsce

npm install -g vsce

這時候先把package.json里添加"publisher": "xxxx",之后運行

vsce package

這時候就可以生成xxxxx-0.0.1.vsix,可以直接在自己本地vscode里安裝

小結(jié)

這就是我開發(fā)自己第一個vscode插件的經(jīng)驗，希望可以幫助到大家。vscode里還有很多有意思的東西等待著我們?nèi)グl(fā)掘。

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的editor 插入图片之后将光标放到右侧_通过vscode插件自动上传剪贴板图片至aws s3的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。