[{"data":1,"prerenderedAt":215},["ShallowReactive",2],{"content-/blog/vscode-extensions":3,"related-blog":190},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"keywords":10,"author":11,"date":12,"category":13,"image":14,"body":15,"_type":184,"_id":185,"_source":186,"_file":187,"_stem":188,"_extension":189},"/blog/vscode-extensions","blog",false,"","VS Code 插件推荐","提升开发效率的必备 VS Code 插件和配置技巧","VS Code 插件推荐, Blog, HTMLPAGE","HTMLPAGE","2025-11-26","待分类","/content-images/blog/blog.jpg",{"type":16,"children":17,"toc":174},"root",[18,26,32,42,47,55,61,66,71,89,94,132,137,158,162],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","VS Code 扩展能提升开发者体验。本文列出对前端开发特别有帮助的扩展与配置建议。",{"type":19,"tag":27,"props":28,"children":30},"h3",{"id":29},"推荐扩展",[31],{"type":24,"value":29},{"type":19,"tag":33,"props":34,"children":35},"ul",{},[36],{"type":19,"tag":37,"props":38,"children":39},"li",{},[40],{"type":24,"value":41},"ESLint、Prettier、Vetur/Volar、Vue/React 工具集、GitLens。",{"type":19,"tag":27,"props":43,"children":45},{"id":44},"配置建议",[46],{"type":24,"value":44},{"type":19,"tag":33,"props":48,"children":49},{},[50],{"type":19,"tag":37,"props":51,"children":52},{},[53],{"type":24,"value":54},"在工作区级别统一配置格式化与 lint 规则，并使用 EditorConfig 保证跨编辑器一致性。",{"type":19,"tag":56,"props":57,"children":59},"h2",{"id":58},"初步纲要",[60],{"type":24,"value":58},{"type":19,"tag":20,"props":62,"children":63},{},[64],{"type":24,"value":65},"VS Code 扩展是增强开发体验与集成编辑器能力的强力手段。本文概述扩展架构、语言服务器协议 (LSP) 的使用场景、以及打包发布流程。",{"type":19,"tag":56,"props":67,"children":69},{"id":68},"扩展类型与场景",[70],{"type":24,"value":68},{"type":19,"tag":33,"props":72,"children":73},{},[74,79,84],{"type":19,"tag":37,"props":75,"children":76},{},[77],{"type":24,"value":78},"主题/片段扩展：提高编辑器可用性与样式支持。",{"type":19,"tag":37,"props":80,"children":81},{},[82],{"type":24,"value":83},"功能扩展：提供命令、侧边栏、树视图与自定义编辑器。",{"type":19,"tag":37,"props":85,"children":86},{},[87],{"type":24,"value":88},"LSP 扩展：为语言服务（自动完成、诊断）提供后端支持，便于跨编辑器复用。",{"type":19,"tag":56,"props":90,"children":92},{"id":91},"基本架构与调试",[93],{"type":24,"value":91},{"type":19,"tag":33,"props":95,"children":96},{},[97,119],{"type":19,"tag":37,"props":98,"children":99},{},[100,102,109,111,117],{"type":24,"value":101},"使用 Yeoman 或 ",{"type":19,"tag":103,"props":104,"children":106},"code",{"className":105},[],[107],{"type":24,"value":108},"@vscode/vsce",{"type":24,"value":110}," 初始化扩展模板，利用 ",{"type":19,"tag":103,"props":112,"children":114},{"className":113},[],[115],{"type":24,"value":116},"vscode",{"type":24,"value":118}," API 注册命令与视图。",{"type":19,"tag":37,"props":120,"children":121},{},[122,124,130],{"type":24,"value":123},"在开发时使用 ",{"type":19,"tag":103,"props":125,"children":127},{"className":126},[],[128],{"type":24,"value":129},"Extension Development Host",{"type":24,"value":131}," 进行断点调试与日志排查。",{"type":19,"tag":56,"props":133,"children":135},{"id":134},"发布与兼容性",[136],{"type":24,"value":134},{"type":19,"tag":33,"props":138,"children":139},{},[140,153],{"type":19,"tag":37,"props":141,"children":142},{},[143,145,151],{"type":24,"value":144},"使用 ",{"type":19,"tag":103,"props":146,"children":148},{"className":147},[],[149],{"type":24,"value":150},"vsce",{"type":24,"value":152}," 打包并发布到 Marketplace，管理版本与依赖。",{"type":19,"tag":37,"props":154,"children":155},{},[156],{"type":24,"value":157},"对于 TypeScript 编写的扩展，构建步骤应包含类型检查与最小化打包。",{"type":19,"tag":159,"props":160,"children":161},"hr",{},[],{"type":19,"tag":20,"props":163,"children":164},{},[165,167,172],{"type":24,"value":166},"相关链接与示例：官方扩展模版、LSP 示例仓库与 ",{"type":19,"tag":103,"props":168,"children":170},{"className":169},[],[171],{"type":24,"value":150},{"type":24,"value":173}," 打包指南。",{"title":7,"searchDepth":175,"depth":175,"links":176},3,[177,178,179,181,182,183],{"id":29,"depth":175,"text":29},{"id":44,"depth":175,"text":44},{"id":58,"depth":180,"text":58},2,{"id":68,"depth":180,"text":68},{"id":91,"depth":180,"text":91},{"id":134,"depth":180,"text":134},"markdown","content:blog:vscode-extensions.md","content","blog/vscode-extensions.md","blog/vscode-extensions","md",[191,199,207],{"_path":192,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":193,"description":194,"keywords":195,"author":11,"date":12,"category":13,"image":14,"_type":184,"_id":196,"_source":186,"_file":197,"_stem":198,"_extension":189},"/blog/2025-q1-updates","2025 Q1 产品更新","第一季度重大功能发布：AI 生成优化、新模板上线、编辑器增强等","2025 Q1 产品更新, Blog, HTMLPAGE","content:blog:2025-q1-updates.md","blog/2025-q1-updates.md","blog/2025-q1-updates",{"_path":200,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":201,"description":202,"keywords":203,"author":11,"date":12,"category":13,"image":14,"_type":184,"_id":204,"_source":186,"_file":205,"_stem":206,"_extension":189},"/blog/2025-roadmap","2025 产品路线图","展望 2025 年的产品规划：AI 能力增强、模板扩充、国际化等","2025 产品路线图, Blog, HTMLPAGE","content:blog:2025-roadmap.md","blog/2025-roadmap.md","blog/2025-roadmap",{"_path":208,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":209,"description":210,"keywords":211,"author":11,"date":12,"category":13,"image":14,"_type":184,"_id":212,"_source":186,"_file":213,"_stem":214,"_extension":189},"/blog/ab-testing","A/B 测试","通过 A/B 测试验证设计方案","A/B 测试, Blog, HTMLPAGE","content:blog:ab-testing.md","blog/ab-testing.md","blog/ab-testing",1774945285297]