Visual Studio Code - tasks.json - how to execute an extension with arguments?

user_1377587 0
Viewed 188

Using Visual Studio Code on Windows, system details below:

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

I am very green with regard to setting up and using tasks as per the documentation at: Integrate with External Tools via Tasks

I have managed to set-up multiple tasks that transpile Typescript to Javascript and then copy the Javascript files (using powershell) to another directory. I also need a task to Minify the Javascript -- that that is where I am stuck.

I have installed a "Minify" extension -- but how does one execute the extension and pass the file to be minified using tasks.json?, For example:

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

The above is shown only for illustration purposes only -- what I am looking for is the syntax required to execute the Minify extension and passing that extension the arguments it needs.

If anyone has an example of using an extension from within tasks.json -- please post your example as I cannot seem to find anything in the "official" documentation.

visual-studio-code build
2 Answers

Use a shell task to echo some text to the terminal but one of the arguments is an ${input} variable

  "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"]
    }
  ]

The ${input} strings don't support variables, AFAIK (maybe in later VSC they do). Many extension support variables by implementing the functionality themself.

Edit

Turns out that command es6-css-minify.minify does not use command arguments, it processes the current editor, Workaround is to load the required file with a command and run minify.

For this to work in a task you need 2 extensions: multi-command and 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"
         ]
      }
    }
  ]
user_99383170

Thanks to @rioV8 for your time. I am sure your answer would work, but the thought of installing two additional extensions to run a extension, just didn't feel right, so I opted for a somewhat simpler solution, as follows:

Since Minify uses terser, I installed terser for use as a command line app:, i.e.:

npm install terser -g

I then modified my tasks.json file, as follows:

{
   "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
         }
      }
   ]
}

The powershell script, minify_all.ps1 used in "task 2", invokes terser to minify files, i.e.:

#
# 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"
user_13775870
Related