JS Module Usages
Find and navigate JavaScript/TypeScript module usages across your workspace — fast, index-based, and zero-config.
For any .js/.ts/.jsx/.tsx file, see every place in the workspace that imports it: static imports, dynamic imports, require() calls and re-exports — including imports inside .vue files. The companion of Vue Component Usages, built on the same workspace-wide usage index.
Features
- Foldable results list — usages are grouped by file; test files/folders start collapsed (one row per file with its usage count), everything else starts expanded.
Enter on a file row expands/collapses it, title-bar buttons expand/collapse everything, and typing a filter searches inside collapsed groups too — matching usages stay grouped under their file header, so you always see which file each result belongs to. Each usage line shows an icon for its kind on the left and, on the active row, the kind badge on the right edge.
- Live editor preview — while you move through the list with
↑/↓, the editor previews each usage in place (WebStorm-style): the file opens as a reused preview tab, centered on the highlighted line. Enter opens it for real, Esc takes you back exactly where you were.
- Usage CodeLens — every JS/TS file shows a lens at the top with the live usage count. Click it to open the list.
- References view — one click sends all results to VS Code's native References peek, handy when there are dozens of usages.
- Symbol-aware — place the cursor on an exported symbol and run Show Module Usages to see only the imports that pull in that symbol, run Show Usages of Export… (
Ctrl+G Ctrl+E) to pick any export of the current module from a list, or use VS Code's native Find All References on an exported symbol. This includes entries of module.exports = { … }.
- Alias support —
compilerOptions.paths from tsconfig.json/jsconfig.json (e.g. @/utils/date → src/utils/date) are resolved automatically; extra aliases can be added via settings.
- Local reference tracking — after
const repos = require('./dashboard.repos'), every place the importing file actually uses repos is reported too, not just the require line.
- Filename mentions — shell scripts,
package.json scripts, YAML/TOML configs that invoke a module by filename (node run-timescale-sql.js) count as usages.
- Persistent index — cached per workspace and refreshed incrementally as you edit, so lookups are instant even on large projects.
Usage
- Open a JS/TS file (or place the cursor on one of its exported symbols).
- Run Show Module Usages — via the CodeLens, the editor title button, the context menu, the Command Palette, or
Ctrl+G Ctrl+M (Cmd+G Cmd+M on macOS).
- Navigate the list with
↑/↓ to preview each usage, press Enter to jump to it.
For a single exported function in a CommonJS block like module.exports = { exposeJsonSchema }, place the cursor on exposeJsonSchema either in the function declaration or inside the export object and run Find All References (Shift+F12 by default). Ctrl+click is still VS Code's definition navigation, so it may jump between the export object and the implementation instead of opening references.
What counts as a usage
| Kind |
Example |
| Static import |
import { formatDate } from './utils/date' |
| Side-effect import |
import './polyfills' |
| Re-export |
export { toast } from './ui/toast' |
| Dynamic import |
const panel = () => import('./panels/LazyPanel') |
| require |
const { readFile } = require('./fs-utils') |
| Reference |
repos.getDashboards() after const repos = require('./dashboard.repos') |
| Filename mention |
node run-timescale-sql.js in a .sh script, a package.json script, YAML, TOML |
Design notes
A few deliberate choices about what is (and isn't) reported:
- Path-based matching. Usages are keyed by the resolved file path of the import specifier, so two modules that happen to share a name never pollute each other's results. Relative paths,
/-rooted paths and configured aliases are resolved; bare package imports (lodash, vue) are ignored — this tool is about your workspace modules, not dependencies.
index files match their folder. Usages of src/utils/index.js include both import x from './utils/index' and import x from './utils'.- Filename mentions are path-safe. When a script mentions a path (
node scripts/run-timescale-sql.js, ./OneShot.js), it is resolved like an import and only matches that exact file. A bare filename (node run-timescale-sql.js) can't be resolved to a folder, so it matches by name only when the workspace contains exactly one file with that basename — with several same-named files, guessing would produce false positives, so nothing is reported.
- References are lexical. Tracking of the local binding (
repos.…) is a word match scoped to the importing file: it skips the import line itself, property access (other.repos) and object keys ({ repos: x }), but it does not understand shadowing — a local variable with the same name in another scope will match. Disable with jsModuleUsages.trackReferences: false.
- Symbol filter is import-level. When filtering by an exported symbol (cursor, Show Usages of Export…, or VS Code Find All References on an export), results include imports that name it (
{ formatDate }, destructured require), namespace/dynamic imports that pull in everything, member references on a namespace binding (utils.formatDate(...) after const utils = require('./utils')), and member requires (const formatDate = require('./utils').formatDate). Call sites inside the importing file are tracked lexically when jsModuleUsages.trackReferences is enabled.
- Comments don't count (by default). Commented-out imports are ignored, so counts reflect live code only. Set
jsModuleUsages.searchInComments: true to include them.
- Text scanning, not a language server. Matching is regex-based: it stays instant on thousands of files and keeps working on syntactically broken code while you type. The trade-off is no full module resolution (no
exports maps, no webpack config parsing) — for semantic, rename-safe references the TS server remains the right tool; this extension covers dynamic imports, require calls, .vue files and alias paths it often misses, and gives you the fast grouped-preview navigation.
Commands
| Command |
Description |
JS Module Usages: Show Module Usages |
List and open usages of the current module |
JS Module Usages: Show Usages of Export… |
Pick one of the module's exports and list only its usages |
JS Module Usages: Rebuild Index |
Force a full re-index of the workspace |
JS Module Usages: Index Status |
Show index size and statistics |
Settings
Indexing:
| Setting |
Default |
Description |
jsModuleUsages.include |
**/*.{js,jsx,ts,tsx,mjs,cjs,mts,cts,vue} |
Glob used when indexing files that may import modules |
jsModuleUsages.mentionInclude |
**/*.{sh,bash,zsh,json,yml,yaml,toml} |
Script/config files scanned for filename mentions (empty string disables) |
jsModuleUsages.trackReferences |
true |
Report usages of the local binding after an import/require |
jsModuleUsages.excludeFolders |
node_modules, dist, build, .git |
Folder names excluded from indexing |
jsModuleUsages.exclude |
(empty) |
Advanced: exclude glob; when set it overrides excludeFolders |
jsModuleUsages.aliases |
{} |
Extra alias prefixes, e.g. { "@/": "src/" } |
jsModuleUsages.scanTsconfigPaths |
true |
Resolve aliases from tsconfig.json/jsconfig.json compilerOptions.paths |
jsModuleUsages.searchInComments |
false |
Also report usages found inside comments |
jsModuleUsages.indexOnStartup |
true |
Build/refresh the index when VS Code starts |
jsModuleUsages.maxFiles |
12000 |
Maximum number of files in the index |
jsModuleUsages.maxFileSizeKB |
1024 |
Files larger than this are skipped |
jsModuleUsages.maxResults |
800 |
Maximum number of usages shown |
jsModuleUsages.watchDebounceMs |
300 |
Delay before re-indexing changed files |
Changing an indexing setting rebuilds the index automatically.
Appearance:
| Setting |
Default |
Description |
jsModuleUsages.codeLens |
true |
Usage-count CodeLens at the top of JS/TS files |
jsModuleUsages.statusBar |
true |
Index status (JS usages: N files) in the status bar |
jsModuleUsages.editorTitleButton |
true |
Show Module Usages button in the editor title bar |
jsModuleUsages.contextMenus |
true |
Show Module Usages in the editor/explorer context menus |
jsModuleUsages.foldResults |
auto |
Fold results by file: auto (collapse test files only), always, never |
jsModuleUsages.foldPaths |
test, tests, __tests__, __mocks__, spec, e2e, cypress |
Folder names collapsed by default in auto mode |
jsModuleUsages.livePreview |
true |
Preview usages in the editor while navigating the list |
jsModuleUsages.previewMaxLength |
64 |
Maximum length of the code preview per entry |
The command itself always stays available from the Command Palette and the keybinding, even with every visual entry point disabled.
Security & privacy
- The extension only reads workspace files; nothing is executed or sent anywhere.
- In untrusted workspaces indexing is disabled until you trust the workspace.
- Oversized files are skipped (
maxFileSizeKB) to keep the editor responsive.
License
MIT
| |
