插件界的瑞士军刀,vs code已经无所不能!

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 => 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
             )
          }`
     );
 };

 

这样，当文件修改时，就会获得相应的提示，下面看一下演示效果，

工具

重头戏来了！

前面提到的那些功能仍是存在必定的门槛，对于喜欢尝试和挑战的同窗是不错的功能。可是，对于仅仅想体验它功能的同窗却显得枯燥乏味。

既然，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:P@ssword123!")

搜索表情

输入对应的关键字，powertools就能够返回相关emojis表情列表。

示例：

$emojis("heart")

除了本文介绍的应用、按钮、命令、事件、工具这些功能，powertools还能够用于执行定时做业、脚本、启动、用于定义动态设置的占位符，感兴趣的同窗能够摸索尝试一下这些功能。

结语

你们有什么要说的，欢迎在评论区留言

对了，小编为你们准备了一套2020最新的web前端资料，须要点击下方连接获取方式

一、点赞+评论（勾选“同时转发”）

学习前端，你掌握这些。二线也能轻松拿8K以上