JavaScript

Use SFCC API types, JSDoc, cartridge-aware modules, and editor navigation in existing JavaScript cartridges

JavaScript cartridges get SFCC completion, API documentation, parameter hints, definitions, references, and diagnostics. The language server uses bundled dw.* declarations and your indexed project to describe ordinary .js files, including CommonJS exports and SFRA controllers

Open your cartridge workspace, link any missing cartridges, and wait for indexing. You do not need a separate types package or a tsconfig.json to start. See Zero configuration if the file is not recognized

Complete an SFCC API call

Typing after product. lists the Product members from the bundled dw types; the highlighted item is resolved on demand and the details pane shows its signature and JSDoc
cartridge/scripts/helpers/productLabel.js
var ProductMgr = require('dw/catalog/ProductMgr');

exports.getLabel = function (productID) {
    var product = ProductMgr.getProduct(productID);
    return product ? product.name : '';
};

Type ProductMgr. to explore the API, then invoke completion after product. to see product members. Hover getProduct for its documentation and use signature help while entering the argument. The returned object carries its SFCC type into the rest of the function

Give your own helpers useful types

References on an exported property list the export itself and every recognized call through require, here labels.getLabel in productTile.js

JSDoc adds parameter and return information while keeping the file valid JavaScript:

cartridge/scripts/helpers/productLabel.js
/**
 * @param {dw.catalog.Product} product
 * @returns {string}
 */
exports.getLabel = function (product) {
    return product.name || product.ID;
};

Use this helper from another indexed file:

cartridge/scripts/helpers/productSummary.js
var labels = require('*/cartridge/scripts/helpers/productLabel');

/** @param {dw.catalog.Product} product */
exports.getSummary = function (product) {
    return { id: product.ID, label: labels.getLabel(product) };
};

Complete labels. to discover the export. Hover getLabel for its signature, use Go to Definition to open the implementation, and use Go to References or Find All References on the export to inspect indexed callers. Annotate inputs that cannot be inferred; an any value cannot provide the same precise member checks

Follow SFRA routes and overrides

The lens row above an SFRA route copies or opens its storefront URL, lists the calls that reach it and jumps to the cartridges that append to it
app_custom/cartridge/controllers/Product.js
var server = require('server');
server.extend(module.superModule);

server.append('Show', function (req, res, next) {
    res.setViewData({ showStoreMessage: true });
    next();
});

module.exports = server.exports();

module.superModule resolves to the next matching controller after the current cartridge. Use Go to Definition to inspect that parent. Route CodeLens connects the indexed route to its usages and related append, prepend, and replace actions

The active site and cartridge order determine which implementation is selected. Cartridge overrides & superModule explains the base/override/caller chain with complete examples

Bring project definitions into your code

Project inputWhat it adds to JavaScript
System-object metadata XMLTyped custom attributes, documentation, and definition links to XML
Custom-object metadataCustom-object fields and typed keys for recognized API calls
Form XMLNamed fields and groups for native forms and SFRA server.forms.getForm()
Routes, hooks, templates, and bundlesContextual string completion and navigation at supported SFCC calls

These results depend on the files discovered in your workspace. Editor diagnostics describe the local code and its available types; deploy and exercise the relevant request to check sandbox behavior

Choose your next guide

On this page