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

来源:https://www.cnblogs.com/coderhf/archive/2020/06/27/13198604.html

powertools可以稱得上插件界的瑞士軍刀。 相對於VS Code中大多數插件的出現為瞭解決某一項弊端和不足,powertools則聚合了很多強大且實用的功能,能夠增強VS Code的功能,並提升VS Code的使用體驗。 powertools就如同之前使用iOS系統時使用過的一款軟體Workf ...


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 ...就可以打開初始化的應用。

img

這對於很多使用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!'
     );
 };

 

這個腳本的功能就是彈出一個消息框,下麵來看一下效果。

img

命令

為了增強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 }'!`
     );
 };

 

下麵來看一下效果,

img

詳細的函數列表可以使用命令$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
             )
          }`
     );
 };

 

這樣,當文件修改時,就會得到相應的提示,下麵看一下演示效果,

img

工具

重頭戲來了!

前面提到的那些功能還是存在一定的門檻,對於喜歡嘗試和挑戰的同學是不錯的功能。但是,對於僅僅想體驗它功能的同學卻顯得枯燥乏味。

既然,powertools能夠稱得上插件領域的瑞士軍刀,那麼它當然不能僅包含前面這些功能。

powertools內置了很多豐富而且實用的函數模塊,這些函數的使用方式分為如下幾個步驟:

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

  2. 選擇Power Tools: Tools

  3. 選擇Code Execution ...

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

powertools支持哪些函數?

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

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

計算器

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

img

Base64編碼

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

示例

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

img

搜索表情

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

示例

$emojis("heart")

img

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

結語

大家有什麼要說的,歡迎在評論區留言

對了,小編為大家準備了一套2020最新的web前端資料,需要點擊下方鏈接獲取方式

1、點贊+評論(勾選“同時轉發”)

學習前端,你掌握這些。二線也能輕鬆拿8K以上


您的分享是我們最大的動力!

更多相關文章
  • 1、coalesce函數的用法 1.1 取出第一個不為空的列的數據。 ​ 1.2 coalesce函數裡面的數據類型,必須全部都跟第一列的數據類型一致。 ​ 原因為第一個參數為數值,第二個參數為字元串;可通過轉換數據類型來使用,如下圖: ​ ...
  • 函數參數:lpad( string, padded_length, [ pad_string ] ) 參數說明: string:源字元串; padded_length: 即最終結果返回的字元串的長度;如果最終返回的字元串的長度比源字元串的小,那麼此函數實際上對源串進行截取處理,與substr(str ...
  • 本博客SQL腳本地址:gitee 準備工作 已知有如下4張表: 學生表:student(學號,學生姓名,出生年月,性別) 成績表:score(學號,課程號,成績) 課程表:course(課程號,課程名稱,教師號) 教師表:teacher(教師號,教師姓名) 一、創建資料庫和表 為了演示題目的運行過程 ...
  • 1. 獲取中獎用戶ID,隨機彈出之後集合中就不存在了【set】 2. 存儲活動中中獎的用戶ID,保證同一個用戶不會中獎兩次【set】 3. 存儲粉絲列表,value 為粉絲的用戶ID,score 是關註時間【zset】 4. 存儲學生成績,value 為學生的ID,score 是考試成績【zset】... ...
  • 我們知道數據的存儲和檢索是兩個很重要的功能,當我們的數據量大了,怎麼能快速的檢索數據呢,答案是使用索引,可索引具體的技術實現有很多,選擇哪一種呢,我就以mysql為例記錄下它為什麼選擇了B+樹作為索引的實現方式。 1. 索引簡介 索引是一種用於快速查詢行的數據結構,就像一本書的目錄就是一個索引,如果 ...
  • 前言 本文將帶大家學習使用前端開發神器-charles,從基本的下載安裝到常見配置使用,為大家一一講解。 一、花式誇獎Charles 截取 Http 和 Https 網路封包。 支持重髮網絡請求,方便後端調試。 支持修改網路請求參數。 支持網路請求的截獲並動態修改。 支持模擬慢速網路。 好,騎上我心 ...
  • 一、堆和棧,數據的存儲方式 1.註意點: JS中是沒有堆和棧的概念,我們用堆和棧來講解,目的就是方柏霓講解,存儲方式是一致的。 2.存儲方式: 基礎數據類型進行值傳遞,複雜數據類型進行地址傳遞 <script> //1.基本數據類型 var str1 = "xiaoliao"; var str2 = ...
  • Web 創建設計 設計一個網站,需要認真思考和規劃。 最重要的是要知道你的訪問用戶。 用戶是瀏覽者 一個典型的訪問者將無法讀取您的網頁的全部內容! 無論您在網頁中發佈了多麼有用的信息,一個訪問者在決定是否繼續閱讀之前僅僅會花幾秒鐘的時間進行瀏覽。 請確保使你的觀點,在頁面的第一句!另外,您還需要在整 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...