Why React Code Looks Like That
A VS Code extension that visualizes which parts of TSX/JSX code come from JavaScript, TypeScript, JSX, or React. Designed as an educational tool to help developers understand the layered syntax of modern React code.
This extension accompanies the blog post "Why React Code Looks Like That".
| Before |
After |
 |
 |
Usage
- Open a
.tsx or .jsx file
- Run the command "Why React Code Looks Like That - Toggle Highlighting" from the command palette (Cmd/Ctrl+Shift+P)
- Code is colored by origin technology
- A legend panel appears in the Explorer sidebar with a "Turn Off" button
Colors
| Layer |
Default Color |
Description |
| JavaScript |
Amber #f59e0b |
Base language: variables, functions, operators, literals |
| JSX |
Violet #8b5cf6 |
Syntax extension: tags, attributes, fragments |
| TypeScript |
Blue #3b82f6 |
Type system: interfaces, type annotations, generics |
| React |
Emerald #10b981 |
Library-specific: hooks, key prop, React types |
How It Works
The extension uses the TypeScript Compiler API to parse TSX/JSX files into an Abstract Syntax Tree (AST). It then walks the tree and classifies each node based on its SyntaxKind. When regions overlap, a priority system resolves conflicts: React > TypeScript > JSX > JavaScript.
The result is a flat list of non-overlapping regions, each tagged with its origin layer. These regions are then rendered as VS Code text decorations.
Configuration
Colors are customizable in VS Code settings:
{
"whyReactCodeLooksLikeThat.colors.javascript": "#f59e0b",
"whyReactCodeLooksLikeThat.colors.jsx": "#8b5cf6",
"whyReactCodeLooksLikeThat.colors.typescript": "#3b82f6",
"whyReactCodeLooksLikeThat.colors.react": "#10b981"
}
Development
pnpm install
pnpm run compile
# Press F5 in VS Code to launch Extension Development Host
License
MIT
