Dead Component Detector

Detect unused React components in your workspace and review them from a dedicated VS Code sidebar.

Features

• Scans React component files in .js, .jsx, .ts, and .tsx
• Detects components that appear to be unused across the workspace
• Ignores common non-component or special-case files such as tests, specs, stories, and index barrel files
• Excludes React context-style files and provider-like components to reduce false positives
• Ignores components that are used inside the same file
• Shows unused components in a dedicated sidebar tree view
• Opens the file when you click a result
• Adds optional warnings to the Problems panel
• Shows a badge count on the Activity Bar icon when dead components are found

Requirements

• VS Code 1.110.0 or later
• A React codebase using JavaScript or TypeScript

Extension Settings

This extension contributes the following settings:

• deadComponentDetector.include: Glob patterns for candidate component files
• deadComponentDetector.exclude: Glob patterns to exclude from scanning
• deadComponentDetector.onlyPascalCase: Only treat PascalCase filenames as React components
• deadComponentDetector.showDiagnostics: Show suspected dead components in the Problems panel

Usage

1. Open a React project in VS Code
2. Open the Dead Components view from the Activity Bar
3. Click the refresh button to scan the workspace
4. Review the detected unused components in the sidebar
5. Click any result to open its file
6. Check the Activity Bar badge for the current dead component count

Detection Rules

The current version is based mainly on filename and usage-pattern matching.

It works best when:

• component filenames match component names
• components are imported normally
• JSX usage is explicit in the codebase

It currently tries to avoid false positives by:

• skipping index files
• skipping tests, specs, and story files
• skipping context/provider-like files
• skipping components that are rendered in the same file

Known Issues

• Dynamic imports are not fully handled yet
• Barrel export chains can still hide real usage in some projects
• Regex-based detection can miss edge cases in advanced TypeScript patterns
• Components referenced indirectly through registries, maps, or string-based lookups may be reported as unused

Release Notes

0.0.3

• Added .ts and .tsx support
• Added same-file usage detection
• Added context/provider exclusion to reduce false positives
• Added Activity Bar badge count
• Improved sidebar workflow and diagnostics support

Enjoy!