📝 CSS-Tricks 224: VS Code Tasks

View this newsletter on the web.

[Robin]: One of the nifty things about VS Code is that you can run tasks when you open up a project. So instead of having to open up the command line and also have VS Code open at the same time, you can configure VS Code to run tasks like Gulp automatically. Chris wrote about this very thing and how he got a Gulp task running. This had me thinking, why don’t I do this for my own little site, too?

So, first up I opened the workspace for my site in VS Code. Then I selected the default task by hitting Command + Shift + P and selecting Tasks: Configure Default Build Task

After clicking this, VS Code rather smartly shows that there are a bunch of different options from the scripts section from within my package.json which looks something like this:

See that gulp dev & eleventy --serve? That’s what runs when I type npm start into the command line and it’s what boots up my local environment for my website. Anyway, once I selected Configure Default Build Task I selected npm start

Like I said, npm start runs every task within gulpfile.js and kicks off the Eleventy build process. Once that’s done now I can hit command + shift + b on a Mac and that task will pop off and start running in VS Code’s command line. Neat! That’s much faster than having to load two separate apps to build something on my personal blog.

Now, if I head to tasks.json, we can see this default task that we’ve setup. But I want to have this command run every time I open up this workspace (I’d prefer not to have to manually do it each dang time). So! I edited the task that looked like this:

{ "version": "2.0.0", "tasks": [
{
"type": "npm",
"script": "start",
"problemMatcher": ,
"label": "npm: start",
"detail": "gulp dev & eleventy --serve",
"group": {
"kind": "build",
"isDefault": true
}
}
] }

And then from here I can add the runOptions property and set runOn to folderOpen:

{ "version": "2.0.0", "tasks": [
{
"type": "npm",
"script": "start",
"problemMatcher": ,
"label": "npm: start",
"detail": "gulp dev & eleventy --serve",
"group": {
"kind": "build",
"isDefault": true
},
"runOptions": {
"runOn": "folderOpen"
}
}
] }

Once I’ve selected Allow and Run in the popup that appears after I save this file, I can now just open up this workspace and gulp dev & eleventy --serve will run automatically! The command line at the bottom will pop up and things will get started automagically. That’s pretty neat and saves me having to open up another command line app and type yet another command.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s