Find All References (Wooref)

A VSCode extension that provides intuitive reference finding with hover links and CodeLens, bringing WebStorm-like experience to VSCode.
✨ Features
- 🎯 Smart Hover Links: Show "Find All References" link when hovering over symbols
- 📁 File Reference CodeLens: Display "🔍 Find File References" at the beginning of files
- 🔘 Always-Visible Toolbar Button: File references button shows immediately when opening files
- ⌨️ Keyboard Shortcuts: Quick access with configurable keybindings
- 🌐 Multi-language Support: TypeScript, JavaScript, Vue, React and more
- ⚙️ Highly Configurable: Enable/disable features and customize supported languages
- 📊 Enhanced Debug Output: Detailed logging in output channel for troubleshooting
🚀 Quick Start
Method 1: Hover Links (Recommended)
- Hover your mouse over any symbol (variable, function, class, etc.)
- Click the "Find All References" link in the hover tooltip
- View all references in the References panel (uses
references-view.findReferences
)
Method 2: File CodeLens
- Open any supported file (TypeScript, JavaScript, Vue, etc.)
- Look for the "🔍 Find File References" link at the top of the file (line 1)
- Click it to view all file references using TypeScript's file reference finder
- The references button now appears immediately when you open a file from the sidebar
- No need to click into the editor to focus it first
- Click the button in the editor toolbar for instant file references
Method 4: Keyboard Shortcuts
- Symbol References:
Ctrl+Alt+F12
(Mac: Cmd+Alt+F12
)
- File References:
Ctrl+Shift+F12
(Mac: Cmd+Shift+F12
)
🔧 Configuration
Configure the extension behavior in your VSCode settings:
{
"findAllReferences.supportedLanguages": [
"typescript",
"javascript",
"typescriptreact",
"javascriptreact",
"vue"
],
"findAllReferences.enableCodeLens": true,
"findAllReferences.enableHover": true
}
Configuration Options
Setting |
Type |
Default |
Description |
findAllReferences.supportedLanguages |
array |
["typescript", "javascript", "typescriptreact", "javascriptreact", "vue"] |
List of supported language types for finding references |
findAllReferences.enableCodeLens |
boolean |
true |
Enable CodeLens to show 'Find File References' at the top of files |
findAllReferences.enableHover |
boolean |
true |
Enable hover links to show 'Find All References' when hovering over symbols |
VSCode CodeLens Settings
Make sure CodeLens is enabled in your VSCode settings:
{
"editor.codeLens": true,
"typescript.referencesCodeLens.enabled": true,
"javascript.referencesCodeLens.enabled": true
}
🛠️ Technical Implementation
Symbol Reference Finding
- Hover Provider: Detects symbols at hover position and shows clickable link
- Command:
findAllReferences.findReferences
- Implementation: Calls VSCode's built-in
references-view.findReferences
command
- Parameters: Passes document URI and position from hover or cursor location
File Reference Finding
- CodeLens Provider: Shows "🔍 Find File References" link at the beginning of each file
- Toolbar Button: Always visible when files are open (no focus required)
- Command:
findAllReferences.findFileReferences
- Implementation: Calls TypeScript extension's
typescript.findAllFileReferences
command
- Scope: Finds all import/require statements referencing the current file
Key Features
- Smart Parameter Passing: Hover links pass exact position to reference finder
- Language Filtering: Only activates for configured language types
- Configurable Components: Enable/disable CodeLens and Hover independently
- Immediate Toolbar Access: Button shows instantly when opening files
- Fallback Handling: Graceful error handling when commands are unavailable
- Enhanced Debug Logging: Comprehensive output channel logging for troubleshooting
🎯 Use Cases
TypeScript/JavaScript Development
// Hover over 'myFunction' to see reference link
function myFunction() {
return 'Hello World';
}
// Click "🔍 Find File References" CodeLens at top of file to see all imports
Vue Component Development
<!-- TestComponent.vue -->
<template>
<div>My Component</div>
</template>
<!-- Click "🔍 Find File References" to see where this component is imported -->
React Development
// Hover over component names, props, or functions
const MyComponent = () => {
return <div>Hello</div>;
};
📋 Requirements
- VSCode: 1.74.0 or higher
- TypeScript Extension: For file reference finding (usually pre-installed)
- References View: For symbol reference display (built into VSCode)
🐛 Debugging & Troubleshooting
The extension provides detailed logging in the "Find All References" output channel:
- Open Command Palette (
Ctrl+Shift+P
)
- Run "View: Toggle Output"
- Select "Find All References" from the dropdown
- View detailed logs of hover events, command executions, and errors
Common Issues
CodeLens not showing?
- Check that
editor.codeLens
is true
in VSCode settings
- Verify
findAllReferences.enableCodeLens
is true
- Check the output channel for language support messages
Hover links not working?
- Ensure
findAllReferences.enableHover
is true
- Check if your file language is in
supportedLanguages
- Look for hover events in the output channel
Toolbar button not appearing immediately?
- This should now work automatically after the latest update
- The button appears as soon as you open a file, no focus required
🔄 Commands
Command |
Description |
Keybinding |
findAllReferences.findReferences |
Find symbol references at cursor/hover position |
Ctrl+Alt+F12 |
findAllReferences.findFileReferences |
Find all references to current file |
Ctrl+Shift+F12 |
- Lightweight: Only activates for configured language types
- Efficient: Leverages VSCode's built-in language services
- Non-blocking: Asynchronous command execution
- Memory-friendly: Minimal memory footprint with proper cleanup
- Configurable: Disable unused features to reduce overhead
🤔 Why This Extension?
Problems Solved
- Context Switching: No need to remember keyboard shortcuts or menu locations
- Precision: Hover links work at exact symbol positions
- Discoverability: CodeLens makes file references visible and accessible
- Immediate Access: Toolbar button works instantly when opening files
- Consistency: Unified interface for both symbol and file references
Design Philosophy
- Don't Reinvent: Uses VSCode's powerful built-in reference finding
- Enhance UX: Makes existing features more discoverable and accessible
- Stay Lightweight: Minimal code, maximum functionality
- Be Configurable: Users control what features they want
- Be Reliable: Comprehensive error handling and logging
🔄 Release Notes
1.1.0 (Latest)
- 🔘 Improved Toolbar Button: Now shows immediately when opening files (no focus required)
- ⚙️ Enhanced Configuration: Added
enableCodeLens
and enableHover
options
- 🎨 Better CodeLens: Improved title with emoji and tooltip
- 📊 Enhanced Debugging: More detailed output channel logging
- 🚀 Better Activation: Added
onStartupFinished
activation event
- 🔧 Resolve Support: Added CodeLens resolve method for better reliability
1.0.1
- 🕙 Optimize the display timing of buttons
1.0.0
- 🎯 Hover Provider for symbol references with clickable links
- 📁 CodeLens Provider for file references at document start
- ⌨️ Keyboard shortcuts for both symbol and file references
- 🌐 Multi-language support with configurable language list
- 📊 Debug output channel for troubleshooting
📝 License
MIT License - see LICENSE file for details.
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
🐛 Issues
Found a bug or have a feature request? Please open an issue on GitHub.
⭐ Support
If you find this extension helpful, please consider:
- ⭐ Starring the repository
- 📝 Leaving a review on the marketplace
- 🐛 Reporting bugs or suggesting features
Enjoy enhanced reference finding in VSCode! 🚀