这篇文章将带你从零开始，安装最关键的插件，配置最前沿的 AI 工作流。

写在前面：Mac 用户安装小贴士

在 Mac 中安装 VS Code 非常简单，它采用常见的 App Bundle 分发方式。下载后的 .app 文件已经打包了程序运行所需的所有资源，解压即用，非常干净。

---

第一部分：新手装机必备（基础三件套）

对于第一次安装 VS Code 的小白，这三个插件是“地基”，请务必优先安装。

1. Chinese (Simplified) (必装 No.1)

• 作用：将 VS Code 的界面语言设置为简体中文。

• 推荐理由：第一个肯定要是它！ 虽然程序员要习惯英文环境，但对于新手来说，中文界面能让你更快熟悉菜单和设置，避免被复杂的英文术语劝退。安装后重启软件即可生效。

2. Python (AI 专业必装)

• 作用：提供 Python 语言支持，包含 IntelliSense (Pylance) 智能提示、Linting 代码检查、调试等功能。

• 推荐理由：AI 专业的绝大部分代码（PyTorch, TensorFlow 等）都是基于 Python 的。这是你的核心生产力工具。

3. Jupyter

• 作用：允许你直接在 VS Code 里运行 .ipynb 文件。

• 推荐理由：数据分析和模型训练的神器。你可以直接在编辑器里查看数据清洗过程、运行代码块，并实时渲染 Matplotlib/Seaborn 的可视化图表，无需单独打开浏览器。

---

第二部分：核心 AI 辅助插件 (注入 Vibe Coding 灵魂)

现在的编程已经进入了 AI 辅助时代。配置好这些，你的编码效率将提升 10 倍。

1. Claude Dev / Cline / Roo Code

• 定位：目前最流行的开源 AI 编程助手。

• 功能：可以直接调用 Claude 3.5 Sonnet 等强力模型的 API。它们不仅能写代码，还能自动执行终端命令、读取文件、甚至在服务器上进行调试。

2. Pencil AI

• 定位：将设计想法快速转化为代码的“Vibe”工具。

• 功能：这是 Pencil.dev 官方提供的扩展。它能让你在 VS Code 里直接打开 .pencil 设计文件。

• 强力联动：它支持 MCP (Model Context Protocol) 协议。配合 Claude，你可以说：“根据我刚在 Pencil 里画的这个登录框，帮我写出 React 代码”，实现设计与代码的无缝衔接。

3. GitHub Copilot (备选)

• 定位：老牌 AI 补全工具。

• 优势：虽然有 Claude 处理复杂任务，但 Copilot 的 Ghost Text (代码自动补全) 在你实时打字时的体验依然非常丝滑，适合补全简单的逻辑。

---

第三部分：服务器连接与运维 (连接云端算力)

作为 AI 学生，跑模型离不开实验室的服务器或云主机（阿里云/腾讯云）。

1. Remote - SSH (必装)

• 出品：微软官方。

• 作用：这是连接导师给的 GPU 服务器以及你自己云服务器的唯一指定插件。

• 使用：安装后，左侧会出现一个“远程资源管理器”图标，配置好 IP 和密码即可像操作本地文件一样操作服务器文件。

2. Remote - Explorer

• 作用：通常随 Remote-SSH 自动安装，专门用于管理多个服务器的连接记录，方便在不同算力资源间切换。

3. SFTP

• 作用：实现本地和服务器文件的同步。

• 场景：非常适合调试小文件，可以实现“本地保存即自动上传”的功能。

---

第四部分：提升“Vibe”的视觉与效率插件

让你的编辑器既好用，又好看。

1. Error Lens

• 功能：将代码报错直接显示在代码行末尾。

• 体验：不再需要鼠标悬停去查看错误红线的内容，报错一目了然，非常符合 Vibe Coding 的流畅感。

2. Console Ninja

• 功能：在编写 Python 或 JS 代码时，直接在编辑器代码行旁边显示 print() 的输出结果，无需频繁查看下方终端。

3. Excel Viewer

• 功能：在 VS Code 里直接预览 .csv 或 .xlsx 数据集。

• 场景：处理数据集时，不需要在 Excel 和 VS Code 之间来回切换。

4. Fluent Icons / Material Icon Theme

• 功能：美化文件图标。

• 场景：让你一眼就能分辨出哪个是模型权重文件 (.pth, .h5)，哪个是代码文件 (.py)，治愈强迫症。

---

第五部分：实战教程——如何开始你的第一次 "Vibe Coding"？

什么是 Vibe Coding？
就是跳过枯燥的语法纠结，利用 AI 工具链，直接进入“创意实现”阶段。

标准套装：Claude Code (写代码) + Pencil AI (视觉设计) + Live Server (实时预览)。

1. 准备工作：安装 Live Server

• 在插件市场搜索并安装 Live Server。它可以启动一个本地服务器，当你保存代码时，浏览器会自动刷新。

2. 实战流程：从草图到网页

1. 勾勒“灵魂”：

   • 在项目里新建 index.pencil，用 Pencil 插件画出简单的网页布局（比如：导航栏、大标题、卡片）。

2. AI 赋予“肉体”：

   • 打开 Claude Code，输入指令：“@index.pencil 我已经在 Pencil 里画好了草图，请帮我用 HTML 和 Tailwind CSS 写一个响应式首页。”

   • Claude 会读取设计并生成代码。

3. 开启“实时反馈”：

   • 右键生成的 index.html，选择 "Open with Live Server"。

   • 将 VS Code 和浏览器左右分屏。

4. Vibe 迭代：

   • 觉得颜色不对？直接对 Claude 说：“把整体风格改成‘赛博朋克’风格”。

   • 按下保存，右边浏览器瞬间变成你想要的样子。

---

附录：常用配置与管理指南

1. 如何快速连接云服务器？

1. 安装 Remote - SSH 后，点击左下角的蓝绿色图标 ><。

2. 选择 Connect to Host... -> Add New SSH Host。

3. 输入指令：ssh 用户名@服务器IP （例如：ssh ubuntu@124.222.93.151）。

4. 连接成功后，你就可以直接在 VS Code 终端里调用服务器的 GPU 跑模型了。

2. Mac 用户如何彻底卸载 VS Code？

如果你想重置环境或彻底删除软件，仅删除图标是不够的。

方法 A：手动清理（彻底干净）

1. 删除软件：将应用程序里的 Visual Studio Code 拖入废纸篓。

2. 删除插件：前往文件夹 ~/.vscode/extensions，清空内容。

3. 删除配置：前往文件夹 ~/Library/Application Support/Code，清空内容。

方法 B：懒人推荐
推荐使用 AppCleaner (免费) 或 CleanMyMac X。将 VS Code 图标拖进去，勾选所有关联文件，一键“核弹级”删除。
 

CleanMyMac X我的95元永久版，可以私信我如何获取。