公衆號關注 “GitHubDaily”
設爲 “星標”，每天帶你逛 GitHub！
powertools 可以稱得上插件界的 瑞士軍刀。
相對於 VS Code 中大多數插件的出現爲了解決某一項弊端和不足，powertools 則聚合了很多強大且實用的功能，能夠增強 VS Code 的功能，並提升 VS Code 的使用體驗。
powertools 就如同之前使用 iOS 系統時使用過的一款軟件 Workflow，它相對於大多數插件功能更加豐富，但是門檻也更高一些。
也就是說，想要最大發揮這款插件的價值，僅憑默認的配置是不行的，還需要結合腳本使用。換句話說，需要自己會用 js 開發一些腳本，如同開發一款簡易版的 vs code 插件，來實現對應的功能。
下面，就來看介紹一下這款插件的基本使用和優點吧！
安裝
我相信，對於使用過 VS Code 的同學來說，安裝插件是一件再容易不過的事情。
安裝插件的方法主要有兩種：
方法 1：手動安裝
點擊左側的活動欄上的擴展圖標，然後搜索 powertools，點擊安裝即可。
方法 2：命令安裝
使用快捷鍵 Ctrl+P，輸入命令 ext install vscode-powertools，點擊 Enter 鍵就可以安裝插件。
如果上述兩種方式走不通，也可以訪問訪問網頁端插件市場 [1]，搜索對應的插件安裝即可。
powertools
既然能夠被稱爲瑞士軍刀，那麼它的功能自然就會非常豐富。
這款插件的功能大體可以分爲如下幾類：
應用
按鈕
命令
事件
工具
下面就分別來介紹一下。
應用
這裏所說的應用是基於 Node.js 的腳本，可通過 Web 視圖運行，並且還可以與 Visual Studio Code 實例進行交互。
創建應用只需要如下 3 步：
點擊按鍵
F1或者Ctrl+Shift+P選擇
Power Tools: Apps選擇
Create App ...
輸入對應應用的名稱就完成了一款應用的創建，然後再執行前面的 1~2 步，第 3 步選擇 Open App ... 就可以打開初始化的應用。
這對於很多使用 Vue 開發前端的同學能夠提供很大便利。
按鈕
在開發過程中，會有很多重複性的動作，例如，執行某個 Python 腳本、運行某個 shell 腳本。我們沒有必要再去打開終端進入對應的工程目錄，執行對應的任務或者 shell 腳本，通過添加 1 個 vs code 快捷按鈕就可以實現一項繁瑣且頻繁用到的功能。
使用按鈕功能，需要配置一下 vs code 的配置文件 settings.json,
{
"ego.power-tools": {
"buttons": [
{
"text": "Click me!",
"tooltip": "You run an awesome script by clicking that button!",
"action": {
"type": "script",
"script": "my_button.js"
}
}
]
}
}
在上述配置中可以看出，這個按鈕名稱爲 Click me!，它執行了一個腳本 my_button.js，然後來看一下這個 js 腳本的內容，
exports.execute = async (args) => {
// args => https://egodigital.github.io/vscode-powertools/api/interfaces/_contracts_.buttonactionscriptarguments.html
// s. https://code.visualstudio.com/api/references/vscode-api
const vscode = args.require('vscode');
vscode.window.showInformationMessage(
'Hey, you clicked me!'
);
};
這個腳本的功能就是彈出一個消息框，下面來看一下效果。
命令
爲了增強 VS Code 的功能，可以自定義一個命令，這樣的話就可以在 VS Code 任何位置都可以調用。
和按鈕一樣，需要首先配置一下 settings.json，
{
"ego.power-tools": {
"commands": {
"myCommand": {
"script": "my_command.js",
"button": {
"text": "Click here to start the command."
}
}
}
}
}
然後，創建一個 js 腳本，
exports.execute = async (args) => {
// args => https://egodigital.github.io/vscode-powertools/api/interfaces/_contracts_.workspacecommandscriptarguments.html
// s. https://code.visualstudio.com/api/references/vscode-api
const vscode = args.require('vscode');
vscode.window.showInformationMessage(
`Hello, from '${ args.command }'!`
);
};
下面來看一下效果，
詳細的函數列表可以使用命令 $help 查看，也可以訪問鏈接 [2] 瞭解一下。
事件
我覺得這是 powertools 這些功能中較爲實用的一項，通過配置 powertools，可以對我們在 vs code 中的一系列事件作出相應的反應。例如，當文件修改或者刪除時能夠提示到開發人員。
下面來看一下例子，
{
"ego.power-tools": {
"events": [
{
"type": "file.changed",
"files": [ "**/*.txt" ],
"exclude": [ "/test2.txt" ],
"action": {
"script": "my_event.js",
"type": "script"
}
}
]
}
}
然後是腳本 my_event.js，
exports.execute = async (args) => {
// args => https://egodigital.github.io/vscode-powertools/api/interfaces/_contracts_.filechangeeventactionscriptarguments.html
const path = require('path');
// s. https://code.visualstudio.com/api/references/vscode-api
const vscode = args.require('vscode');
vscode.window.showInformationMessage(
`The following file has changed: ${
path.relative(
__dirname + '/..',
args.file.fsPath
)
}`
);
};
這樣，當文件修改時，就會得到相應的提示，下面看一下演示效果，
工具
重頭戲來了！
前面提到的那些功能還是存在一定的門檻，對於喜歡嘗試和挑戰的同學是不錯的功能。但是，對於僅僅想體驗它功能的同學卻顯得枯燥乏味。
既然，powertools 能夠稱得上插件領域的瑞士軍刀，那麼它當然不能僅包含前面這些功能。
powertools 內置了很多豐富而且實用的函數和模塊，這些函數的使用方式分爲如下幾個步驟：
點擊按鍵
F1或者Ctrl+Shift+P選擇
Power Tools: Tools選擇
Code Execution ...
然後就可以輸入對應的函數即可。
powertools 支持哪些函數？
執行上述 1~3 步，然後輸入 $help，就可以列出 powertools 支持的函數列表。
因爲，powertools 支持的函數和模塊較多，無法一一介紹，所以就挑 3 個介紹一下。
計算器
執行前面 1~3 步，輸入需要計算的數學公式就可以彈出計算結果，
Base64 編碼
Base64 是網絡上最常見的用於傳輸 8Bit 字節碼的編碼方式之一，在數據的加解密中經常會用到。在 powertools 中能夠輕鬆的對字符串進行 Base64 編碼。
示例：
$base64("mkloubert:P@ssword123!")
搜索表情
輸入對應的關鍵字，powertools 就可以返回相關 emojis 表情列表。
示例：
$emojis("heart")
結語
除了本文介紹的應用、按鈕、命令、事件、工具這些功能，powertools 還可以用於執行定時作業、腳本、啓動、用於定義動態設置的佔位符，感興趣的同學可以摸索嘗試一下這些功能。
參考資料
[1]
網頁端插件市場: https://marketplace.visualstudio.com/vscode
[2]鏈接: https://github.com/egodigital/vscode-powertools/wiki/Tools
---
由 GitHubDaily 原班人馬打造的公衆號：GitCube，現已正式上線！
接下來我們將會在該公衆號上，爲大家分享優質的計算機學習資源與開發者工具，堅持每天一篇原創文章的輸出，感興趣的小夥伴可以關注一下哈！