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

The process for setting up Visual Studio Code for the Sage 9.x build process is a bit different now that it uses Yarn instead of gulp as the main script runner. Basically, the steps are the same as in my previous post Setting up Visual Studio Code for the Sage 8.x WordPress starter theme with just a few minor differences.

Our updated tasks.json will look like this:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "2.0.0",
  "runner": "terminal",
  "command": "yarn",
  "type": "shell",
  "args": ["start"],
  "presentation": {
    "reveal": "always"
  },
  "options": {
    "cwd": "${workspaceRoot}/wp/wp-content/themes/belmont-park/"
  },
  "group": {
    "kind": "build",
    "isDefault": true
  }
}

Windows PATH issue

One issue that you may run into is that Yarn is automatically installed on the PATH without a trailing slash and that was causing Visual Studio Code to not recognize the ‘yarn’ command. To fix this go to System Properties then click on Environment Variables, then under “User variables for…” select the Path item and then click Edit. Next select the Yarn path variable, and edit it to add a trailing slash after …\Yarn\bin\. You also may have to restart VS Code for it to recognize this change.

You should now be good to run the build command with [Win: Ctrl + Shift + B | Mac: ⇧ ⌘ B]

Happy building!