React Compiler Marker ✨
react-compiler-marker is a VSCode/Cursor extension that shows which React components are optimized by the React Compiler
Features 🌟
- Customizable emoji markers for optimized and failed components
- Hover tooltips with details
- Commands to enable/disable markers or check a single file
- Preview Compiled Output: Preview the compiled output of the current file
✨ Optimized component
🚫 Failed component
Available commands 🛠️
Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type:
- Activate Decorations: Activates the markers for all relevant files in the current session.
React Compiler Marker: Activate Extension
- Deactivate Decorations: Deactivates the markers and clears them from the editor.
React Compiler Marker: Deactivate Extension
- Check Once (File-Specific Check): Analyzes a single file for one-time feedback without altering activation state.
React Compiler Marker: Check Once
- Preview Compiled Output: Preview the compiled output of the current file
React Compiler Marker: Preview Compiled Output
Configuration ⚙️
You can configure the extension via VSCode/Cursor settings:
reactCompilerMarker.successEmoji
Emoji marker to display next to components that were successfully memoized (Default: ✨, can be null)
{
"reactCompilerMarker.successEmoji": "✨"
}
reactCompilerMarker.errorEmoji
Emoji marker to display next to components that failed to be memoized (Default 🚫, can be null)
{
"reactCompilerMarker.errorEmoji": "🚫"
}
reactCompilerMarker.babelPluginPath
Path to the babel-plugin-react-compiler in your project. By default it's node_modules/babel-plugin-react-compiler.
{
"reactCompilerMarker.babelPluginPath": "node_modules/babel-plugin-react-compiler"
}
Known Issues 🐛
- Some rare edge cases of anonymous functions could fail to properly display tooltips.
- For files with a large number of React components, performance may degrade slightly during real-time updates.
Links
Enjoy Coding with React Compiler Marker ✨!
