Use the Visual Studio Code "Prophet Debugger" extension to connect to a Salesforce Commerce Cloud sandbox

I just finished working my way through a Medium article by Manu Saini regarding connecting VSCode (Visual Studio Code) projects to SFCC (Salesforce Commerce Cloud) sandboxes, and simplified it for use in my company documentation. The article was very thorough, so if you want further details, I definitely recommend checking it out, but if you want the "quick and dirty" version, here are the steps.

Prerequisites

• VSCode installation (get it for free at code.visualstudio.com)
• An account with administrative access to the SFCC sandbox you want to connect to
• An active code version on the sandbox

Instructions

1. Install the “Prophet Debugger” extension in VSCode.

• Extensions (ctrl+shift+x) > “prophet debugger”

2. Import and open the project in VSCode.

3. Run a launch command from VSCode Command Palette.

• View > Command Palette > “Debug: launch.json”

4. Create a dw.json file

• Create at the root level of project
• Add this code:

{

    "hostname": "<your host>.demandware.net",

    "username": "<your sandbox username",

    "password": "<your sandbox password>",

    "code-version": "<your sandbox's code version>"

}

Hint: If you’re having trouble with this step, check to make sure the code-version in your dw.json configuration is the code version for your sandbox (see Administration > Site Development > Code Deployment), not the version of Node that is being used!

5. Clean and upload the cartridges using the VSCode Command Palette

• View > Command Palette > “Prophet: Clean Project/Upload All”

6. Update the preferences of the code editor to enable auto upload

• File > Preferences > Settings > “extension.prophet.upload.enabled“
• Set to enabled/true

That's it! You're connected!