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

準(zhǔn)備工作

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

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

實(shí)現(xiàn)

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

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里是實(shí)際的代碼，package.json定義了包的信息。

在這里我們?yōu)榱撕?jiǎn)單，將實(shí)際上傳的邏輯寫在腳本里，這里要求在本機(jī)有可運(yùn)行的aws cli。腳本如下，首先通過(guò)uuiden生成一個(gè)獨(dú)一無(wú)二的文件名，之后利用pngpaste 把mac的剪貼板的內(nèi)容導(dǎo)出到tmp文件夾里，之后上傳到自己的s3 folder里，同時(shí)輸出網(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!');// 注冊(cè)命令let disposable = vscode.commands.registerCommand('paste-to-s3.paste2s3', () => {vscode.window.showInformationMessage('正在上傳至s3');let editor = vscode.window.activeTextEditor;// 調(diào)用js庫(kù)實(shí)現(xiàn)運(yùn)行腳本const child_process = require("child_process");const free = child_process.spawnSync(__dirname + `/../res/run.sh`, { shell: true });//如果有錯(cuò)誤 輸出if (free.stderr !== null) {const message = free.stderr.toString();if(message.length > 0) {vscode.window.showInformationMessage("錯(cuò)誤(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); }

代碼比較簡(jiǎn)單。

調(diào)試

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

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

打包

覺得可以打包時(shí)，可以安裝vsce

npm install -g vsce

這時(shí)候先把package.json里添加"publisher": "xxxx",之后運(yùn)行

vsce package

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

小結(jié)

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

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

總結(jié)

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

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