搭建你的第一个 AI 编程环境：从安装到 Hello World
一、开始之前
如果你读到了这篇文章，说明你已经对 AI 编程有了基本的认知。现在是动手的时候了。这篇文章会手把手带你完成 AI 编程环境的搭建——从零到你的第一个 AI 辅助编写的程序。
⏱️ 整个搭建过程预计需要 30-45分钟。你需要的只是一台电脑（Windows / Mac / Linux 均可）和网络连接。
二、环境总览
我们将搭建以下环境：
VS Code（代码编辑器）
+
GitHub Copilot 或 通义灵码（AI 编程助手）
+
Live Server（本地预览工具）
选择 AI 工具的建议：
- 💰 有预算 → GitHub Copilot（$10/月，30天免费试用，最成熟）
- 🆓 想要免费 → 通义灵码（完全免费，中文友好）
- 🆓 另一免费选择 → Codeium（免费，英文友好）
本文将同时给出两种方案的安装步骤。
三、第一步：安装 VS Code
① 打开浏览器，访问 https://code.visualstudio.com/
② 点击大大的 “Download” 按钮。网站会自动识别你的操作系统（Windows / Mac / Linux）。
③ 下载完成后：
- Windows：双击 .exe 文件，按提示安装。重要：勾选"添加到 PATH"选项。
- Mac：将 .app 文件拖入 Applications 文件夹。
- Linux：使用下载的 .deb 或 .rpm 包安装。
④ 安装完成后，启动 VS Code。你会看到一个简洁的界面。
⑤ （推荐）安装中文语言包：
- 点击左侧扩展图标（四个方块）或按 Ctrl+Shift+X
- 搜索 “Chinese”
- 安装 “Chinese (Simplified) Language Pack”
- 重启 VS Code
⑥ 安装 Live Server 插件：
- 同样在扩展面板搜索 “Live Server”
- 安装（作者：Ritwick Dey）
- 这个插件用于在浏览器中实时预览你的 HTML 页面
四、第二步：安装 AI 编程助手
方案 A：GitHub Copilot（推荐）
① 在 VS Code 扩展面板搜索 “GitHub Copilot”
② 点击安装（作者：GitHub）
③ 安装后，VS Code 会弹出 GitHub 登录提示
④ 点击 “Sign in to GitHub”，浏览器会打开 GitHub 授权页面
⑤ 登录你的 GitHub 账号（如果没有，先去 github.com 注册）
⑥ 授权后，VS Code 右下角会出现 Copilot 图标，状态栏显示 ✓
💡 GitHub Copilot 提供 30 天免费试用。试用期后 $10/月。
同时安装 GitHub Copilot Chat：
① 在扩展面板搜索 “GitHub Copilot Chat”
② 点击安装
③ 安装后，左侧会出现一个聊天图标（对话气泡）
方案 B：通义灵码（免费替代方案）
① 在 VS Code 扩展面板搜索 “TONGYI Lingma” 或 “通义灵码”
② 点击安装
③ 安装后按提示使用阿里云账号或淘宝账号登录
④ 登录成功，右下角出现通义灵码图标
通义灵码提供与 Copilot 类似的功能：代码补全 + 对话问答，且完全免费。
五、第三步：创建第一个项目
① 在你的桌面上创建一个新文件夹，命名为 ai-hello-world
② 在 VS Code 中打开这个文件夹：
- 菜单：文件 → 打开文件夹… → 选择 ai-hello-world
③ 在 VS Code 中新建文件，命名为 index.html：
- 快捷键：Ctrl+N（新建文件）→ Ctrl+S（保存）→ 输入 index.html
④ 在 index.html 中输入 ! 然后按 Tab。VS Code 会自动生成 HTML 基本结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
⑤ 把 <html lang="en"> 改为 <html lang="zh-CN">，把 <title> 改为 “AI 编程初体验”。
六、第四步：用 AI 写你的第一个程序
现在是最有趣的部分——让 AI 帮你写代码。
6.1 体验 Tab 补全
在 <body> 中，写一个 HTML 注释：
<!– 一个简单的计算器 –>
然后按回车，观察 AI 是否自动建议了代码。如果使用 Copilot，你可能会看到灰色的建议（Ghost Text）。按 Tab 接受建议。
如果你只得到了部分代码，没关系——继续输入，AI 会在你输入的过程中持续给出建议。
6.2 体验对话生成
按下 Ctrl+Shift+I（Copilot Chat）或在侧边栏打开通义灵码的聊天面板，输入：
帮我写一个简单的网页计算器，包含：
– 数字按钮（0-9）
– 加减乘除运算符
– 等于号
– 清除按钮
– 显示区域
– 用好看的样式
AI 会生成完整的 HTML + CSS + JavaScript 代码。复制生成的代码，替换 index.html 的全部内容。
6.3 预览你的作品
在 index.html 编辑器中右键 → “Open with Live Server”。
浏览器会自动打开，你会看到一个可以使用的计算器——你刚刚用 AI 辅助创建的第一个应用！
七、第五步：体验 AI 的核心功能
现在你已经有了一个项目，让我们用这个计算器来体验 AI 的几种核心能力。
体验一：修改现有代码
选中计算器中的某个功能（比如清除按钮相关的代码），按 Ctrl+I，输入：
点击清除按钮时，加一个确认对话框："确定要清除吗？"
AI 会直接在编辑器中修改代码。
体验二：添加新功能
在聊天面板中输入：
给计算器加一个"历史记录"功能：
– 每次计算的结果自动保存
– 在计算器下方显示最近5条计算记录
– 每条记录显示算式和结果
– 点击记录可以重新加载那次的计算结果
AI 会生成完整的修改方案和代码。
体验三：解释代码
选中整个 JavaScript 部分（<script> 标签内的所有代码），在聊天面板中输入：
解释这段代码的核心逻辑和数据流向
AI 会给你一个清晰的解释。
体验四：修复 Bug
故意在代码中添加一个错误（比如把 + 改成 * 让它每次都做乘法）。然后：
在聊天面板中输入：
我的计算器不管按什么运算符，结果都是乘法。帮我找出问题并修复。
AI 会定位到你的错误并给出修复方案。
八、常见问题与解决方案
Q1：Copilot 没有显示灰色建议？
- 检查右下角 Copilot 图标是否有 ✓
- 确保网络连接正常
- 尝试重启 VS Code
Q2：通义灵码登录失败？
- 确认阿里云/淘宝账号状态正常
- 尝试用手机扫码登录
- 检查网络连接
Q3：AI 生成的代码不对或跑不起来？
- 这是正常的——AI 不是每次都能生成完美代码
- 复制报错信息，在聊天面板中告诉 AI
- AI 通常会修正自己的代码
Q4：Live Server 无法启动？
- 确认已正确保存 index.html
- 检查 VS Code 是否以正确的权限运行
- 尝试右键 → “Open with Live Server”（而不是点击右下角图标）
九、下一步学习建议
恭喜你完成了 AI 编程环境的搭建和第一个项目！从这里开始，你可以：
📝 继续尝试：
- 给计算器添加更多功能（百分比、开方、记忆功能）
- 尝试用 AI 做一个"待办清单"
- 用 AI 做一个"天气查询"页面
📝 深入学习（按顺序阅读本系列文章）：
- 第6篇：Token 与上下文窗口——理解 AI 的"视野"
- 第7篇：AI 编程的三种模式——知道什么时候用什么
- 第46-75篇：提示词工程——学会更精确地指挥 AI
📝 建立习惯：
- 每天用 AI 写至少一个函数或组件
- 遇到不懂的代码，先用 AI 问，而不是搜索
- 养成审查 AI 生成代码的习惯
十、总结
在不到一小时内，你完成了：
- ✅ VS Code 的安装和配置
- ✅ AI 编程助手的安装和登录
- ✅ 用 AI 创建了第一个交互式应用
- ✅ 体验了代码补全、对话生成、Bug 修复
- ✅ 了解了常见问题的解决方法
你已经迈出了 AI 编程之旅的第一步。接下来，让我们系统学习如何更高效地与 AI 协作。
下一篇：AI 编程学习路线图：一份覆盖前端、后端、全栈的系统学习计划
