Go to Declaration support for Salesforce Commerce Cloud PWA Kit projects — resolves @salesforce/retail-react-app aliases to actual files in app/ and custom/ override folders.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Lightweight VS Code extension that brings "Go to Declaration" / "Go to Definition" behavior for Salesforce Commerce Cloud PWA Kit projects.
It resolves imports that use the @salesforce/retail-react-app alias to actual files in the project app/ and custom/*/ override folders and supports symbol-level navigation (jump to the exported variable/function/class inside the target file).
Features
Resolve @salesforce/retail-react-app/... aliased imports to real files under app/ and custom/*/.
Symbol-level navigation: when you jump on an imported symbol (or a usage of it), the extension navigates to the exported declaration inside the resolved file.
Works for common JS/JSX export forms: export const, export function, export class, export { ... }, and export default.
No heavy AST dependencies — small, fast, regex-based implementation targeting JS/JSX projects.
Usage
Open a file in your PWA Kit project that imports from @salesforce/retail-react-app/....
Cmd+Click (macOS) / Ctrl+Click or press F12 on either:
the import line (e.g. import { useMyCustomHook } from '@salesforce/...';) or
a usage of the imported symbol (e.g. useMyCustomHook({...})).
The extension resolves the alias to app/ and any custom/*/ override folders and navigates to the exported declaration (when available). If the symbol cannot be resolved, the extension falls back to opening the target file.
How it works
Alias resolution: the extension scans {workspaceRoot}/custom/ for subfolders and builds alias prefixes such as:
@salesforce/retail-react-app/app/
@salesforce/retail-react-app/custom/<name>/
When resolving an import path it strips the matching alias prefix to get a relative path and then tries to locate files in this order:
exact path (file)
path.jsx
path.js
if directory: index.jsx
if directory: index.js
The resolver searches app/ first, then each custom/<name>/ folder and returns all matching targets (so you can jump to overrides as well as upstream files).
Symbol-level navigation: after locating the candidate files, the extension scans the target file(s) for exported symbols using simple, robust regular expressions that match common export forms (export const, export function, export { ... }, export default). If the symbol is found, the extension returns a Location pointing to the line/character of the export.
Limitations
JS/JSX only — this implementation intentionally does not parse TypeScript files.
Parsing is regex-based and covers the common export/import shapes used in PWA Kit; very unusual or minified forms may not be recognized.
The extension resolves imports using the first workspace folder for the document — multi-root workspaces where project layout differs per root may require opening the correct root first.
Contact
If you want help or want to collaborate, open an issue or a PR in the repository.
