ReferenceX

A VS Code extension that shows inline reference counts for TypeScript/JavaScript functions, methods, and classes - helping you identify unused code and understand your codebase at a glance.

Features

• Inline Reference Counts - See how many times each symbol is referenced, right where it's defined
• Variable Tracking - Optionally track references for variables and constants (including exports)
• Two Display Modes - Choose between inline (end of line) or CodeLens (above line) display
• Color-Coded Indicators - Visual feedback based on usage frequency
• Real-Time Updates - Automatically refreshes as you code
• Smart Detection - Works with functions, methods, classes, interfaces, and type aliases
• Clickable References - Click any count to view all references
• Highly Customizable - Configure display, colors, and behavior to your preference

Display Modes

Inline Mode (Default)

Reference counts appear at the end of the line - clean and unobtrusive:

function calculateTotal(items: Item[]) {  ● 12 refs
  return items.reduce((sum, item) => sum + item.price, 0);
}

class UserService {  ● 5 refs
  async getUser(id: string) {  ● 8 refs
    // implementation
  }
}

const unusedHelper = () => {  ○ 0 refs
  // This function is never used!
};

CodeLens Mode

Traditional CodeLens display above each symbol:

● 12 references
function calculateTotal(items: Item[]) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

● 5 references
class UserService {
  ● 8 references
  async getUser(id: string) {
    // implementation
  }
}

○ 0 references
const unusedHelper = () => {
  // This function is never used!
};

Color Coding

When enabled, reference counts are color-coded for quick visual feedback:

• 0 references - Unused code (gray)
• 1 reference - Single usage (blue)
• 2-4 references - Normal usage (green)
• 5-9 references - Popular (yellow)
• 10+ references - Heavily used (orange/red)

Configuration

Customize ReferenceX to match your workflow:

Example Configuration

{
  "referencex.displayMode": "inline",
  "referencex.decorateWithColor": true,
  "referencex.showZeroReferences": true,
  "referencex.onlyShowZeroReferences": false,
  "referencex.showVariables": false,
  "referencex.excludeTests": false,
  "referencex.colors.zero": "#858585",
  "referencex.colors.lots": "#FF6B6B"
}

Tip: Set onlyShowZeroReferences: true to only highlight dead code!
Tip: Customize colors to match your theme using any hex color code.

Usage

1. Install the extension
2. Open any TypeScript or JavaScript file
3. Reference counts will automatically appear next to your functions, classes, and methods
4. Click on any reference count to view all references in the references panel
5. Configure settings via VS Code preferences (Ctrl/Cmd + , → search "ReferenceX")

Supported Languages

• TypeScript (.ts)
• JavaScript (.js)
• TypeScript React (.tsx)
• JavaScript React (.jsx)

What Gets Detected

• Functions (regular and arrow)
• Class declarations
• Methods (including getters/setters)
• Interfaces
• Type aliases
• Constructors
• Variables and constants (when showVariables is enabled)

Use Cases

• Find Dead Code - Quickly identify unused functions and classes
• Refactoring - Understand impact before making changes
• Code Review - Spot over-used or under-used code patterns
• Learning Codebases - See which functions are central to the project
• API Design - Identify heavily-used public APIs

Requirements

• VS Code 1.85.0 or higher
• TypeScript/JavaScript language support (built into VS Code)

License

MIT

Issues & Feedback

Found a bug or have a feature request? Open an issue on GitHub

Credits

Created by Peckage

Enjoy cleaner, more maintainable code with ReferenceX!