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

時間 2020-06-28

標籤插件瑞士軍刀 code 已經無所不能简体版

原文原文鏈接

powertools能夠稱得上插件界的瑞士軍刀。html

相對於VS Code中大多數插件的出現爲了解決某一項弊端和不足，powertools則聚合了不少強大且實用的功能，可以加強VS Code的功能，並提高VS Code的使用體驗。前端

powertools就如同以前使用iOS系統時使用過的一款軟件Workflow，它相對於大多數插件功能更加豐富，可是門檻也更高一些。git

也就是說，想要最大發揮這款插件的價值，僅憑默認的配置是不行的，還須要結合腳本使用。換句話說，須要本身會用js開發一些腳本，如同開發一款簡易版的vs code插件，來實現對應的功能。github

下面，就來看介紹一下這款插件的基本使用和優勢吧！web

安裝

我相信，對於使用過VS Code的同窗來講，安裝插件是一件再容易不過的事情。shell

安裝插件的方法主要有兩種：json

方法1：手動安裝api

點擊左側的活動欄上的擴展圖標，而後搜索powertools，點擊安裝便可。網絡

方法2：命令安裝async

使用快捷鍵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 => http://egodigital.github.io/vscode-powertools/api/interfaces/_contracts_.buttonactionscriptarguments.html
 
     // s. http://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 => http://egodigital.github.io/vscode-powertools/api/interfaces/_contracts_.workspacecommandscriptarguments.html
 
     // s. http://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 => http://egodigital.github.io/vscode-powertools/api/interfaces/_contracts_.filechangeeventactionscriptarguments.html
 
     const path = require('path');
 
     // s. http://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
             )
          }`
     );
 };

這樣，當文件修改時，就會獲得相應的提示，下面看一下演示效果，