Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use VSCode Task to improve daily work, the article is very detailed, has a certain reference value, interested friends must read it!

All the JavaScript projects I've worked on have a set of defined scripts that you can execute for an application. Typically, these scripts are commands that can help you test, build, or deploy your code. Most of the developers I've worked 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, as I often do, search the history to find the command you ran in the past.

History | grep 'npm run'

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

VSCode will provide you with a variety of task types it supports. Continue 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 opens and you can see the output of your script and continue to work from where you left.

Okay, this looks cool. But you may think: "Hey, my project is not 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

Suppose you want to run a unit test for a specific 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 the unit test I'm doing in watch mode. Normally, you need to insert a file name into the test command, but VSCode can do it for you. To achieve this goal, we can use some of the replacement variables provided for us. For example: ${fileBasename}. A complete list of available variables can be found in the official documentation here.

Now, open the command panel again, select tasks: run tasks, and then select tasks that are not configured. Configure tasks. "then select the task you want to configure. This creates and opens a new file in the project: .vscode / tasks.json. You can add this file to .gitignore or submit 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 be run in the command panel. Your custom tasks are now in the list that you can run from Command Palette. Now open the test file you want to run, such as my-component-test.js. Run Cmd + Shift + P-> "Tasks: run tasks" and you should see the newly configured task: "npm: test opened file". Select it, and it should run npm test my-component-test.js-- auto-watch-- no-single-run in the terminal. You can also customize how the 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

If you want to execute other Shell commands, VSCode also supports it. Now 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",}} these are all the contents of the article "how to use VSCode Task to improve your daily work". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.