Quick Finder

A lightweight, high-performance VS Code extension designed to streamline development by bridging the gap between your styles, templates, and TypeScript code.

Features

1. Smart Reference Navigation

• Go To HTML Usage: Right-click a class name in your SCSS/CSS file to instantly see a list of HTML files where that exact class is referenced.
• Go To Definition (F12): Press F12 on a style class to jump directly to its first usage in your HTML templates.
• Find All References (Shift + F12): Instantly trace and list every HTML reference of a style selector across your entire workspace.

2. Hardcoded Color Auditor

• Workspace Scanner: Run the Detect Hardcoded Colors command to audit your stylesheets. It displays every hardcoded color with its file path and line number.
• Current File Scanner: Quickly scan only the active SCSS/CSS file using the editor context menu.
• Real-Time Highlighting: Automatically highlights HEX, RGB, and RGBA color values with warning decorations and hover suggestions encouraging the use of design tokens or SCSS variables.

3. Automatic Access Modifier Generator NEW

Automatically adds missing access modifiers (public, private, protected) to TypeScript class methods using intelligent workspace analysis.

Smart Detection Rules

Quick Finder determines the appropriate modifier by analyzing your project:

• public

  • Angular lifecycle hooks (ngOnInit, ngOnDestroy, etc.)
  • Methods referenced in HTML templates
  • Methods called from other TypeScript classes

• protected

  • Methods accessed through super.method() in derived classes

• private

  • Methods with an underscore (_) prefix
  • Methods used only within their own class (this.method())

• Skipped

  • Constructor
  • Methods that already have an access modifier
  • Methods not referenced anywhere in the project

Performance Optimized

• Loads workspace files only once.
• Performs all analysis in memory.
• Applies all edits in a single batch for maximum speed.

How to Use

Finding HTML References

1. Open a .scss or .css file.
2. Place your cursor on a CSS class.
3. Use one of the following:
   • Press F12
   • Press Shift + F12
   • Right-click → Find HTML Usage

Detecting Hardcoded Colors

• Right-click inside a .scss or .css file.
• Select Detect Hardcoded Colors.

or

• Run Detect Hardcoded Colors from the Command Palette to scan the entire workspace.

Adding Access Modifiers

1. Open any TypeScript class file.
2. Open the Command Palette (Ctrl + Shift + P).
3. Run:

Quick Finder: Add Access Modifiers

Quick Finder will automatically analyze your workspace and insert the appropriate public, private, or protected modifiers where needed.

Upcoming Features (Roadmap)

• Multi-file hardcoded color detection for HTML and TypeScript.
• Ignore list for files such as variables.scss, theme.scss, and helper.scss.
• Unused SCSS selector detection.
• Improved Angular ngClass and dynamic class analysis.
• Support for standalone Angular templates and inline HTML.

Version

Current Version: 0.0.5

What's New in v0.0.5

• Automatic Access Modifier Generator for TypeScript
• Intelligent modifier inference (public, private, protected)
• High-performance workspace analysis with in-memory caching
• Batch editing for faster code updates