Automate your workflow with VSCode Tasks

I have a set of defined scripts for all my projects that you can execute for an application. These scripts usually include commands to lint, test, build, or deploy your code. You can either remember your project scripts in your memory, or your command line may have some typeahead feature, or you can just scrap the history to find that command you ran in the past like I always did. But in VSCode, there is a feature that help you avoid doing these things over and over again : Tasks.

With VSCode Tasks, you can configure pre-defined shortcut to run scripts and start processes, therefore executing external tools from within the code editor without having to enter a command line or write new code.

Example usage of VSCode Tasks

Tasks are very flexible and can automate most of the grunt work out of your hands. I do most of my work in Python, so for example, I have tasks configured for:

  • Starting Django server
  • Open up a virtual environment shell
  • Run all unit tests available
  • Generating a test coverage report & opening report in a web browser
  • Update all my third party dependencies with pipenv
  • Entering PostgreSQL shell
  • Commit and push the current changes
  • So many other things that I can't remember...

Auto task with JavaScript

Currently, VSCode can automatically detect and create tasks if you're using either npm, Grunt, Gulp or Jake. Maven and C# support is currently underway.

First, launch the Command Palette (using Ctrl + Shift + P) or access View > Command Palette if that is more convenient for you. Then, type Tasks, select Tasks: Run Task from the drop-down menu. From there, you can start running repetitive work such as npm build or gulp compile.

If you see too many options and wants to manually disable some of the auto-detected tasks, below are the settings for each tool.

{ "typescript.tsc.autoDetect": "off", "grunt.autoDetect": "off", "jake.autoDetect": "off", "gulp.autoDetect": "off", "npm.autoDetect": "off" }
Code language: JSON / JSON with Comments (json)

tasks.json file

VSCode stores workspace specific settings and configurations in a .vscode directory. VSCode tasks settings will be placed in a tasks.json file inside that directory. If VSCode has detected a system that it can auto generate tasks, or you've configured one, you would see a tasks.json file inside .vscode directory.

Create tasks manually

Let's suppose you have a which does a few things and every time you modify your code, you would have to run it in order to set up your environment correctly. In this case, you would have to configure a custom VSCode Task yourself.

In order to do that, launch the Command Palette (using Ctrl + Shift + P) and run Configure Tasks from the global Terminal menu and select the Create tasks.json file from template entry. You would see several options.

If you don't see the list above, you may already have a tasks.json file in your folder and it will be opened automatically in the editor.

Since we're creating a custom task, select Others from the drop-down menu. tasks.json file would be opened with boilerplate config pre-defined for you. The end result for running may look like below.

{ // See // for the documentation about the tasks.json format "version": "2.0.0", "tasks": [ { "label": "Run", "type": "shell", "command": "./automation/", "windows": { "command": ".\\automation\\script.cmd" }, "group": "script", "presentation": { "reveal": "always", "panel": "new" } } ] }
Code language: JSON / JSON with Comments (json)

Please note that in the config above, we have a windows section that points to the Windows version of the script (ended with .cmd extension). All the script is placed in automation subdirectory, inside the current project directory.

The article demonstrate basic steps to get started with VSCode Tasks and get to know how tasks.json file works. If you're interested in more advanced usage of Tasks, such as problem matchers, variable substitution, task output encoding, background tasks, etc., visit VSCode documentation page on Tasks for more details.

We hope that the information above is useful to you. If you're interested in more advanced editing features of VSCode, check out our post on how to enable/disable word wrap in VSCode, How to use LaTeX in VSCode or how to automatically indent your code in Visual Studio Code.

Click to rate this post!
[Total: 1 Average: 5]

Leave a Comment