Navigation & Symbols

Navigation connects a use to its declaration, and a declaration to its indexed consumers. For SFCC, that includes relationships expressed through strings, XML, JSON, and properties files as well as ordinary JavaScript symbols

Definitions and implementation targets

Use Go to Definition (F12) or Peek Definition from the editor's context menu

Some contexts return several matching declarations, allowing VS Code to show a definition list. Other contexts resolve a selected implementation. Do not interpret a list of matching files as proof of which version is deployed; cartridge order determines the override relationship

References across module boundaries

Use Go to References / Find All References (Shift+F12) to inspect indexed consumers

/** @param {dw.catalog.Product} product */
function getLabel(product) {
    return product.name || product.ID;
}

module.exports = { getLabel: getLabel };

var labels = require('*/cartridge/scripts/helpers/productLabels');

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

module.exports = { toTile: toTile };

Find references to the getLabel export to inspect matching call sites. The server supplements TypeScript's symbol references with SFCC-aware handling for CommonJS exports, Digital Script imports, and other indexed relationships

References to an export also include ISML templates that load the module with require() in an <isscript> block and read the export in a script block or a ${ … } expression, see Find template usages from scripts

References beyond JavaScript symbols

References describe statically recognized local usage. Dynamic string concatenation, computed property access, unrelated workspaces, or code available only on a sandbox can fall outside the results. A zero count is not a safe-delete guarantee

For hooks, custom APIs, and job steps, use the dedicated CodeLens links to trace registrations and implementations; not every SFCC relationship is exposed through the generic references action

Document outline and breadcrumbs

The Outline view, the breadcrumbs above the editor and Go to Symbol in Editor read the same document symbols from the language server. In a controller every SFRA route is its own entry, named after the server method and the route: server.get('Show', ...) is listed as server.get Show with the detail SFCC controller route, and server.extend(module.superModule) as server.extend module.superModule with SFCC controller inheritance. When the controller keeps require('server') in another variable, such as var s = require('server'), the entries use that name: s.get Show

Because the method stays in the name, an overlay's server.append Show reads differently from the base cartridge's server.get Show, and append, prepend and replace routes are easy to tell apart in a long controller

Only top-level statements become entries. Route middleware, the route callback and functions declared inside other functions are not listed

Jump to a symbol in the file

• The Outline follows the cursor. Clicking an entry moves the cursor to the start of the symbol, for a route the server method, and brings it near the top of the editor when it was out of view
• Click the last breadcrumb, or press Cmd+Shift+. on macOS or Ctrl+Shift+. on Windows/Linux, to open the symbol picker. It shows each entry with its detail, previews the focused symbol in the editor and opens it on Enter
• Run Go to Symbol in Editor with Cmd+Shift+O on macOS or Ctrl+Shift+O on Windows/Linux. Type to filter by name, or type : after the @ to group the entries by kind, so routes appear under methods and the required modules under variables

Workspace symbol search

Run Go to Symbol in Workspace with Cmd+T on macOS or Ctrl+T on Windows/Linux and type part of a name. The index covers the cartridges in your workspace, so you can jump to a route, hook or helper without knowing which cartridge declares it

Routes are listed by their route name: the controller file name, a hyphen and the action, such as Product-Show. That is the name URLUtils.url() takes, and each declaring cartridge gets its own row

• Selecting a route opens the controller with the cursor on the route's name, for example on 'Show' in server.get('Show', ...)
• Add a second word to narrow the results by their description: Show app_storefront_base keeps the routes declared in app_storefront_base
• Routes are also listed under their outline names, such as server.append Show, whether the controller is open or not. Searching by the action name, such as Show, finds both rows

Smart Search offers dedicated pickers for routes, hooks, step types, custom APIs and resource keys, with row actions such as Open Endpoint and Copy Endpoint URL for routes. See Smart Search

What connects the files

If a target looks wrong, follow Configuration & troubleshooting before changing source to match an unexpected suggestion