Hooked 🪝 - VS Code Extension
Hooked is a Visual Studio Code extension that analyzes React hooks in your project and generates a visual representation of their dependencies.
Features
- Analyzes custom React hooks in your project
- Generates a Mermaid diagram showing hook dependencies
- Copies the Mermaid diagram code to your clipboard
- Zoom in and out of the diagram
- Pan around the diagram
- Take a screenshot of the diagram
Installation
- Open Visual Studio Code
- Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X on macOS)
- Search for
Hooked
- Click Install
Usage
- Open a React project in VS Code
- Open a file containing React hooks
- Run the "Analyze hooks" command from the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS)
- The extension will analyze the hooks and display a Mermaid diagram in a new webview panel
- The Mermaid diagram code will be copied to your clipboard
Requirements
- Visual Studio Code version 1.93.0 or higher
Extension Settings
This extension doesn't add any VS Code settings.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature)
- Commit your changes (
git commit -m 'Add some AmazingFeature')
- Push to the branch (
git push origin feature/AmazingFeature)
- Open a Pull Request
License
This project is licensed under the MIT License.
Acknowledgements
Enjoy using Hooked!
| |
