Component Keyword Search

A VS Code extension that lets you search for keywords across all locally imported React components from the currently open file.

Features

• 🔍 Smart keyword search — searches all imported local components (.tsx, .ts, .jsx, .js) from your current file
• ⚡ Keyboard shortcut — trigger instantly with Ctrl+Shift+F7 (Windows/Linux) or Cmd+Shift+F7 (Mac)
• 🎯 Both exact & partial matches — exact word-boundary matches highlighted in yellow, partial matches in blue
• 📋 Rich results panel — shows full line content, line number, and which component each match belongs to
• 🖱️ Click to navigate — click any result to jump directly to that line in the file
• 📦 Grouped by component — results are organized per imported component with match counts

Usage

1. Open any React component file (.tsx / .jsx)
2. Place your cursor on a keyword or select text
3. Press Ctrl+Shift+F7 (Mac: Cmd+Shift+F7)
4. If no text is selected, a prompt will ask you to type a keyword
5. A panel opens beside your editor showing all matches across imported components

Setup

Prerequisites

• Node.js 16+
• VS Code 1.85+

Install & Run

How It Works

1. Parses all import ... from './...' statements in the active file
2. Resolves relative paths to actual files on disk (tries .tsx, .ts, .jsx, .js, and index.* variants)
3. Scans each resolved file line-by-line for the keyword
4. Distinguishes exact (whole-word boundary) vs partial (substring) matches
5. Displays results grouped by component in a styled WebView panel

Keyboard Shortcuts

You can customize the shortcut in File → Preferences → Keyboard Shortcuts by searching for Component Keyword Search.

Developed by Vishal R Savlani