小白AI编程

Appearance

Code 前，先了解下 VS Code 到底咋用！ ​

在开始用 AI 写代码之前，我们需要先认识一下我们即将要长时间打交道的"老朋友"，VS Code。

📖 术语解释
编辑器：写代码的工具。你可以把它理解成专门用来写代码的 Word 或者备忘录。
IDE：集成开发环境。听起来很高级，其实就是个大号的、功能更全的编辑器。
VS Code：微软出的一个免费、超级好用、并且全世界最多人用的代码编辑器。

你可以把它理解成： 这是一个非常强大的"数字画板"，而 AI 就是你的"画笔"，你则是"指挥家"，指挥 AI 在这个画板上挥洒创意。

你会学到什么 ​

  • 怎么下载和安装这个工具
  • 界面上的那些按钮到底是干嘛的
  • AI 功能（比如聊天、计划、代理模式）藏在哪里
  • 新手最容易懵圈的几个核心概念

第一步：下载和安装 ​

不要钱，完全免费。

去官网下载：https://code.visualstudio.com/

点那个大大的蓝色 "Download" 按钮，下载后像安装普通软件一样安装就行。

界面大扫盲：这些按钮都是干嘛的？ ​

打开 VS Code 后，你会看到一个界面，大概可以分成几个区域。别怕，我们一个个来认。

1. 左边那一排竖着的图标（活动栏） ​

你可以把它理解成 VS Code 的"快捷导航栏"：

  • 文件管理器 (Explorer)：图标像两张纸叠在一起。点击它，你就能看到你当前打开的文件夹里的所有文件。写代码的时候，你大部分时间都在这里找文件。
  • 搜索 (Search)：图标是个放大镜。用来在整个项目的所有文件里找东西（比如找某个词在哪里出现过）。
  • 源代码管理 (Source Control)：图标像个树杈。这个稍微高级点，主要是用来做版本控制的（比如 Git），方便你保存代码的历史记录，或者跟别人合作写代码。
  • 运行和调试 (Run and Debug)：图标是个虫子旁边有个播放键。用来找代码里的错（bug）用的。
  • 扩展市场 (Extensions)：图标像四个方块拼在一起，有一个飘在外面。这里你可以下载各种插件，让你的 VS Code 变得更强大（比如变成中文，或者安装 AI 助手）。

2. 底部那个黑乎乎的窗口（面板区） ​

这里通常放着几个非常有用的工具，其中最重要的就是**终端**。

  • 问题 (Problems)：代码如果有明显的语法错误，会在这里列出来告诉你哪里写错了。
  • 输出 (Output)：一些插件或者工具运行时的日志会打印在这里。
  • 调试控制台 (Debug Console)：找代码错误时，可以在这里查看一些变量的值。
  • 终端 (Terminal)：你可以把它理解成电脑内部的"命令行界面"。有时候我们需要在这里输入一些命令（比如启动某个程序，安装某个东西）。你可以随时按 `Ctrl + ``（数字 1 左边那个键）把它呼叫出来。
  • 端口 (Ports)：当你在本地运行一个网站时，这里会显示它占用的端口号，方便你一键在浏览器里打开预览。

3. 万能的命令面板 ​

记不住快捷键？找不到按钮在哪？没事！你只需要记住这一个终极快捷键：

  • Mac: Cmd + Shift + P
  • Windows: Ctrl + Shift + P

按下去之后，会弹出一个输入框。这里你可以输入你想要做的任何操作。你可以把它理解成 VS Code 内部的"阿拉丁神灯"，有什么需求直接搜。

如果你只按了 Cmd+P (Mac) 或 Ctrl+P (Windows)，那就是专门用来快速搜索文件的，非常方便！

AI 时代的新魔法：聊天窗口 ​

安装了类似 Cline 或者 OpenClaw 这样的 AI 扩展后，你的 VS Code 左侧或右侧会多出一个聊天窗口。这才是我们真正的重头戏！

这个聊天窗口通常有三种工作模式，你可以把它理解成你雇了三个不同级别的助理：

  1. 提问模式 (Ask)：相当于一个"活字典"助理。你遇到不懂的代码，或者不知道某个 API 怎么用，就直接问它，它会给你解释或者提供建议，但不会��接动手改你的代码。
  2. 计划模式 (Plan)：相当于一个"架构师"助理。当你有一个比较大的想法（比如"我要加一个用户登录功能"），你可以告诉它，它会帮你分析步骤，列出一个详细的行动计划，但同样不会直接动手。
  3. 代理模式 (Agent / Act)：相当于一个"全包包工头"助理。这是最强大的模式！你告诉它你想做什么，它不仅会想办法，还会自己去读文件、写代码、甚至在终端里运行命令。你只需要在旁边点头（点击允许）或者指出它做错的地方就行了。

经常听到的一些词 ​

在用 AI 写代码时，你可能还会听到一些词，不用怕，它们其实很简单：

  • 变量：可以理解成装东西的盒子。比如 age = 18，就是把 18 这个数字装进了叫 age 的盒子里。

遇到问题了？ ​

Q: 这么多按钮，我真的能记住吗？

A: 不用全记住！你只要知道怎么打开文件（左侧资源管理器），怎么开终端（`Ctrl + ``），以及怎么和 AI 聊天就足够了。其它的，用到的时候自然就知道了。

Q: 我让 AI 用代理模式写代码，它乱写一通把原来的代码改坏了怎么办？

A: 别慌。大部分编辑器都有撤销功能（Cmd+Z 或 Ctrl+Z）。而且，这就是为什么我们需要"源代码管理 (Source Control)"。在你让 AI 大改之前，记得保存当前状态，改坏了随时可以回滚。

Q: AI 让我提供上下文，什么是上下文？

A: 上下文就是"背景信息"。就像你突然对朋友说"它坏了"，朋友肯定懵。你应该说"我刚买的那个鼠标坏了"。写代码也一样，你要告诉 AI："我正在写登录页面的代码，这段代码报错了，你看一下"。

下一步看什么 ​

👉 下一步看什么
终端是什么？ →开始安装第一个工具 →
🤔 遇到问题了？
Q: 这界面看着还是头晕
A: 深呼吸，大家刚开始都这样。你现在只管跟 AI 聊天，它让你干嘛你再去界面上找对应的地方。
Q: 下载太慢了怎么办？
A: 可能是网络问题，可以尝试搜索一下“VS Code 国内下载镜像”试试。