Frontend Docs Search - VSCode Extension
🚀 AI 驱动的前端文档智能搜索插件
一个强大的 VSCode 插件，为前端开发者提供智能的技术文档搜索功能。集成了语义搜索和关键词搜索，帮助你快速找到相关的前端技术文档。
✨ 主要特性
🧠 AI 智能搜索
- 语义搜索: 基于 TensorFlow.js Universal Sentence Encoder 的 AI 语义理解
- 关键词搜索: 传统的精确文本匹配搜索
- 混合搜索: 智能结合两种搜索方式，提供最佳结果
🎯 强大功能
- 多种搜索模式: 语义搜索、关键词搜索、混合搜索
- 分类筛选: 按技术栈（React、Vue、Angular等）快速过滤
- 搜索历史: 自动记录搜索历史，快速重复搜索
- 智能建议: 基于内容的搜索建议
- 高亮显示: 搜索结果中的关键词高亮
- 相关度评分: 显示搜索结果的相关度百分比
💻 优秀体验
- 快速搜索: 搜索响应时间 < 200ms
- 美观界面: 现代化的 webview 搜索结果展示
- 键盘快捷键:
Ctrl+Shift+F (macOS: Cmd+Shift+F) - 打开搜索Ctrl+Shift+D (macOS: Cmd+Shift+D) - 搜索选中文本
- 侧边栏: 按分类浏览所有文档
- 右键菜单: 选中文本右键直接搜索
📚 文档覆盖
当前版本包含以下前端技术的精选文档：
- React: Hooks、Context API、性能优化
- Vue: Composition API、响应式系统
- Angular: 组件、依赖注入
- JavaScript: async/await、Promises
- TypeScript: 接口、类型系统
- CSS: Flexbox、Grid 布局
- HTML: 语义化元素
- Node.js: 模块系统
- 构建工具: Webpack、Vite
🚀 快速开始
安装
- 在 VSCode 扩展市场搜索 "Frontend Docs Search"
- 点击安装
- 重启 VSCode（如果需要）
使用方法
基础搜索
- 按
Ctrl+Shift+F 打开搜索
- 输入你要搜索的内容
- 在弹出的搜索结果面板中浏览结果
- 点击任意结果打开对应的官方文档
搜索选中文本
- 在编辑器中选中任意文本
- 按
Ctrl+Shift+D 或右键选择 "Search Selected Text"
- 自动搜索选中的内容
浏览文档分类
- 在侧边栏找到 "Frontend Docs" 面板
- 展开任意技术分类
- 点击文档标题直接打开
查看搜索历史
- 打开命令面板 (
Ctrl+Shift+P)
- 输入 "Frontend Docs: Show Search History"
- 选择历史搜索记录重新搜索
⚙️ 设置配置
在 VSCode 设置中搜索 "Frontend Docs" 可以找到以下配置选项：
{
"frontendDocs.searchMode": "hybrid", // 默认搜索模式: semantic | keyword | hybrid
"frontendDocs.maxResults": 20, // 最大搜索结果数量 (5-100)
"frontendDocs.enableCache": true, // 启用搜索结果缓存
"frontendDocs.enableHistory": true // 启用搜索历史记录
}
🔧 开发 & 贡献
技术栈
- 核心: TypeScript + VSCode Extension API
- AI: TensorFlow.js + Universal Sentence Encoder
- 搜索: Fuse.js 模糊搜索
- 界面: HTML + CSS + Webview API
本地开发
# 克隆仓库
git clone https://github.com/your-username/frontend-docs-vscode-extension.git
cd frontend-docs-vscode-extension
# 安装依赖
npm install
# 编译代码
npm run compile
# 启动开发模式
# 按 F5 在新的 VSCode 窗口中运行插件
打包发布
# 打包为 .vsix 文件
npm run package
# 发布到市场（需要 publisher 账号）
npm run publish
🤝 贡献指南
我们欢迎各种形式的贡献！
报告问题
- 使用 GitHub Issues 报告 bug
- 请提供详细的复现步骤和环境信息
提交功能请求
- 描述期望的功能和使用场景
- 解释为什么这个功能对用户有价值
代码贡献
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature)
- 提交更改 (
git commit -m 'Add some AmazingFeature')
- 推送到分支 (
git push origin feature/AmazingFeature)
- 开启 Pull Request
文档贡献
- 改进现有文档内容
- 添加新的技术文档
- 翻译成其他语言
📊 性能指标
- 初始化时间: 2-5 秒（首次加载 AI 模型）
- 搜索响应: < 200ms（模型加载后）
- 内存使用: ~50MB（包含 AI 模型）
- 离线支持: ✅（模型加载后支持离线搜索）
🛠️ 故障排除
常见问题
Q: 插件初始化很慢？
A: 首次启动需要下载和加载 AI 模型，大约需要 2-5 秒。后续启动会更快。
Q: 搜索结果不准确？
A: 尝试使用不同的搜索模式，或者使用更具体的关键词。
Q: 插件占用内存较大？
A: 这是因为加载了 TensorFlow.js 和 AI 模型。如果内存有限，可以考虑只使用关键词搜索模式。
重置插件
如果遇到问题，可以通过以下方式重置：
- 命令面板执行 "Frontend Docs: Refresh Documentation"
- 或者重启 VSCode
📄 许可证
本项目采用 MIT 许可证
🙏 致谢
📞 联系我们
享受更智能的前端开发体验！ 🎉
| |
