TUTORIAL
How to Automatically Run Commands in Visual Studio Code
Use Visual Studio Code tasks to make your life easier
There are many tools available to automate developer tasks such as listing, building, packaging, testing, and deploying software systems. Examples of these are NPM scripts, Gulp, Make, ESLint, Webpack, and Prettier.
Usually, these commands are run from the command line giving developers quick access to a series of steps that need to be taken. Sometimes it might be useful if you could run these commands straight from your editor, perhaps even automate when they should run.
This is where Visual Studio Code’s task feature comes into play.
Use Case
Every morning when I stumble out of bed I grab a cup of coffee, write a good morning message to my team on Slack and fire up VS Code and open my local dev URL in the browser.
What I often seem to forget is to start up Webpack to watch and build my assets. It isn’t until I made a few CSS or JS changes that I notice that nothing is happening. (Don’t judge me, I usually wake up at 6 AM 😅)
In this article, I want to make a task that starts up my asset watcher when I open VS Code. This way I can spare myself some of that self-created annoyance.
Creating a Task
You can create a task manually, or you can make a task based on an existing automatically detected script. VS Code already recognizes NPM scripts for example.
In this case, I used the automatically detected NPM script as a template. To do this:
- Open the command palette — CTRL / CMD + Shift + P
- Select the configure task option — Tasks: Configure Task
- Choose the NPM script you want to make a task for
I did this for my start script and it generated the following output for me.
Configuring the Task To Run on Startup
Right now, the task can be run from the command palette, but it does not run on startup yet. To do this we should add another rule to the task.
This final line will now run the command every time you open the project folder in VS Code and with it we have a working first task.
Creating a Custom Task
Sometimes a custom task can be useful. Let’s create a custom command that starts the Webpack watcher as well.
Properties
Let’s go through the properties we just used and what they mean. For a full list of all possible properties, you can read the official documentation.
- label — The label used for the task in the VS Code interface.
- type — The type of the task, in our first task this was NPM, for a custom task this can be either
shellorprocess. - command — The actual command you want to execute.
- group — Allows you to specify whether the command belongs to the
buildortestgroup. This lets you run the command from the command palette easier. - presentation — This defines how the task is handled in the user interface. You can set an option for whether the output should be revealed and whether it should be in a new terminal every time or not.
- runOptions.runOn — This defines whether the task should be run manually or when the folder is opened.
Compound Tasks
You can also create tasks that are composed of smaller simpler tasks with the dependsOn property. For example, if you have a build script on both the client- and server-side that you want to run in separate terminals you can use a compound task.
Conclusion
Visual Studio Code tasks can be a useful tool in your toolkit. The big benefit for me personally is in running tasks when I open a project so I don’t have to worry about starting servers and asset watchers over my first cup of coffee on the day.
Thanks for reading. If you have thoughts on this, be sure to leave a comment.
If you like my content and want to support my efforts, consider becoming a Medium subscriber through my affiliate link. It will cost you nothing extra, but Medium will give parts of the proceeds to me for referring you.
And if you want, you can connect with me on LinkedIn or Twitter!
More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord. Interested in Growth Hacking? Check out Circuit.
