React Component Color
A VS Code extension that provides visual color coding for React components based on whether they are Server Components or Client Components in modern React applications.
Features
- 🎨 Visual Component Identification: Automatically detects and color-codes JSX/TSX components
- 🔍 Smart Detection: Identifies Server vs Client Components by analyzing
'use client'
directives
- ⚙️ Highly Customizable: Configure colors for background, border, underline, and text separately
- 🔄 Real-time Updates: Instantly updates colors as you edit your code
- 📁 Import Resolution: Follows import chains and supports TypeScript path mappings
- 💾 Performance Optimized: Uses intelligent caching for fast analysis

How It Works
The extension analyzes your React files and:
- Server Components: Components without
'use client'
directive (default: green)
- Client Components: Components from files with
'use client'
directive (default: pink)
Usage
- Install the extension
- Open any
.jsx
, .tsx
, .js
, or .ts
file with React components
- Components are automatically color-coded based on their type
- Use the command palette and run "Toggle React Component Highlighting" to enable/disable
Configuration
Customize the extension in your VS Code settings:
{
"reactComponentColor.enable": true,
"reactComponentColor.serverComponent.backgroundColor": "",
"reactComponentColor.serverComponent.borderColor": "",
"reactComponentColor.serverComponent.underlineColor": "",
"reactComponentColor.serverComponent.textColor": "#4EC9B0",
"reactComponentColor.clientComponent.backgroundColor": "",
"reactComponentColor.clientComponent.borderColor": "",
"reactComponentColor.clientComponent.underlineColor": "",
"reactComponentColor.clientComponent.textColor": "#FF719B"
}
Available Settings
Setting |
Description |
Default |
reactComponentColor.enable |
Enable/disable the extension |
true |
reactComponentColor.serverComponent.* |
Color settings for Server Components |
Various |
reactComponentColor.clientComponent.* |
Color settings for Client Components |
Various |
For each component type, you can configure:
backgroundColor
: Background highlight color
borderColor
: Border color around the component
underlineColor
: Underline color
textColor
: Text color of the component name
Set any color to an empty string (""
) to disable that particular styling.
Supported File Types
.jsx
- JavaScript with JSX
.tsx
- TypeScript with JSX
.js
- JavaScript (when containing JSX)
.ts
- TypeScript (when containing JSX)
Commands
- Toggle React Component Highlighting: Enable/disable component highlighting
Advanced Features
Import Resolution
The extension intelligently follows import statements to determine component types:
- Supports relative imports (
./Component
)
- Supports TypeScript path mappings (
@/components/Button
)
- Handles index file resolution
- Works with various import patterns (named, default, namespace)
- Intelligent caching system for fast re-analysis
- Efficient AST parsing using TypeScript compiler API
- Minimal performance impact on VS Code
Requirements
- VS Code 1.100.0 or higher
- Works best with React 18+ projects using Server/Client Components
Known Issues
- External package imports are not analyzed for component type
- Requires
'use client'
directive to be at the top of the file
Acknowledgements
This extension was inspired by the original idea from react-component-colors by SupremeDeity. We extend our gratitude for the innovative concept of visually distinguishing React component types.
Contributing
Found a bug or want to contribute? Visit our GitHub repository.
Release Notes
1.0.2
1.0.1
1.0.0
Initial release with core functionality:
- Server/Client Component detection
- Customizable color coding
- Import chain analysis
- TypeScript path mapping support
Enjoy coding with better visual React component identification! 🚀