How to use VSCode Task properly in your daily work

In this article you can learn how to run npm scripts quickly, run them directly in VSCode and use shortcuts. If you haven't used VSCode Task you can take a good look.

Why vsCode Task

All JavaScript projects I've worked on have a defined set of scripts that you can execute for an application. T ypically, these scripts are commands that can help you test, build, or deploy your code. M ost of the developers I work with run these commands on the command line of their choice. Either you have to memorize your project script, or your command line may have some typeahead functionality, or you'll scrape the history to find the command you've run in the past, as I've often done.

history | grep 'npm run'

Instead, you can use Tasks to run the script for you. You can first open the command panel Cmd + Shift + P and then select Tasks: Run Task

VSCode will provide you with the many task types it supports. C ontinue and select npm The editor will quickly scan your package.json and provide the tasks you define:

Choose one of your scripts and you're done! A new built-in terminal window is opened and you can see the output of your script and continue working from where you left off.

Well, that looks cool. B ut you might think, "Hey, my project isn't that simple, my task contains parameters, different options, maybe I need to open the subfolder first!" ”。

Of course, you can do the same!

Configure Tasks

Assuming you are running unit tests for a particular test file, your test command might look like this:

npm test 'my-component.js' --auto-watch --no-single-run

My usual workflow is as follows. I want to run my ongoing unit tests in watch mode. T ypically, you'll need to insert a file name into a test command, but VSCode can do it for you. T o achieve this, we can use some of the replacement variables that are provided to us. F or example: ${fileBasename} A complete list of available variables can be found here in the official documentation.

Now, open the command panel again, select Tasks: Run Tasks, and then select Tasks that are not configured. C onfigure the task...", and then select the task to configure. T his creates and opens a new file in the project: .vscode/tasks.json You can add this file to .gitignore or commit it, so your team can also use these tasks.

After you add a replacement variable, the configuration should look like this:

{
  "version": "2.0.0",
    "tasks": [
      {
        "type": "npm",
        "script": "test ${fileBasename} --auto-watch --no-single-run",
        "problemMatcher": [],
        "label": "npm: test opened file",
        "detail": "npm test"
      }
    ]
}

Then, in this way, your custom tasks can run in the command panel. Y our custom tasks are now in the list that you can run from Command Palette N ow open the test file you want to run, such as my-component-test.js R un Cmd + Shift + P-> "Tasks: 运行任务" and you should see the newly configured tasks: npm: test opened file S elect it and it should run npm test my-component-test.js --auto-watch --no-single-run in the terminal. Y ou can also customize how script results are displayed. I want to open a new terminal for this type of command. To do this, you only need to provide an additional "demo" configuration.

{
  ...
  "presentation": {
    "panel": "dedicated",
  }
}

Now you can see that multiple terminal windows are open and you can switch between them.

Configure Shell Tasks

VSCode also supports other Shell commands if you want to execute them. N ow we can use shell instead of the npm type. For example.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Run Cypress",
      "type": "shell",
      "command": "cd tests/e2e/cypress/ && npm run cypress",
    }
}

summary

Based on the example above, you can configure your custom development workflow in minutes and enjoy a fully integrated experience running scripts and viewing the results directly in the editor.

This article tells you how to use VSCode Task to improve your day-to-day work and hopefully helps. Students interested in JavaScript can take a look at the tutorial

JavaScript tutorial: https://www.w3cschool.cn/javascript/

JavaScript Microsyscope: https://www.w3cschool.cn/minicourse/play/jscourse

Source: www.toutiao.com/a6849220174004879884