Settings

Configuring the extension is a crucial step to make it work. The extension is set globally and per project. The global settings are stored in the VSCode settings (and focuses on your overall needs). The project settings are stored in a file in your workspace/project (and handles the specifics of your project).

However, before you dive into the settings, you might want to set up your project (Workspace). This is done by opening a folder within VSCode, which VSCode will keep prompting you. This is a necessary step to use the extension to its full (e.g.: File > Open Folder). We recommend a folder per connected Business Unit.

Not sure? Just follow the Config Panel!

This is the screen, that keeps showing up on start up. Well, until you have set up your project. Takes 5 to 10 minutes, but it’s worth it!

Unfinished Config

The UI will guide you through the process and help you set up the extension correctly. The UI opens automatically when you open the extension for the first time or when the extension is not configured. You can also open it manually by running the SSJS: Show Config command.

Following this should be easy (as long you follow the steps), but let us know if you have any issues!

Project Settings - via commands

Settings for an individual project is set in a file. .vscode/ssjs-setup.json to be precise.
API Client Secret is always stored in a secure way (in OS Key management).

The only setting you have to set manually is the hooks setting. This setting is used to run commands on save. Read more about it in the blog post on introduction of hooks.

Example:

Explanation of settings for 0.3.7 and onwards.

{
  // SFMC settings:
  "sfmc-domain": "<< sfmc-subdomain from AUTH URL: https://sfmc-subdomain.auth.marketingcloudapis.com/ >>",
  "sfmc-client-id": "<< client-id of installed package >>",
  "sfmc-mid": "<< optional: only if MID is needed >>",
	"sfmc-user-id": 0, // to identify who deployed which asset
	"dev-folder-path": "",
  // templating tokens:
  "dev-tokens": { // for DEV in Cloud Pages
    "IS_PROD": "true",
    "token-name": "use {{Mustache}} syntax in your files to fill your dev files"
  },
  "prod-tokens": { // for Production deployment
    "IS_PROD": "false",
    "token-name": "use {{Mustache}} syntax in your files to fill your prod files"
  },
  // Where are your assets stored?
	"asset-folder-id": 0, // Content Builder folder ID
	"asset-folder": "<< asset-folder >>", // Content Builder folder
  // Settings for your Cloud Page
	"dev-page": {
		"url": "<< dev page url >>", // URL of the Cloud Page
		"snippet-id": "<< asset ID of the code snippet >>", // id of the Content Snippet
		"use-auth": true, // in case you do not want to use auth - run the "SSJS: Install Dev Page" command to set this.
		"auth-type": "<<token|basic|none>>", // which auth-type is used?
    "dev-token": "<< dev-token-comes-here >>", // token, if in use
		"dev-username": "<< dev-username-comes-here >>", // user, if used
    "dev-password": "<< dev-password-comes-here >>" // password, if used
	},
  // Settings for your Cloud Text Resources
	"dev-resource": {
		"url": "<< dev page url >>", // URL of the Cloud Text Resources
		"snippet-id": "<< asset ID of the code snippet >>", // id of the Content Snippet
		"use-auth": true, // in case you do not want to use auth - run the "SSJS: Install Dev Page" command to set this.
		"auth-type": "<<token|basic|none>>", // which auth-type is used?
    "dev-token": "<< dev-token-comes-here >>", // token, if in use
		"dev-username": "<< dev-username-comes-here >>", // user, if used
    "dev-password": "<< dev-password-comes-here >>" // password, if used
	},
  // Server provider settings
  "proxy-any-file": {
    "public-domain": "<< publicly accessible domain, e.g. NGROK forwarding domain >>",
    "port": 4000, // PORT of to locally serve the data on
    "main-path": "/all-in-dev", // which URL is used to provide files?
    // HTTP Basic Auth login to project the server (Header: "ssjs-authorization")
    "auth-username": "<< dev-username-comes-here >>",
    "auth-password": "<< dev-password-comes-here >>"
  },
  "hooks": { // this is the only config that you have to create manually
    "on-save": {
      ".js": {
        "enabled": true,
        "command": "npm run build",
        "success-handling": "upload-output",
        "output-file": "./dist/{{name}}.ssjs"
      }
    }
  },
  "config-view": { // settings for the Config Panel
    "any-script-deployed": true,
    "dev-read": true
  },
  "extension-version": "0.0.0" // version that created the config file
}

Extension Settings

Find your extension settings in the VSCode settings. You can access them by clicking on the gear icon in the bottom left corner of the VSCode window and selecting Settings. Follow the path Extensions > SSJS Manager to find the settings for the extension.
This is your global settings for the extension and formatter.

Editor: Autosave: Upload script automatically (on save) when using Asset Provider?

Editor: Code Provider:

To link your VSCode to SFMC, you have three options:

None: No code is provided from VSCode to SFMC.
Asset: Code is provided using a Content Block. This method is slower but more secure, and it’s the default setting.
Server: Code is served using a local server. This option is faster but requires reverse tunneling.

Here’s a closer look at each option:

Asset Provider: This option uses the API to deploy your script as a Content Builder Code Snippet, either on demand or on save. It’s the default setting and offers more security. However, it’s slightly slower and requires an Installed Package. Deployed scripts are always available.

Server Provider: This option utilizes a local server to provide your scripts via HTTPS. It’s faster and doesn’t always require an Installed Package (only for setup creation, which will be updated later). However, it’s less secure as it exposes your computer to potential hackers. Scripts are accessible only when you need them. To set this up, you’ll need a reverse tunneling tool such as NGROK, Expose, Local Tunnel, or Cloud Flare Tunnels.

Preferences

Editor: Editor: Run Handling In Cloud Pages

How to handle the URL when using ‘Get Dev Path’ command?

Preview: open the page in the Preview panel.
Open: opens the URL in the default browser.
Copy: copies the URL to the clipboard.

Editor: Show Config Panel Automatically

Keep showing the Config Panel until it’s set up?

Editor: Templating Tags Let’s you set the tags for templating in case the classic {{TAGS}} would be your thing.

Language › Ampscript: Capitalize And Or Not

Use upper case characters for ‘AND’, ‘OR’, ‘NOT’ keywords (false for lowercase).

Language › Ampscript: Capitalize Keywords

Use upper case characters for most keywords (false for lowercase).

Language › Ampscript: Max Parameters Per Line

How many method parameters can be located on one line (creates new lines if overflown).