A VS Code extension for browsing Cocos Creator .prefab, .scene, and .fire files as a readable, collapsible node tree instead of raw JSON — plus a standalone CLI for the same tree from the terminal.

Features

Run the Prefab View command to open the currently active file — or a file/tab you right-click — in a dedicated read-only viewer tab.

Readable node tree, not raw JSON

For a recognized .prefab/.scene/.fire asset, the file's raw serialized JSON is converted into an actual node tree before display:

Node names instead of raw object graphs, with component lists resolved to readable names (script components resolve to their .ts file name; builtin components like cc.Sprite show as Sprite)
Nested prefab instances are resolved and inlined as part of the tree, so you see the nested prefab's real structure instead of an opaque reference stub
Any file that isn't a recognized prefab/scene (e.g. a plain .json file) falls back to showing its raw parsed JSON instead

Tree viewer UI

Collapsible tree with Expand All / Collapse All toolbar buttons
Live filter box that searches node names and auto-expands matching branches
Color-coded by nesting depth: ordinary nodes, first-level nested-prefab roots, and second-level-and-deeper nested-prefab roots each get a distinct color
Components checkbox (hidden by default) to show/hide each node's [Component1,Component2,...] list
Active checkbox (hidden by default) to show a ☑/☐ marker per node reflecting its own _active flag
Inactive nodes — and their entire subtree, since an inactive node hides everything under it too — render at ~35% reduced brightness
A background progress indicator shows while the tree is being built, for large projects where that walk takes a moment
Re-invoking the command on an already-open file reveals its existing tab instead of opening a duplicate

Usage

Activate from context menu
Default view
With component names
With active flags

Running the command

Command Palette: run Cocos Creator: Prefab View while a file is open in the active editor
Explorer context menu: right-click a .prefab, .scene, .fire, or .json file
Editor tab context menu: right-click the tab of an open .prefab, .scene, .fire, or .json file

CLI tool

tools/prefab-viewer.ts prints the same node tree to the terminal (or a file), independent of VS Code:

npx tsx tools/prefab-viewer.ts <path-or-name-or-glob> [--output=<file>] [--components[=suffix|child]] [--format=text|json] [--nesting-depth=<n>]

The target asset can be an exact path, a bare name/partial path to search for under assets/, or a glob. See the file's header comment for the full option reference (--components, --format=text|json, --nesting-depth, --output).

Requirements

No external dependencies or configuration required. The CLI tool requires running from within a Cocos Creator project (an assets/ folder alongside the target asset).

Extension Settings

This extension does not currently contribute any VS Code settings.

Known Issues

Very large prefab/scene files may render slowly since the entire tree is built up front.

Release Notes

0.2.0

Added support for Cocos Creator 2.x projects (.fire scenes; folder and script .meta files with no importer field; 2.x's self-referencing prefab asset bookkeeping is now told apart from a real nested-instance reference)
The scene root's own visibility is now always treated as active, matching the Editor (which has no Hierarchy UI to toggle it), even if the source file's _active says otherwise

0.1.1

Webview markup moved out of the extension source into separate media/ HTML/CSS/JS files
Repository and license metadata added
README usage screenshots

0.1.0

Initial release: the Prefab View command with a collapsible, color-coded node tree viewer (nested-prefab resolution, component-name resolution, active/inactive node styling, Components/Active toggles, a build-progress indicator), plus the standalone tools/prefab-viewer.ts CLI.

Enjoy!

cc-prefab-viewer