React Compiler Marker ✨

react-compiler-marker is a VSCode/Cursor extension that shows which React components are optimized by the React Compiler

• ✨ = optimized
• 🚫 = failed (with tooltip explaining why)

Features 🌟

• 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:

1. Activate Decorations: Activates the markers for all relevant files in the current session.

   React Compiler Marker: Activate Extension
   

2. Deactivate Decorations: Deactivates the markers and clears them from the editor.

   React Compiler Marker: Deactivate Extension
   

3. Check Once (File-Specific Check): Analyzes a single file for one-time feedback without altering activation state.

   React Compiler Marker: Check Once
   

4. 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.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.

For More Information 🤝

• Learn about React Compiler and how it can improve your React app's performance.
• Submit issues or contribute via the GitHub Repository.

Links

• React Compiler Marker VSCode
• React Compiler Marker Open VSX

Enjoy Coding with React Compiler Marker ✨!