🧩 Component Finder

Component Finder is a powerful VS Code extension that allows you to quickly locate where and how many times a specific component is used across React, Vue, Angular, TypeScript or JavaScript projects.

🔍 Ideal for developers working on large codebases who need insight into component usage distribution.

🚀 Features

• 🔍 Fast search by component name
• 📄 Lists all files where the component is used
• 🧠 Highlights exact lines of usage
• 🛠️ Supports multiple languages and frameworks
  • React (JSX/TSX)
  • Vue (Single File Components)
  • Angular (kebab-case selectors)
  • Plain HTML
• 📁 Multi-folder workspace support
• 📌 Case-sensitive matching to distinguish components from native HTML tags

📸 Screenshots

Default VSCode search:

See the extension in action:

⚙️ How to Use

1. Press Ctrl+Shift+P ou Cmd+Shift+P to open the Command Palette.
2. Type and select: Component Finder: Check component usage.
3. Entre the component name (e.g. MyComponent or app-header).
4. The side panel will display the files and lines where the component is used.

✅ You don’t need to open a file to use the plugin!

🧠 Naming Rules

• PascalCase: For React and Vue (e.g. MyComponent)
• kebab-case: For Angular (e.g. app-header)
• The plugin distinguishes between custom components and standard HTML elements like <footer>, <header>, etc.

📦 Installation

Visit the Visual Studio Code Marketplace and search for Component Finder
Or install directly via VS Code:

ext install componentfinder.component-finder

👨‍💻 Development

Clone the project:

git clone https://github.com/douglaslira/component-finder.git
cd component-finder
npm install
npm run watch

Run in development mode in VS Code (F5).

🧪 Tested With

• Visual Studio Code 1.70+
• Node.js 16+
• Projects using React, Vue 2/3, Angular, HTML and TS

🏷️ License

MIT © Douglas Lira

🤝 Contribuições

Pull requests são bem-vindos! Sinta-se à vontade para sugerir melhorias, novos recursos ou relatar bugs.

💡 Inspiration

Created to make life easier for developers dealing with large frontend projects who need visibility into their components.

🧩 Component Finder — Find it. Understand it. Refactor it.

🧩 Component Finder

Component Finder é uma extensão poderosa para o VS Code que permite localizar rapidamente onde e quantas vezes um determinado componente está sendo utilizado em projetos React, Vue, Angular, TypeScript ou JavaScript.

🔍 Ideal para desenvolvedores que trabalham em grandes bases de código e precisam entender a distribuição de uso de seus componentes.

🚀 Funcionalidades

• 🔍 Busca rápida por nome de componente
• 📄 Lista todos os arquivos onde o componente é usado
• 🧠 Destaque das linhas exatas de uso
• 🛠️ Suporte para múltiplas linguagens e frameworks
  • React (JSX/TSX)
  • Vue (Single File Components)
  • Angular (kebab-case selectors)
  • HTML puro
• 📁 Suporte a workspaces com múltiplas pastas
• 📌 Case-sensitive para distinguir componentes de tags HTML nativas

📸 Capturas de Tela

Pesquisa padrão do VSCode:

Veja a extensão em ação:

⚙️ Como Usar

1. Pressione Ctrl+Shift+P ou Cmd+Shift+P para abrir o Command Palette.
2. Digite e selecione: Component Finder: Check component usage.
3. Digite o nome do componente (e.g. MyComponent ou app-header).
4. O painel lateral mostrará os arquivos e as linhas onde o componente é utilizado.

✅ Não é necessário abrir um arquivo para usar o plugin!

🧠 Regras de Nomeação

• PascalCase: Para React e Vue (e.g. MyComponent)
• kebab-case: Para Angular (e.g. app-header)
• O plugin diferencia entre componentes personalizados e elementos HTML padrão como <footer>, <header>, etc.

📦 Instalação

Acesse a Visual Studio Code Marketplace (em breve) e procure por Component Finder
Ou instale diretamente via VS Code:

ext install componentfinder.component-finder

👨‍💻 Desenvolvimento

Clone o projeto:

git clone https://github.com/douglaslira/component-finder.git
cd component-finder
npm install
npm run watch

Execute no modo de desenvolvimento no VS Code (F5).

🧪 Testado com

• Visual Studio Code 1.70+
• Node.js 16+
• Projetos em React, Vue 2/3, Angular, HTML e TS

🏷️ Licença

MIT © Douglas Lira

🤝 Contribuições

Pull requests são bem-vindos! Sinta-se à vontade para sugerir melhorias, novos recursos ou relatar bugs.

💡 Inspiração

Criado para facilitar a vida de desenvolvedores que lidam com grandes projetos de frontend e precisam de visibilidade sobre seus componentes.

🧩 Component Finder — Encontre. Entenda. Refatore.