“This is the 14th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

This article introduces the “VSCode task “, the system can let you say goodbye to the VSCode terminal, one by one input those have been memorized by your git/ NPM /shell commands.

To someone who doesn’t know it, it looks like you’re using magic!

How easy can it be to use tasks?

Background: Merge Request from main repository fork => personal repository is a github classic mode for code Merge Request. Daily: therefore, our staff often need to execute the following four commands in sequence or perform the following four operations in VSCode source control:

  1. $ git stash push -u -m xxx(Store current uncommitted content)
  2. $ git pull base --rebase(Get the code from the main warehouse to kira)
  3. $ git push origin --force(Push to personal warehouse)
  4. $ git stash pop(Pop up previously stored content)

Magic: Familiar with VS Code’s mission system, I only need two steps to perform the above:

  1. Press theA shortcut key.
  2. Even the pointDouble enter.

As follows:

Then VS Code did all four steps by itself!

Not only did this allow me to condense the time-consuming routine into less than two seconds, but it also allowed me to inadvertently show off my mysterious geeky behavior to my colleagues.

So? What exactly is the VS Code mission system? What can it do? How do we use it?

What is VS Code Task System?

The VS Code task system allows users to trigger the effects of running scripts or launching programs through a visual interface and hotkeys. Its behavior is defined by configuration.

# VS Code task keywords

  1. Goal:Run scripts and start programs;

    The ultimate goal of a mission system is to do what you want to doThe scriptorExecute a program. Using the example at the beginning of this article, executeThe git commandExecute the script.
  2. Trigger mode:Visual interface and hotkeys;

    You can use the shortcut keys to callThe task listSelect, or simply perform the task for which you set the hotkey.
  3. Definition method:configuration;

    The JSON format.

Start: Configure one of the simplestgit-fetchtask

  1. Create one in the project root directory.vscodeFolder and create one.vscode/tasks.jsonFile.

  1. Enter the following content in tasks.json:
{
  "version": "2.0.0"."tasks": [{// The task name
      "label": "git-fetch".// Task category, shell stands for script
      "type": "shell".// The task script can be YARN, NPM, git, etc
      "command": "git".// Command parameters
      "args": [
        "fetch"].// Declare no need to scan script output
      "problemMatcher": []}]}Copy the code
  1. Set hotkeys

Open: File – Preferences – Keyboard shortcut in VS Code, or press Ctrl, K, S at the same time. At this point your VS Code will enter the hotkey Settings page, in the search box to search the workbench. The action. The tasks. RunTask or task: run the task, select, and set a modular keyboard shortcuts are you used to.

For example, I set the shortcut key: Ctrl + Alt + R

  1. Call the task

Using the shortcut keys you just defined, such as Ctrl + Alt + R, you can see all the tasks in the list, including the content you just defined. Type git-fetch to display the task you just defined.

Rest assured, only the first time you need to enter a task name to search, it will recommend you recently used tasks.

Select the task and press Enter.



The VS Code terminal bar displays the above content, indicating that your task isSuccessful execution.

Two, start: configurationWith parametersSelect or enter a task

2.1 Select during task executionbranch

Above, we have successfully set up the simplest task that can be used to execute some redundant command lines, such as git pull base dev –rebase, but it lacks dynamic parameters and is not flexible enough to use scenarios. Git pull base dev –rebase for example, if your project has multiple branches and you need to use commands to switch between branches, “creating tasks for the dev and release branches separately” is a pretty stupid way to do it. At this point, it would be nice if we had a drop-down box to select a branch name… Hey! The VS Code task has just that. Modify your tasks.json as follows:

{
  "version": "2.0.0"."tasks": [{"label": "git-pull"."type": "shell"."command": "git"."args": [
        "pull"."base"."${input:branch}".Check in inputs for the id named branch
        "--rebase"]."group": "build"."problemMatcher":], []},"inputs": [{"id": "branch".// The id of the input parameter is the same as that of the branch variable ${input:branch}
      "type": "pickString"."options": [
        "dev"."release"]."description": "Please enter branch"}}],Copy the code

Execute the ‘git-pull’ task and you’ll see the following dialog box pop up at the top of VS Code:



Select the branch you want, for example:release



It worked!!

The mission system successfully performed the branch you expected it to pull. (Although this branch doesn’t exist)

2.2 Enter Parameters during task execution

Add the inputs in the above 2.1 example:

    {
      "type": "promptString"."id": "branchName"."description": "input your branch name"."default": "release"
    }
Copy the code

${input:branch} ${input:branchName} ${input:branch} Running tasks:

As you can see, the input field can take default values, and canManually enter to modify.

Press Enter,To continue the task.

Hands-on: Complex tasks, permutations and combinations of tasks to complete

While it does some simple task configuration, it can be very inconvenient when we need to complete a series of small tasks.

As the example at the beginning of this article, four stash push => pull => stash pop => push operations are completed successively.

Based on the previous steps, add two tasks to the Tasks section of the configuration file:

Tasks: [..., {"label": "git-push"."type": "shell"."command": "git"."args": [
        "pull"."origin"."${input:branchName}"./ / variable]."problemMatcher": []}, {"label": "git-pull-push"."type": "shell"."dependsOn": [ // Dependent tasks
          "git-pull"."git-push"]."dependsOrder": "sequence".// Indicates that the command is executed in sequence. If the command is not set, the command is executed in parallel
      "problemMatcher": []}Copy the code

After the configuration is complete, select Git-pull-push and execute the task. When entering the branch name, press Enter and use the default Release as the branch name.

In the console, git-pull and Git-push tasks have been executed in sequence.

More ability

For more details, please refer to the official website: official website address

conclusion

Through the above examples, we can get a glimpse of VS Code’s task system and feel the huge potential of VS Code’s customization. Let’s go ahead and configure your VS Code task configuration.