Visual Studio Code - tasks.json - 如何使用参数执行扩展？

Question

在 Windows 上使用 Visual Studio Code，系统详情如下：

Version: 1.63.0 (system setup)
Commit: 7db1a2b88f7557e0a43fec75b6ba7e50b3e9f77e
Date: 2021-12-07T06:26:56.179Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Windows_NT x64 10.0.19044

我非常喜欢根据文档设置和使用任务：Integrate with External Tools via Tasks

我设法设置了多个将 Typescript 转换为 Javascript 的任务，然后将 Javascript 文件（使用 powershell）复制到另一个目录。我还需要一个任务来缩小 Javascript——这就是我卡住的地方。

我已经安装了一个“缩小”扩展——但是如何执行扩展并使用tasks.json传递要缩小的文件？例如：

  {
     "label": "Minify Javascript",
     "command": "command:extensions.Minify",
     "args": [ "File", "${cwd}\\somefile.js"]
   },

以上内容仅用于说明目的——我正在寻找的是执行 Minify 扩展并将该扩展传递给它所需的参数所需的语法。

如果有人有使用 tasks.json 中的扩展的示例——请发布您的示例，因为我似乎在“官方”文档中找不到任何内容。

Answer 1

使用 shell 任务将一些文本回显到终端，但其中一个参数是 ${input} 变量

  "tasks": [
    {
      "label": "Minify Javascript",
      "type": "shell",
      "command": "echo Minify ${input:minify}"
    }
  ],
  "inputs": [
    {
      "id": "minify",
      "type": "command",
      "command": "command:extensions.Minify",
      "args": [ "File", "${cwd}\\somefile.js"]
    }
  ]

${input} 字符串不支持变量，AFAIK（也许在后来的 VSC 中他们支持）。许多扩展通过自己实现功能来支持变量。

---

编辑

原来命令es6-css-minify.minify不使用命令参数，它处理当前编辑器，解决方法是用命令加载所需的文件并运行minify。

为此，您需要 2 个扩展名：multi-command 和 HTML Related Links

  "tasks": [
    {
      "label": "Minify Javascript",
      "type": "shell",
      "command": "echo Minify ${input:minify}"
    }
  ],
  "inputs": [
    {
      "id": "minify",
      "type": "command",
      "command": "extension.multiCommand.execute",
      "args": {
         "interval": 500,
         "sequence": [
           {
              "command": "htmlRelatedLinks.openFile",
              "args": {
                 "file": "${workspaceFolder}/somefile.js"
              }
           },
           "es6-css-minify.minify"
         ]
      }
    }
  ]

Answer 2

感谢@rioV8 抽出宝贵时间。我相信你的回答会奏效，但是安装两个额外的扩展来运行扩展的想法感觉不对，所以我选择了一个更简单的解决方案，如下所示：

由于 Minify 使用 terser，我安装了 terser 用作命令行应用程序：，即：

npm install terser -g

然后我修改了我的tasks.json文件，如下：

{
   "version": "2.0.0",
   "tasks": [
      {
         "label": "task 1",
         ...
      },      
      {
         "label": "task 2",
         "command": "powershell",
         "args": [
            "-File", "${cwd}/minify_all.ps1"  
         ],
         "presentation": {
            "echo": true,
            "reveal": "always",
            "focus": true,
            "panel": "shared",
            "showReuseMessage": false,
            "clear": false
         }
      },
      {
         "label": "task 3",
         ...
      },
      {
         "label": "Build All",
         "type": "shell",
         "command": "Echo 'Build complete'",
         "dependsOrder": "sequence",
         "dependsOn": [
              "task 1",
              "task 2",
              "task 3"
         ],
         "presentation": {
            "echo": true,
            "reveal": "always",
            "focus": true,
            "panel": "shared",
            "showReuseMessage": false,
            "clear": false
         }
      }
   ]
}

“任务 2”中使用的 powershell 脚本 minify_all.ps1 调用 terser 来缩小文件，即：

#
# Minify all files ...
#

Write-Output ""
Write-Output "Minify some_file.js ..."

$in_file = "./test/js/some_file.js"

$out_file = "./test/js/some_file.min.js"

& terser $in_file --timings --output $out_file

$file_size = (Get-Item $in_file).length

Write-Output "- $in_file, size: $file_size"

$file_size = (Get-Item $out_file).length

Write-Output "- $out_file, size: $file_size"