© 2023 odd pixel
blog

Setting up Visual Studio Code for the Sage 8.x WordPress starter theme

 |  By

Setting up Visual Studio Code for the Sage 8.x WordPress starter theme

I’ve published an update to this post for Sage 9.x as it uses a different build process. Check it out here.

I’ve recently switched over to Visual Studio Code from Sublime Text 3 as my primary code editor and I am really liking it. It is fast, lightweight, and now has a healthy array of extensions so we can easily customize it for our needs.

As with any process change, there are always some speed bumps along the way to being 100% productive. One such speed bump I recently ran into was integrating the Gulp based build process for the Sage WordPress starter theme into Visual Studio Code.

I’ve been using the Sage for a couple of years now (back when it was called Roots) and they have the build process inside the theme folder itself. Which poses a bit of a problem as the Visual Studio Code task runner and the Build shortcut are setup to look for gulpfile.js in the root of the current project as the default. With a little digging, I figured out how to trigger a build process in a subfolder of the project.

The Solution

So to accomplish this we need to first create a task.json file. To do this open the Command Palette [Win: Ctrl + Shift + P | Mac: ⇧ ⌘ P] and run the command ‘Tasks: Configure Task Runner’ (just start typing this out and it will show in the autocomplete dropdown). Select Gulp as the task type and hit enter. A file called task.json should now be in the .vscode folder of your project.

The default task.json file should look like this:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": ["--no-color"],
    "showOutput": "always"
}

Now we need to change a few things. First change "args": ["--no-color"], to "args": ["watch"],

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": ["watch"],
    "showOutput": "always",
}

Then add the following to set the path to your themes folder (this is where the gulpfile.js is located). Visual Studio Code has some Variable substitutions that we use here to insert the path of the folder opened in VS Code: ${workspaceRoot}


    "options": {
        "cwd": "${workspaceRoot}/wp-content/themes/project/"
    },

And finally we want to set this to be the default Build command so we can use the shortcut [Win: Ctrl + Shift + B | Mac: ⇧ ⌘ B]


    "tasks": [{
        "taskName": "build",
        "isBuildCommand": true
    }]

Our final tasks.json will look like this:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": ["watch"],
    "showOutput": "always",
    "options": {
        "cwd": "${workspaceRoot}/wp-content/themes/project/"
    },
    "tasks": [{
        "taskName": "build",
        "isBuildCommand": true
    }]
}

Now we can easily run the build command and not have to worry about manually starting the watch command every time we open the project.

I hope this has helped out and saved you some headache poking through the Visual Studio Code documentation. If so a share would be appreciated!

© 2023 odd pixel