Quick Finder

A lightweight, high-performance VS Code extension for Angular/TypeScript projects. It bridges the gap between your stylesheets, HTML templates, and TypeScript code — all accessible from a single right-click Quick Finder submenu.

Features at a Glance

Feature Details

1. Find HTML Usage

Right-click a CSS class name in a .scss or .css file and select Quick Finder → Find HTML Usage. A quick-pick list shows every HTML file in the workspace that references the selected class — including Angular [class.name] bindings and quoted class string patterns.

2. Go To Definition — F12

Press F12 on a CSS/SCSS selector to jump directly to its first usage in your HTML templates. Useful for navigating from a style rule straight to the markup it styles.

3. Find All References — Shift+F12

In CSS / SCSS files

Press Shift+F12 on a selector to list every HTML occurrence across the entire workspace — exact character positions, one click to navigate.

In TypeScript / TSX files (New)

Press Shift+F12 on any method name to find where it is called from parent components:

• Scans all other TypeScript files for .methodName( call-sites (catches this.childRef.methodName() in parent components)
• Scans all HTML templates for the method name (catches Angular template event bindings like (click)="child.methodName()")

Results appear alongside VS Code's built-in TypeScript references in the References panel.

4. Detect Hardcoded Colors — Workspace

Right-click inside any .scss or .css file → Quick Finder → Detect Hardcoded Colors (Workspace). Audits all stylesheets in the project and presents every hardcoded #HEX, rgb(), and rgba() value with its file path and line number. Click any result to jump to it.

5. Detect Hardcoded Colors in This File

Right-click → Quick Finder → Detect Hardcoded Colors in This File to scan only the currently open file. Shows results in a quick-pick with ↑↓ navigation, then jumps to and selects the color value.

6. Real-Time Color Highlighting

Automatically applied whenever you open or edit a .scss or .css file — no command needed. Every hardcoded color value is:

• Highlighted with an orange border and background
• Marked in the overview ruler (scrollbar gutter)
• Annotated with a hover tooltip suggesting you replace it with an SCSS variable or design token

7. Go to Parent Component Usage

Right-click on any method name in a TypeScript file → Quick Finder → Go to Parent Component Usage.

Quick Finder searches the entire workspace for places where that method is called outside the current file:

• Other TypeScript files — finds .methodName( call-sites, which covers parent components calling this.childRef.methodName()
• HTML templates — finds the method name word boundary, which covers Angular event bindings like (click)="child.methodName()"

Navigation behaviour

8. Add Access Modifiers to File

Open a TypeScript class file, right-click → Quick Finder → Add Access Modifiers to File. Quick Finder scans the entire workspace and applies the correct public, private, or protected modifier to every undecorated method.

Modifier inference rules

Private method auto-rename

When a method is determined to be private and does not already have an underscore prefix:

• The method declaration is renamed methodName → _methodName
• All this.methodName( call-sites within the same file are renamed to this._methodName(

Performance

All workspace files are loaded once in parallel, all analysis runs in-memory, and all edits are applied in a single batch — no repeated disk reads, no incremental saves.

Right-Click Submenu

All commands are grouped under a Quick Finder submenu in the editor context menu. The submenu only appears when the active file is a supported type:

• CSS / SCSS files → Find HTML Usage, Detect Hardcoded Colors (Workspace), Detect Hardcoded Colors in This File
• TypeScript / TSX files → Go to Parent Component Usage, Add Access Modifiers to File

Keyboard Shortcuts

Supported Languages

• CSS (.css)
• SCSS (.scss)
• TypeScript (.ts, .tsx)

Excluded Paths

All workspace scans automatically skip: node_modules, dist, .angular, build, out

Roadmap

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

Version History

v0.0.6

• Go to Parent Component Usage command — right-click a method in a child component and jump directly to where it is called in a parent component or HTML template
• Single result navigates immediately; multiple results shown in a quick-pick with file, line, and preview

v0.0.5

• All commands grouped under a single Quick Finder right-click submenu
• TypeScript Shift+F12 reference provider — finds method call-sites in parent components and HTML templates
• Private method auto-rename with _ prefix when adding access modifiers
• Access modifier command checks parent component TypeScript and HTML files

v0.0.4

• 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

v0.0.3

• Real-time hardcoded color highlighting with hover tooltips
• Detect Hardcoded Colors in current file command

v0.0.2

• Workspace-wide hardcoded color detection

v0.0.1

• Find HTML Usage command
• F12 Go To Definition for CSS/SCSS selectors
• Shift+F12 Find All References for CSS/SCSS selectors