Script as a Task using VS Code IDE
Tags: automation, vscode, bash, productivity
Published: 2021-06-26 07:21:26

---
canonical_url: https://www.ravsam.in/blog/script-as-a-task-using-vs-code-ide/
date: 2021-06-25 06:42:13 UTC
published: true
tags: automation,vscode,bash,productivity
title: Script as a Task using VS Code IDE
---

#### Convert NPM, Bash scripts to VS Code tasks and run them from anywhere.

VS Code comes with a great feature of specifying _tasks_ and running them through **Command Palette**. There can be a variety of scripts that we need to run while developing our applications. For example, before releasing a new build, there are a lot of things that need to be done by the release team. Some of them include bumping release version, creating release notes, generating changelog and the list goes on.

In this tutorial, we will learn how to use VS Code Tasks by taking the example of pre-release commands and ensure that no step is missed along the way.

#### Contents

- Prerequisites
- 1. Writing Pre Release Script
- 2. Setting Tasks
- 3. Running Tasks
- Conclusion

#### Prerequisites

- A Local Git Repository
- VS Code Editor
- Linux Environment

#### 1. Writing Pre Release Script

The first thing we need to do is to create a script — in this case, a _bash_ script. In this script, we will define what steps we need to perform as a part of our pre-release operation.

Let us assume that before releasing, we do two operations. First, we create a .version file and add today’s date to it. Then we create an empty commit with a message - _do-production-release_.

With the steps determined, let us create a pre-release.sh in .vscode directory and add the following code:

```bash
#!/bin/sh

date > .version
git commit --allow-empty -m "do-production-release"
```

We can test run the above script by doing:

```bash
bash .vscode/pre-release.sh
```

> Make sure to give proper permissions to the script before running it.

#### 2. Setting Tasks

Now comes the most interesting part of the tutorial. VS Code allows us to specify tasks in tasks.json. The beauty of the VS Code tasks is that we can run them directly from VS Code Command Palette which is especially helpful for non-technical members of our team.

Let us create a tasks.json file in .vscode directory and add the following contents in the file:

```json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Pre-Release Setup",
            "type": "shell",
            "command": "bash",
            "args": ["${workspaceFolder}/.vscode/pre-release.sh"]
        }
    ]
}
```

It is important to understand what we are doing so that we can customize the workflow according to our needs.

_label_ is used to identify the script in the VS Code Command Palette.

```
"label": "Pre-Release Setup"
```

_type_ is set to _shell_ since you need to execute a shell script.

```
"type": "shell"
```

_command_ is used the specify the base command to which the arguments can be passed.

```
"command": "bash"
```

_args_ is an array that provides arguments to the _command_. ${workspaceFolder} is the internal variable provided by the VS Code. It is the absolute path to our project’s root directory.

```
"args": ["${workspaceFolder}/.vscode/pre-release.sh"]
```

#### 3. Running Tasks

Let us open the VS Code Command Palette using Ctrl + Shift + P, type Tasks: Run Task and press _Enter_.

![VS Code Command Palette to run tasks](https://cdn-images-1.medium.com/max/744/0*zsZ0YeQe1sW57bRm.png)

We will be presented with a list of tasks that we specified in the tasks.json. We will select the Pre-Release Setup and press _Enter_. We will see the task output in VS Code Integrated Terminal.

![VS Code Command Palette to select tasks](https://cdn-images-1.medium.com/max/744/0*lqTPyB8ZXuO5NB_T.png)

#### Conclusion

We now have a good overview of how we can use VS Code tasks to run our _scripts as tasks_ in a better way. We can also add more tasks like running _pre-staging release_, running _pre-dev release_ and more.

If you enjoyed my article, please clap 👏 for it.

_This article was originally published on_ [_RavSam’s blog_](https://www.ravsam.in/blog/script-as-a-task-using-vs-code-ide/)_. We publish our articles on Dev after a week._

#### 🤝 Connect with Me

I love writing for the community while working on my freelance and open source projects. Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) • [Email](mailto:ravgeetdhillon@gmail.com).

#### 💌 Get our Newsletter

We write about Nuxt, Vue, Strapi, Flutter, Jamstack, and Automation. [Subscribe to our newsletter](https://www.ravsam.in/newsletter/).

#### 🛖 About RavSam

We are helping companies and startups around the globe with Digital Product Development powered by modern Jamstack architecture. [Get in Touch with us](https://www.ravsam.in/contact-us/).

#### 📙 You might also enjoy reading

[Add Unsubscribe link in emails using Google Apps Script](https://www.ravsam.in/blog/add-unsubscribe-link-in-emails-using-google-apps-script/)

* * *