Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/668https://channel.meo-ai.com/posts/668Sun, 21 Jun 2026 23:49:37 GMT<span class="post-title-source">《MDN 推出官方 MCP 服务器，让 AI 助手实时获取权威 Web 文档》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23AI%E5%B7%A5%E5%85%B7" title="#AI工具">#AI工具</a> <a href="/search/result?q=%23MCP" title="#MCP">#MCP</a> <a href="/search/result?q=%23MDN" title="#MDN">#MDN</a> <a href="/search/result?q=%23%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7" title="#浏览器兼容性">#浏览器兼容性</a> <a href="/search/result?q=%23VSCode" title="#VSCode">#VSCode</a> <a href="/search/result?q=%23Claude" title="#Claude">#Claude</a><br /><br />总结：<br />MDN 官方发布了一款实验性 MCP（Model Context Protocol）服务器，旨在让 LLM 和编程助手直接访问 MDN 的搜索、文档及浏览器兼容性数据（BCD），解决 AI 回答中可能出现的过时或错误信息问题。开发者可通过远程服务或本地部署方式接入，支持 VS Code、Claude Code 等 MCP 兼容客户端，实现编码时一键查询 API 用法和兼容性，无需离开编辑器。<br /><br />文章要点：<br />1. 官方出品，权威数据源：这是 MDN 官方推出的 MCP 服务器，直接对接 MDN 的搜索 API、文档 JSON API 以及浏览器兼容性数据（BCD），确保 AI 获取的是最新、最准确的 Web 平台技术资料，而不是训练数据中的"旧知识"<br />2. 六大核心工具，覆盖开发全场景：提供 <code>mdn_search</code>（关键词搜索）、<code>mdn_doc</code>（获取完整文档）、<code>mdn_compat</code>（浏览器兼容性检查）、<code>mdn_list</code>（浏览 BCD 特性）、<code>mdn_css</code>（CSS 属性定义）、<code>mdn_http</code>（HTTP 参考）等工具，从查文档到看兼容性一站搞定<br />3. 远程 + 本地双模式部署：既可以一键接入官方远程服务（<code>https://mcp.mdn.mozilla.net/</code>），也可以克隆仓库本地运行，满足对数据隐私有顾虑的团队需求；本地模式支持 MCP Inspector 调试，开发体验友好<br />4. 无缝集成主流开发工具：完美支持 VS Code、Claude Code、Cursor 等 MCP 兼容客户端，配置简单，安装后直接在 AI 聊天中调用工具，真正实现"边写代码边查文档"的流畅体验<br />5. 实验性质，持续迭代中：目前处于实验阶段，Mozilla 会收集查询数据以优化服务（可 opt-out），且保留随时调整或下线服务的权利，建议开发者关注官方动态<br /><br />URL：<br /><a href="https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/" target="_blank" rel="noopener" title="https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/">https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server/</a><a class="tgme_widget_message_link_preview" href="https://mcp.mdn.mozilla.net/" target="_blank" rel="noopener" title="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps."> <i class="link_preview_right_image" style="background-image:url('https://cdn4.telesco.pe/file/MWzDnhywnpdY2bGFk6Pchxlv8pL-h5PUzTMPT2tp_uqLWPohVX7Ad-ipYtyVH_NCSOdNtSSKSlXn6GrTd5qTNcoDXBiKR3o0dgCsFTIx7iBfefoJkCpH3tN-hGXgCWHvDNxVM1Ig1qqkvgyoWlYCsqio4ktLx9PBzJmQU9mUzJUmYGMs8PsA87_C0PGREFxp1dD_nI_vDkGBTlPEW8CiqHkYeacH3jCtMBAwbsGPug6icGDFB3-c2HJSihYZJMNuqbK0FWUVBU8kTdXL3xf6XoHhjHK0PQJ-pf2RGCVASgwD2Uhc3O79eg-LPiNXyJ3zd-ZTapXF0UIyc5NqsIAcPQ.jpg')"></i> <div class="link_preview_site_name accent_color">MDN Web Docs</div> <div class="link_preview_title">MDN MCP server</div> <div class="link_preview_description">The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.</div> </a>https://channel.meo-ai.com/posts/299https://channel.meo-ai.com/posts/299Mon, 07 Apr 2025 06:47:33 GMT<div class="image-list-container image-list-odd"> <button type="button" class="image-preview-button image-preview-wrap" popovertarget="modal-299-0" popovertargetaction="show" aria-label="Open image preview: #VScode 打开/关闭git 分支切换时候是否展示提交详情 git.showReferenceDetails"> <img src="/static/https://cdn5.telesco.pe/file/brr9eiv8u6paXcuUpj6tl6X8z6Sntl6MuftE-DE4RgtfgECU6Z2-hOsLREPfadiwQWupK1aaJNPL_u2TQhEIvbArTGvIy2fTSdl51eUfjB7VW9mzImqupbErQNmNvZAK5BC-3vyD185ZYEUb_ldarjOx3rCNGdHQ8BColN4Iu2JtdJs83MaQkvBjDl54Xpa0Gmc29vd3gF0kJ-0sOhPHWw-W9WJskGItTatXdIFVqNB73W0DrB4lOMpffLu0hNp-2xT5IAhCw5Qy4g2wJFP8aHiaf-hNLqUcRrseiX5J5BGYkhVf0_5smS9cgEshgKLpowdH9uH-h9rVvM0FkX9rBg.jpg" alt="#VScode 打开/关闭git 分支切换时候是否展示提交详情 git.showReferenceDetails" width="799" height="438" loading="eager" /> </button> <div class="modal" id="modal-299-0" popover="auto" aria-label="Image preview"> <button type="button" class="modal__backdrop" popovertarget="modal-299-0" popovertargetaction="hide" aria-label="Close image preview"></button> <button type="button" class="modal__close" popovertarget="modal-299-0" popovertargetaction="hide" aria-label="Close image preview">×</button> <div class="modal__surface"> </div> </div> </div><a href="/search/result?q=%23VScode" title="#VScode">#VScode</a> 打开/关闭git 分支切换时候是否展示提交详情 <code>git.showReferenceDetails</code>https://channel.meo-ai.com/posts/202https://channel.meo-ai.com/posts/202Fri, 07 Feb 2025 09:25:17 GMT<a href="/search/result?q=%23%E7%BD%91%E9%A1%B5%E5%B7%A5%E5%85%B7" title="#网页工具">#网页工具</a> <a href="/search/result?q=%23VScode" title="#VScode">#VScode</a> 在线制作自己的 <mark class="highlight">vscode</mark> 主题<br /><br /><a href="https://themes.vscode.one/" target="_blank" rel="noopener" title="https://themes.vscode.one/">https://themes.vscode.one/</a><a class="tgme_widget_message_link_preview" href="https://themes.vscode.one/" target="_blank" rel="noopener" title="Create VS Code Themes with Theme Studio!"> <div class="link_preview_site_name accent_color">themes.vscode.one</div> <div class="link_preview_title">Theme Studio: Create VS Code Themes!</div> <div class="link_preview_description">Create VS Code Themes with Theme Studio!</div> </a>https://channel.meo-ai.com/posts/125https://channel.meo-ai.com/posts/125Thu, 12 Dec 2024 16:03:05 GMT<a href="/search/result?q=%23VScode" title="#VScode">#VScode</a> 如果你的 VS Code 很卡，可以尝试关闭硬件加速，看看有没有变快。步骤如下：<br />1、打开命令面板 (Mac 快捷键：Cmd + Shift + P，Windows 快捷键：Ctrl + Shift + P)<br />2、输入 "Preferences: Configure Runtime Arguments"<br />3、去掉这一行的注释（如果没有就加上去）: "disable-hardware-acceleration": true<br />4、重启 VS Code<br /><br />- 前端充电宝https://channel.meo-ai.com/posts/124https://channel.meo-ai.com/posts/124Thu, 12 Dec 2024 16:00:29 GMT<a href="/search/result?q=%23VScode" title="#VScode">#VScode</a> <br /><br />就算不依靠第三方插件，也可以显示当前行的修改者了。使用 `git.blame.editorDecoration.enabled` 和 `git.blame.statusBarItem.enabled `设置启用此功能。也可以通过 `git.blame.editorDecoration.template` 自定义展示的格式。<br /><pre class="code"><code class="language-json"><span class="token punctuation">{</span> <span class="token property">"git.blame.editorDecoration.template"</span><span class="token operator">:</span> <span class="token string">"${subject}, ${authorName} (${authorDateAgo})"</span> <span class="token punctuation">}</span></code></pre>https://channel.meo-ai.com/posts/120https://channel.meo-ai.com/posts/120Thu, 12 Dec 2024 02:44:12 GMT<div class="image-list-container image-list-odd"> <button type="button" class="image-preview-button image-preview-wrap" popovertarget="modal-120-0" popovertargetaction="show" aria-label="Open image preview: #VScode 消除 tailwind v3 导入的警告"> <img src="/static/https://cdn5.telesco.pe/file/QzBydV1pHwjYLNyd6AvifdLTDoDi1Y7yOUpILes1OdQC5zOrhhc3z0VIm-edN1ZTV-BmOYiYW_vZj7t8W9tXBTsuOt2arBuoNWMicuKTmniwJfLCE35IQZoyM-5SBNgWjRc_SS22eW8qR9jBpTPpuOocvl4ql0FBPRlWMKvOoCYGHU7Q_v6A_UlUa3Em_OCtyz3fXrHmOZGn60prBnqYgTn-S2Gc8ouj2f1dBM6HRvx6vAjdYR-3Irp-egcONaRxJiqSzG44s1nzG8iNgmRCX_NHdxhIhJo5y_VbKhuSnLkIZCoSV2mhulVxKv-N_h0YiJtAoeX9ZR2YG4j1ArlG8w.jpg" alt="#VScode 消除 tailwind v3 导入的警告" width="800" height="264" loading="eager" /> </button> <div class="modal" id="modal-120-0" popover="auto" aria-label="Image preview"> <button type="button" class="modal__backdrop" popovertarget="modal-120-0" popovertargetaction="hide" aria-label="Close image preview"></button> <button type="button" class="modal__close" popovertarget="modal-120-0" popovertargetaction="hide" aria-label="Close image preview">×</button> <div class="modal__surface"> </div> </div> </div><a href="/search/result?q=%23VScode" title="#VScode">#VScode</a> 消除 tailwind v3 导入的警告https://channel.meo-ai.com/posts/114https://channel.meo-ai.com/posts/114Wed, 11 Dec 2024 08:48:44 GMT<div class="image-list-container image-list-odd"> <button type="button" class="image-preview-button image-preview-wrap" popovertarget="modal-114-0" popovertargetaction="show" aria-label="Open image preview: #效率 #VScode 特殊文件自定义 labels 和展示效果"> <img src="/static/https://cdn5.telesco.pe/file/S6ZZY007PDxdZy4ylenjX-dcog6ImR6GmXeS2kx4eqXCZ0PysFezIpv7YDIKaX-ZUssejcZqjbc1YqcIKDrRQGwlXlTYQ-zbNEHcY2AkaQLIYPZXq48hgxTGlIDkSphdWrr0r9NLNLdso-RYH3hzlVnmQB6vGPlEhxgqOJ-oCFKyVbse3WSqEYbpIvaqVojLms1_bdK_5iHKcm564Dp1zW3qVd91cpRqeEpYhR4Vr5Ze5u29fgKR552hFTgSGudMl7o7AxjwwYxkEuQUqmLUfhswe3MGg1N7_aCHu625g-hDfq7vN6X63jRAGzYQtquQ7iElI8kHTpHYvTxRT3wJ6g.jpg" alt="#效率 #VScode 特殊文件自定义 labels 和展示效果" width="453" height="271" loading="eager" /> </button> <div class="modal" id="modal-114-0" popover="auto" aria-label="Image preview"> <button type="button" class="modal__backdrop" popovertarget="modal-114-0" popovertargetaction="hide" aria-label="Close image preview"></button> <button type="button" class="modal__close" popovertarget="modal-114-0" popovertargetaction="hide" aria-label="Close image preview">×</button> <div class="modal__surface"> </div> </div> <button type="button" class="image-preview-button image-preview-wrap" popovertarget="modal-114-1" popovertargetaction="show" aria-label="Open image preview: #效率 #VScode 特殊文件自定义 labels 和展示效果"> <img src="/static/https://cdn5.telesco.pe/file/AZdg2wslY2b0_9-ap6zCiTyRDKuhAzfOe6Yy6ODgSmhcgEZ1aut1adTnSUsT6CjhzKYCqMVL0TSgZqrTpkVw5wWWRQjskqkjOWd51LuRQbRWAOC94plzvftwwdZXBi5iYLum0t5Oob6ybdtKDOV20bE8NicV-pkv6A94SgzlRfnSrPZocxRgCImq9qiEyBTlWsGSaWNYcs7uuUPhPIGL9sPenICdomn5IKJ1oUd4v_5_u-bdAcMFeiKJyAwxu8HB7zc6fM4MmAzdJzSfI2cADvCKS-Dq87eMFO8ZVqadGgdgrE6M5Y-A9lKFMxiAPcg8--YbPkj8q_IxK5Nb2vndOQ.jpg" alt="#效率 #VScode 特殊文件自定义 labels 和展示效果" width="225" height="35" loading="eager" /> </button> <div class="modal" id="modal-114-1" popover="auto" aria-label="Image preview"> <button type="button" class="modal__backdrop" popovertarget="modal-114-1" popovertargetaction="hide" aria-label="Close image preview"></button> <button type="button" class="modal__close" popovertarget="modal-114-1" popovertargetaction="hide" aria-label="Close image preview">×</button> <div class="modal__surface"> </div> </div> <button type="button" class="image-preview-button image-preview-wrap" popovertarget="modal-114-2" popovertargetaction="show" aria-label="Open image preview: #效率 #VScode 特殊文件自定义 labels 和展示效果"> <img src="/static/https://cdn5.telesco.pe/file/YUfdC0eLAmG12hAuoqD3OvjunCxIOqwZfTtOCjgLePAJWG2u1M-KCuCn5o8Lc5b7uI1yIRl-K8lCdsjTMBJXA8Y6c5nIU09wryJSqKCrOSpyJeoDUkVFDvr7_iU4zV-IKO9eP22YJZgVADZqpI5kNh_toUdG8-Su5lYx6mtvkmlf49FVsxe-cmA4JP--b3zdfgZOv2Gp0v1jqeQxYFySVM7GLPiOL-dhWsdV2ZZLOXmI7tuIbDz-REJkzYbDmO6xtgGqRRbogo_oGg-gm1yDIpyht92t5_HVqwvGNVhSAjVwfRPYI5hZJ96Hsbz0xUy5Y1zgVizMJDnmnI6yPZ9EzQ.jpg" alt="#效率 #VScode 特殊文件自定义 labels 和展示效果" width="226" height="35" loading="eager" /> </button> <div class="modal" id="modal-114-2" popover="auto" aria-label="Image preview"> <button type="button" class="modal__backdrop" popovertarget="modal-114-2" popovertargetaction="hide" aria-label="Close image preview"></button> <button type="button" class="modal__close" popovertarget="modal-114-2" popovertargetaction="hide" aria-label="Close image preview">×</button> <div class="modal__surface"> </div> </div> </div><div class="tgme_widget_message_text js-message_text"><a href="/search/result?q=%23%E6%95%88%E7%8E%87" title="#效率">#效率</a> <a href="/search/result?q=%23VScode" title="#VScode">#VScode</a> 特殊文件自定义 labels 和展示效果</div>https://channel.meo-ai.com/posts/113https://channel.meo-ai.com/posts/113Wed, 11 Dec 2024 08:40:11 GMT<a href="/search/result?q=%23%E6%95%88%E7%8E%87" title="#效率">#效率</a> <a href="/search/result?q=%23VScode" title="#VScode">#VScode</a> 通过如下方式可以在侧边新窗口打开当前声明的源：<br /><br />- MacOS：`cmd + option + click` <br />- Windows：`ctrl + alt + click`