插件界的瑞士軍刀,VSCode 已經無所不能!

公衆號關注 “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 步:

  1. 點擊按鍵 F1 或者 Ctrl+Shift+P

  2. 選擇 Power Tools: Apps

  3. 選擇 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 內置了很多豐富而且實用的函數模塊,這些函數的使用方式分爲如下幾個步驟:

  1. 點擊按鍵 F1 或者 Ctrl+Shift+P

  2. 選擇 Power Tools: Tools

  3. 選擇 Code Execution ...

然後就可以輸入對應的函數即可。

powertools 支持哪些函數?

執行上述 1~3 步,然後輸入 $help,就可以列出 powertools 支持的函數列表。

因爲,powertools 支持的函數和模塊較多,無法一一介紹,所以就挑 3 個介紹一下。

計算器

執行前面 1~3 步,輸入需要計算的數學公式就可以彈出計算結果,

Base64 編碼

Base64 是網絡上最常見的用於傳輸 8Bit 字節碼的編碼方式之一,在數據的加解密中經常會用到。在 powertools 中能夠輕鬆的對字符串進行 Base64 編碼。

示例

$base64("mkloubert:[email protected]!")

搜索表情

輸入對應的關鍵字,powertools 就可以返回相關 emojis 表情列表。

示例

$emojis("heart")

結語

除了本文介紹的應用、按鈕、命令、事件、工具這些功能,powertools 還可以用於執行定時作業腳本啓動、用於定義動態設置的佔位符,感興趣的同學可以摸索嘗試一下這些功能。

參考資料

[1]

網頁端插件市場: https://marketplace.visualstudio.com/vscode

[2]

鏈接: https://github.com/egodigital/vscode-powertools/wiki/Tools

---

由 GitHubDaily 原班人馬打造的公衆號:GitCube,現已正式上線!
接下來我們將會在該公衆號上,爲大家分享優質的計算機學習資源與開發者工具,堅持每天一篇原創文章的輸出,感興趣的小夥伴可以關注一下哈!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章