Smart Code Search

🔍 智能程式碼搜尋技能

使用 fd (檔案搜尋) 和 rg (內容搜尋) 工具的高效程式碼定位技能，協助 AI 快速分析專案結構和找到相關程式碼。

🎯 核心功能

📁 檔案搜尋 (fd)

• 快速定位: 根據檔案名稱模式快速找到檔案
• 類型篩選: 按副檔名、目錄結構篩選
• 智能排除: 自動排除 node_modules、.git 等無關目錄
• 模糊匹配: 支援部分檔名匹配

📝 內容搜尋 (rg)

• 程式碼片段: 搜尋特定函數、類別、變數
• 正規表達式: 支援複雜模式匹配
• 上下文顯示: 顯示匹配行前後的程式碼
• 多檔案搜尋: 跨檔案搜尋相關實作

🧠 AI 輔助

• 智能建議: 根據搜尋結果提供程式碼分析
• 關聯發現: 找到相關的檔案和函數
• 結構理解: 協助理解專案架構

🛠️ 使用方式

自然語言觸發

"搜尋所有包含 API 的 JavaScript 檔案"
"找到處理錯誤的程式碼"  
"查找 user 相關的 TypeScript 檔案"
"搜尋 database 連線設定"

基本檔案搜尋

# 搜尋特定名稱的檔案
fd "config" --type f

# 搜尋特定副檔名
fd -e js -e ts

# 搜尋目錄
fd "components" --type d

# 排除特定目錄
fd "*.js" --exclude node_modules

內容搜尋範例

# 搜尋函數定義
rg "function\s+\w+" --type js

# 搜尋類別定義  
rg "class\s+\w+" --type typescript

# 搜尋變數使用
rg "const\s+API_KEY" -C 3

# 搜尋錯誤處理
rg "(try|catch|throw)" --type js -A 2 -B 2

📋 常用搜尋模式

1. 🔍 快速檔案定位

場景: 需要找到特定功能的檔案

# 找到所有 API 相關檔案
fd -i api

# 找到測試檔案
fd -e test.js -e spec.js

# 找到配置檔案
fd "config|setting" --type f

2. 📝 程式碼片段搜尋

場景: 查找特定的函數或實作

# 搜尋所有 React 元件
rg "export\s+(default\s+)?function\s+\w+" --type tsx

# 搜尋 API 端點
rg "(app\.|router\.)(get|post|put|delete)" --type js

# 搜尋錯誤處理
rg "catch\s*\(" -A 5

3. 🏗️ 專案結構分析

場景: 理解專案架構和依賴關係

# 分析 import 結構
rg "import.*from" --type typescript -o

# 找到入口檔案
fd "index|main|app" --type f --max-depth 2

# 分析資料庫使用
rg "(sequelize|mongoose|prisma)" --type js

4. 🐛 問題診斷

場景: 快速定位錯誤和問題程式碼

# 搜尋 TODO 和 FIXME
rg "(TODO|FIXME|BUG)" -i

# 搜尋 console.log (除錯程式碼)
rg "console\.(log|error|warn)" --type js

# 搜尋已棄用的 API
rg "@deprecated|DEPRECATED" -i

🚀 智能工作流程

階段 1: 初步掃描

# 1. 了解專案結構
fd --type d --max-depth 2

# 2. 識別主要檔案類型
fd -e js -e ts -e py -e go | head -20

# 3. 找到配置和說明檔案  
fd "README|config|package" --type f

階段 2: 目標搜尋

# 根據需求搜尋特定內容
# 範例：查找使用者驗證相關程式碼

# 1. 找到相關檔案
fd -i "auth|user|login"

# 2. 搜尋相關函數
rg "(login|authenticate|authorize)" --type js -C 2

# 3. 分析實作
rg "passport|jwt|session" --type js

階段 3: 深度分析

# 分析找到的程式碼片段，提供：
# - 功能說明
# - 使用方式  
# - 相關檔案
# - 改善建議

📊 搜尋結果最佳化

提升搜尋精確度

# 使用更精確的模式
rg "\bfunction\s+(\w+)" --type js --only-matching

# 限制搜尋範圍
rg "API" --type js --glob "src/**/*"

# 排除測試檔案
rg "import" --type js --glob "!**/*test*" --glob "!**/*spec*"

結果格式化

# 顯示檔案名和行號
rg "error" --type js --with-filename --line-number

# 統計匹配數量
rg "TODO" --count-matches

# 只顯示檔案名
rg "component" --type tsx --files-with-matches

🎯 AI 協作模式

當 AI 使用此技能時的標準流程：

1. 🧠 需求理解

• 分析用戶查詢意圖
• 識別關鍵詞和搜尋目標
• 選擇適當的搜尋策略

2. 🔍 執行搜尋

• 使用 fd 定位相關檔案
• 使用 rg 搜尋程式碼內容
• 組合多個搜尋結果

3. 📝 結果分析

• 檢查找到的程式碼片段
• 理解程式碼功能和用途
• 識別相關的檔案和依賴

4. 💡 智能建議

• 提供程式碼說明
• 建議相關的檔案或函數
• 指出潛在的改善方向

⚡ 效率提升技巧

組合搜尋

# 先用 fd 找檔案，再用 rg 搜尋內容
fd -e js | xargs rg "function"

# 在特定檔案中搜尋
fd "component" --type f -x rg "props" {}

快速篩選

# 快速排除不需要的結果
rg "import" --type js | grep -v node_modules

# 只看特定目錄
fd --base-directory src -e tsx

結果快取

# 將常用搜尋結果儲存
fd -e js > js_files.txt
rg "function" --files-with-matches > functions.txt

🛡️ 安全和效能

搜尋限制

• 自動排除敏感目錄 (.git, node_modules, .env)
• 限制搜尋深度避免效能問題
• 檔案大小限制 (避免搜尋大型二進位檔案)

效能最佳化

• 使用適當的檔案類型篩選
• 優先搜尋常見的程式碼目錄
• 限制搜尋結果數量

📚 工具安裝

Windows (推薦方式)

# 使用 Chocolatey
choco install fd rg

# 或使用 Scoop
scoop install fd ripgrep

# 或手動下載
# fd: https://github.com/sharkdp/fd/releases
# rg: https://github.com/BurntSushi/ripgrep/releases

驗證安裝

fd --version
rg --version

🎨 範例使用場景

場景 1: 新專案探索

用戶: "這個專案的結構是什麼？" AI 搜尋:

fd --type d --max-depth 2  # 查看目錄結構
fd "README|package|config" --type f  # 找說明檔案
rg "main|entry" package.json  # 找入口點

場景 2: 功能實作查找

用戶: "用戶登入是怎麼實作的？" AI 搜尋:

fd -i "login|auth|user"  # 找相關檔案
rg "(login|authenticate)" --type js -C 3  # 找實作
rg "password|jwt|session" --type js  # 找認證方式

場景 3: 錯誤排查

用戶: "為什麼會出現這個錯誤？" AI 搜尋:

rg "error_message_keyword" -i  # 搜尋錯誤訊息
rg "(try|catch|throw)" --type js -A 3  # 找錯誤處理
fd "test|spec" --type f -x rg "error_scenario" {}  # 找測試

---

💡 使用提示

1. 先檔案後內容: 通常先用 fd 找到相關檔案，再用 rg 搜尋內容 2. 善用類型篩選: 指定檔案類型可大幅提升搜尋精確度 3. 組合關鍵詞: 使用多個相關關鍵詞提升搜尋覆蓋度 4. 上下文很重要: 使用 -A、-B、-C 參數查看程式碼上下文

自動觸發: 當您說「搜尋程式碼」、「查找檔案」、「找程式碼」等詞彙時，AI 會自動使用這個技能！

智能程式碼搜尋 - 實用範例

🎯 實際使用場景

場景 1: 專案初探

背景: 接手一個新的 React 專案，需要快速了解結構

# 1. 查看專案整體結構
fd --type d --max-depth 3

# 2. 找到主要入口檔案
fd "index" --type f --max-depth 2

# 3. 分析 package.json 了解依賴
rg "\"(react|next|typescript)\"" package.json

# 4. 找到主要元件目錄
fd "component" --type d -i

# 5. 查看路由設定
rg "(route|router)" --type jsx --type tsx -C 2

AI 分析結果:

📁 專案結構分析：
├── src/components/     # React 元件
├── src/pages/         # 頁面檔案  
├── src/utils/         # 工具函數
├── public/            # 靜態資源
└── package.json       # 依賴管理

🔧 技術棧：React 18 + TypeScript + Next.js
📍 入口檔案：src/index.tsx
🛣️ 路由方式：Next.js 檔案路由

場景 2: API 整合分析

背景: 需要了解專案如何與後端 API 互動

# 1. 找到 API 相關檔案
fd -i "api|service|client"

# 2. 搜尋 API 呼叫方式
rg "(fetch|axios|request)" --type js --type ts -C 2

# 3. 找到 API 端點定義
rg "(\/api\/|http:|https:)" --type js --type ts

# 4. 分析錯誤處理
rg "\.catch|try.*catch" --type js --type ts -A 3

# 5. 查看 API 金鑰管理
rg "(API_KEY|REACT_APP_|process\.env)" --type js --type ts

搜尋結果摘要:

🌐 API 整合方式：
- HTTP 客戶端：axios 
- 基礎 URL：https://api.example.com
- 認證方式：Bearer Token
- 錯誤處理：集中式錯誤攔截器
- 環境變數：REACT_APP_API_URL

場景 3: 效能問題排查

背景: 網站載入速度慢，需要找出潛在效能問題

# 1. 查找大型第三方套件使用
rg "(import.*from.*['\"](?:lodash|moment|antd)" --type js --type ts

# 2. 找到可能的記憶體洩漏
rg "(setInterval|setTimeout)" --type js --type ts -A 2

# 3. 搜尋未最佳化的圖片載入
rg "(<img|\.jpg|\.png|\.gif)" --type jsx --type tsx

# 4. 檢查 console.log (除錯程式碼)
rg "console\.(log|error|warn)" --type js --type ts

# 5. 找到重複渲染問題
rg "(useEffect.*\[\]|componentDidMount)" --type jsx --type tsx -C 2

效能分析報告:

🐌 發現的效能問題：
1. 大型套件：lodash 完整匯入 (建議使用 tree-shaking)
2. 圖片最佳化：發現 20+ 未壓縮圖片  
3. 除錯程式碼：12 個 console.log 未移除
4. 記憶體洩漏：3 個 setInterval 未清理

場景 4: 安全性稽核

背景: 檢查專案中的潛在安全問題

# 1. 搜尋硬編碼的敏感資料
rg "(password|secret|key|token).*[=:].*['\"][^'\"]{8,}" -i

# 2. 檢查 SQL 注入風險
rg "(SELECT|INSERT|UPDATE|DELETE).*\+.*" --type js --type ts

# 3. 找到 XSS 風險點
rg "(innerHTML|dangerouslySetInnerHTML)" --type jsx --type tsx

# 4. 檢查不安全的 HTTP 請求
rg "http://" --type js --type ts

# 5. 找到檔案上傳功能
rg "(upload|multer|formData)" --type js --type ts -C 2

安全性報告:

🔒 安全性檢查結果：
✅ 無硬編碼密碼
⚠️ 發現 3 個 http:// 連結 (建議改用 https)
⚠️ 2 個 dangerouslySetInnerHTML 使用 (需檢查輸入清理)
✅ 檔案上傳有適當驗證

場景 5: 程式碼品質檢查

背景: 檢查程式碼風格和最佳實踐遵循情況

# 1. 檢查 TypeScript 型別使用
rg ": any|as any" --type ts --type tsx

# 2. 找到過長的函數 (超過 20 行)
rg "function.*\{" --type js --type ts -A 25 | grep -E "(function|const.*=.*\{)" -A 25

# 3. 搜尋魔法數字
rg "[^a-zA-Z_][0-9]{2,}[^a-zA-Z_]" --type js --type ts

# 4. 檢查註解覆蓋率
rg "^[[:space:]]*(//|/\*|\*)" --type js --type ts | wc -l

# 5. 找到重複程式碼
rg "function.*\(" --type js --type ts | sort | uniq -d

品質報告:

📊 程式碼品質分析：
- TypeScript：89% 型別化 (11% 使用 any)
- 函數長度：平均 15 行 (2 個超過 30 行)  
- 註解覆蓋：23% (建議提升至 40%+)
- 魔法數字：發現 8 個 (建議使用常數)

🎨 高級搜尋技巧

組合搜尋模式

# 找到所有 React Hooks 使用
rg "use(State|Effect|Context|Memo|Callback|Ref)" --type jsx --type tsx

# 搜尋特定模式的函數定義
rg "^(export\s+)?(const\s+|function\s+)\w+.*=.*\(" --type js --type ts

# 找到所有 CSS-in-JS 使用
rg "(styled\.|css`|emotion)" --type js --type jsx -C 1

條件搜尋

# 搜尋包含特定文字但排除測試檔案
rg "API_ENDPOINT" --type js --glob "!**/*test*" --glob "!**/*spec*"

# 在特定目錄中搜尋
rg "component" --type tsx --glob "src/components/**/*"

# 搜尋最近修改的檔案中的內容
fd --changed-within 7d --type f -e js -e ts -x rg "TODO" {}

結果處理

# 統計各種檔案類型數量
fd -e js -e ts -e jsx -e tsx | xargs wc -l | sort -rn

# 找到最大的檔案
fd -e js -e ts -e jsx -e tsx -x wc -c {} + | sort -rn | head -10

# 分析 import 依賴
rg "import.*from.*['\"](\w+)" --type js --type ts -o | sort | uniq -c | sort -rn

💡 AI 協作最佳實踐

漸進式搜尋策略

1. 廣泛搜尋: 先找到相關檔案和目錄 2. 精確定位: 使用具體關鍵詞搜尋 3. 上下文分析: 查看程式碼前後脈絡 4. 關聯探索: 找到相關的函數和模組

結果解釋範本

🔍 搜尋結果：[檔案數量] 個檔案，[匹配數量] 個匹配

📁 相關檔案：
- file1.js - [簡短描述]
- file2.ts - [簡短描述]

💡 關鍵發現：
- [重要發現 1]
- [重要發現 2]

🔗 相關程式碼：
[程式碼片段或位置]

📋 建議行動：
- [建議 1]
- [建議 2]

常見問題解決

問題: "找不到檔案" 解決:

# 檢查檔案是否存在
fd -u "filename"  # 包含隱藏檔案

# 檢查大小寫敏感
fd -i "filename"  # 忽略大小寫

問題: "搜尋結果太多" 解決:

# 限制搜尋範圍
rg "pattern" --max-count 20

# 使用更精確的模式
rg "\bexact_word\b" --type js

問題: "搜尋太慢" 解決:

# 限制搜尋深度
fd "pattern" --max-depth 5

# 排除大型目錄
rg "pattern" --glob "!node_modules" --glob "!dist"

智能搜尋模式範本

🎯 常用檢索模式

檔案搜尋模式 (fd)

基本檔案類型

# JavaScript/TypeScript 檔案
fd -e js -e ts -e jsx -e tsx

# 樣式檔案  
fd -e css -e scss -e less -e styled

# 配置檔案
fd "(config|setting|env)" --type f

# 文檔檔案
fd -e md -e txt -e doc

# 圖片檔案
fd -e jpg -e png -e svg -e gif

專案結構檢索

# 元件目錄
fd "component|widget|ui" --type d

# 頁面/路由目錄
fd "page|route|view" --type d

# 工具/輔助目錄  
fd "util|helper|lib|tool" --type d

# 測試目錄
fd "test|spec|__test__|__spec__" --type d

# 建置/部署目錄
fd "build|dist|deploy|output" --type d

特殊檔案搜尋

# 入口檔案
fd "^(index|main|app|entry)" --type f

# README 和說明檔案
fd "^(README|CHANGELOG|LICENSE)" --type f

# 環境設定
fd "^\.env|^config\." --type f

# 封裝管理檔案
fd "(package\.json|yarn\.lock|pnpm-lock)" --type f

內容搜尋模式 (rg)

函數和方法檢索

# JavaScript 函數定義
rg "function\s+\w+\s*\(" --type js

# Arrow 函數
rg "(const|let|var)\s+\w+\s*=\s*\(" --type js

# TypeScript 型別定義
rg "(interface|type|enum)\s+\w+" --type ts

# 類別定義
rg "class\s+\w+(\s+extends)?" --type js --type ts

# React 元件
rg "(export\s+)?(default\s+)?function\s+[A-Z]\w*" --type jsx --type tsx

API 和網路相關

# HTTP 請求
rg "(fetch|axios|request)\s*\(" --type js --type ts

# API 端點
rg "(\/api\/|\/v\d+\/)" --type js --type ts

# 環境變數
rg "process\.env\.\w+" --type js --type ts

# 錯誤處理
rg "(catch|error|exception)" --type js --type ts -C 2

# 狀態管理
rg "(useState|useReducer|setState)" --type jsx --type tsx

資料庫和存儲

# SQL 查詢
rg "(SELECT|INSERT|UPDATE|DELETE)" --type js --type ts

# MongoDB 查詢
rg "(find|findOne|insert|update|remove)" --type js

# Redis 操作
rg "(set|get|del|expire|incr)" --type js

# 本地存儲
rg "(localStorage|sessionStorage|cookie)" --type js

安全性檢查模式

# 敏感資料
rg "(password|secret|token|key)\s*[=:]\s*['\"][^'\"]{8,}" -i

# XSS 風險
rg "(innerHTML|dangerouslySetInnerHTML)" 

# CSRF 相關
rg "(csrf|xsrf)" -i

# 輸入驗證
rg "(validate|sanitize|escape)" --type js --type ts

🔧 進階搜尋技巧

組合搜尋

# 搜尋檔案後在其中查找內容
fd -e js | xargs rg "function"

# 在特定檔案中搜尋多個模式
fd "component" --type f -x rg "(props|state)" {}

# 搜尋並統計
rg "TODO" --count | sort -rn

條件篩選

# 排除測試檔案
rg "import" --glob "!**/*test*" --glob "!**/*spec*"

# 只搜尋 src 目錄
rg "function" --glob "src/**/*"

# 搜尋最近修改的檔案
fd --changed-within 7d -e js -x rg "pattern" {}

輸出格式化

# 顯示行號和檔案名
rg "pattern" --line-number --with-filename

# 只顯示匹配的部分
rg "function\s+(\w+)" --only-matching

# 統計模式
rg "pattern" --count-matches

# JSON 格式輸出
rg "pattern" --json

📊 專案分析範本

React/Next.js 專案

# 1. 專案結構概覽
echo "📁 專案結構分析"
fd --type d --max-depth 2

# 2. 技術棧分析  
echo "🔧 技術棧檢查"
rg "(react|next|typescript)" package.json

# 3. 元件分析
echo "🎨 元件結構"
fd "component" --type d
rg "export.*function.*[A-Z]" --type jsx --type tsx

# 4. 路由分析
echo "🛣️ 路由檢查"
rg "(useRouter|Router|route)" --type js --type jsx

# 5. 狀態管理
echo "📦 狀態管理"
rg "(useState|useContext|redux|zustand)" --type js --type jsx

Node.js API 專案

# 1. API 架構
echo "🌐 API 結構分析"
fd "(route|controller|middleware)" --type d

# 2. 端點檢查
echo "📡 API 端點"
rg "(app|router)\.(get|post|put|delete)" --type js

# 3. 資料庫連線
echo "💾 資料庫設定"
rg "(mongoose|sequelize|prisma|knex)" --type js

# 4. 中介軟體分析
echo "🔧 中介軟體"
rg "(middleware|use\()" --type js

# 5. 錯誤處理
echo "🚨 錯誤處理"
rg "(try.*catch|error.*handler)" --type js -C 2

Python Django 專案

# 1. 應用結構
echo "🐍 Django 專案結構"
fd "models|views|urls" --type f

# 2. 模型分析
echo "📊 資料模型"
rg "class.*\(models\.Model\)" --type py

# 3. 視圖函數
echo "👁️ 視圖分析"
rg "def.*\(request" --type py

# 4. URL 路由
echo "🔗 URL 配置"
rg "path\(|url\(" --type py

# 5. 設定檔案
echo "⚙️ 專案設定"
rg "DATABASES|SECRET_KEY|DEBUG" --type py

🎨 自定義搜尋模式

建立專案特定別名

# 在 ~/.bash_profile 或 ~/.zshrc 中添加

# 快速檔案搜尋
alias fjs="fd -e js -e jsx -e ts -e tsx"
alias fcss="fd -e css -e scss -e sass -e less"
alias fimg="fd -e jpg -e png -e svg -e gif"

# 快速內容搜尋  
alias rjs="rg --type js --type jsx --type ts --type tsx"
alias rcss="rg --type css --type scss"
alias rmd="rg --type md"

# 專案特定搜尋
alias findc="fd component --type d"
alias findapi="rg 'api|endpoint' --type js"
alias findtest="fd test --type d"

搜尋腳本範本

#!/bin/bash
# project-analyzer.sh - 專案分析腳本

analyze_project() {
    echo "🔍 開始分析專案..."
    
    # 基本結構
    echo "📁 目錄結構："
    fd --type d --max-depth 3 | head -20
    
    # 檔案類型統計
    echo -e "\n📊 檔案類型統計："
    fd --type f | grep -oE '\.[^.]+$' | sort | uniq -c | sort -rn | head -10
    
    # 程式碼行數統計
    echo -e "\n📏 程式碼行數："
    fd -e js -e ts -e jsx -e tsx | xargs wc -l | tail -1
    
    # 依賴分析
    echo -e "\n📦 主要依賴："
    if [ -f "package.json" ]; then
        rg '"[^"]+":' package.json | head -10
    fi
    
    # 待辦事項
    echo -e "\n✅ 待辦事項："
    rg "(TODO|FIXME|BUG)" -i --count || echo "無待辦事項"
}

# 執行分析
analyze_project

🎯 搜尋策略指南

從廣泛到精確

# 第一步：廣泛搜尋
fd "user" --type f

# 第二步：縮小範圍  
fd "user" --type f --glob "src/**/*"

# 第三步：精確搜尋
rg "function.*user" --type js --glob "src/**/*"

# 第四步：上下文分析
rg "function.*user" --type js -C 3

問題導向搜尋

# 問題：找不到登入功能
# 策略：多關鍵詞搜尋
rg "(login|signin|auth)" --type js -i
fd "(login|auth)" --type d -i

# 問題：API 回應太慢
# 策略：找效能相關程式碼  
rg "(timeout|delay|sleep)" --type js
rg "(Promise|async|await)" --type js | grep -E "(all|race)"

# 問題：記憶體洩漏
# 策略：找事件監聽和定時器
rg "(addEventListener|setInterval|setTimeout)" --type js
rg "(removeEventListener|clearInterval|clearTimeout)" --type js

這些模式和範本可以大幅提升程式碼搜尋的效率和準確性！