VSCode扩展工具Copilot MCP使用教程【MCP】

VSCode扩展工具Copilot MCP使用教程【MCP】
在这里插入图片描述


MCP(Model Context Protocol,模型上下文协议) ,2024年11月底,由 Anthropic 推出的一种开放标准,旨在统一大型语言模型(LLM)与外部数据源和工具之间的通信协议。本文章教你使用VSCode扩展工具Copilot MCP快速上手MCP应用!

1. VSCode中安装Copilot MCP

在这里插入图片描述


Copilot MCP是一个适用于 VSCode 的 MCP Client。

2. Copilot MCP使用

安装之后会出现Coplilot授权,并在左侧菜单中出现MCP Server按钮

在这里插入图片描述

3. Add Server

点击Add Server,MCP Server分为两种建立方式,Process和SSE

在这里插入图片描述


以Process为例,输入必要信息:

在这里插入图片描述


其中Server Name是你给Server起的任意名字,需要注意的是Start Command。
这里我的输入为:

npx -y @modelcontextprotocol/server-filesystem /path 

注意path修改为自己的文件路径,并确保你已安装node.js从而可以使用npx命令
这个Command怎么来的呢?
可从来自MCP Server官方社区获得自己想要的Server:

https://github.com/modelcontextprotocol/servers?tab=readme-ov-file
在这里插入图片描述


以Filesystem为例,点进去可查看其调用方式,以NPX为例:

在这里插入图片描述


其要求我们输入npx命令,并附加上文件路径,可以为多个文件路径,显然,Command格式举例如下:

npx -y @modelcontextprotocol/server-filesystem /path 

注意path修改为自己的文件路径,并确保你已安装node.js从而可以使用npx命令
在Start Command中输入以上命令即可。
输入完成后点击 Add Server
成功后列表显示刚刚添加Server,不显示意味着添加失败。

在这里插入图片描述


点开后可查看该Server提供的Tools列表:

在这里插入图片描述

4. 调用Server

准备一个测试文件,我在/path下创建了个mcp_test.txt文件,里面包含一句话:

在这里插入图片描述


之后,在VSCode 右侧Copilot对话框中出入:

@mcp <内容>
在这里插入图片描述

例如:

@mcp 请读取"/root/xxx"下的“mcp_test.txt”中的内容
在这里插入图片描述

发送后得到回应:

在这里插入图片描述

成功!!!

Read more

一键拯救大模型的前端审美能力 - 使用Frontend-Design Skill提升AI设计水平

# 一键拯救大模型的前端审美能力 ## 前言 目前,在不额外给风格规范/设计系统/示例参考的情况下,拥有前端审美能力的编程模型只有4款: - Gemini 3 Pro - Gemini 3 Flash   - Claude Opus 4.5 - Claude Sonnet 4.5 当我们看到GPT-5.2-Codex等明明其他方面都很厉害,但是唯独前端审美不行的模型时,常常感叹"哀其不幸、怒其不争"。那么,是否有快速提升他们前端审美能力的方法呢? 答案是:**使用 Anthropic 官方提供的 frontend-design skill** ## 什么是 Frontend-Design Skill? Frontend-Design Skill 是 Anthropic 官方提供的一款技能包,可以为所有主流编程大模型(

前端代码分割与懒加载:让你的应用飞起来

前端代码分割与懒加载:让你的应用飞起来 毒舌时刻 代码分割和懒加载?听起来就像是前端工程师为了掩饰自己代码写得太烂而发明的借口。你写的代码那么大,加载时间那么长,不分割能行吗? 你以为随便分割一下代码就能解决性能问题?别做梦了!如果分割策略不合理,反而会导致更多的网络请求,让应用变得更慢。 为什么你需要这个 1. 减少初始加载时间:通过代码分割,只加载当前页面所需的代码,减少初始加载时间,提高用户体验。 2. 优化资源利用:只加载用户需要的代码,避免加载不必要的资源,优化内存和带宽使用。 3. 提高首屏渲染速度:快速加载首屏所需的代码,让用户尽快看到页面内容。 4. 支持大型应用:对于大型应用,代码分割可以避免打包后的文件过大,导致加载时间过长。 反面教材 // 这是一个典型的不使用代码分割的应用 import React from 'react'; import ReactDOM from 'react-dom'; import Home

这个AI提示词,让我3分钟写完3000字产品详情页

这个AI提示词,让我3分钟写完3000字产品详情页

最近在帮朋友做电商运营,每次写产品详情页都头疼。你懂的,要写痛点、写卖点、写场景,还得想标题变体,一个页面下来少说3000字。写完一个产品,半天就过去了。 后来我整理了一套提示词模板,发现效率直接起飞。今天分享出来,顺便说说怎么用AI辅助写电商文案这件事。 为什么需要专门的提示词 很多人用AI写文案,直接丢一句"帮我写个产品介绍",然后AI给你来一段: “本产品采用优质材料,精心设计,品质卓越,是您的不二选择…” 这种万金油文案,放哪个产品都能用,但放哪个产品都不好用。 真正的产品详情页,有固定的结构和逻辑: * 标题要抓眼球、包含关键词 * 要先讲痛点,引发共鸣 * 卖点要分层次、有数据支撑 * 得有使用场景,让人产生画面感 * 参数要通俗化,不能纯堆术语 * 最后还得打消顾虑,促成下单 这一套流程,如果不在提示词里说清楚,AI是写不出来的。 这套提示词的结构 我把整个指令分成了几个部分: 1. 角色定义 先告诉AI它是个电商文案专家,