跳过导航
2
第2课

第2课:VS Code + 插件

最主流的IDE体验,多款插件可选

预计30分钟 零基础友好 VS Code

学习目标

  • 了解VS Code的AI插件生态
  • 学会安装和配置AI插件
  • 掌握主流AI插件的使用方法
  • 提高编码效率

为什么选择VS Code?

VS Code 是目前最流行的代码编辑器,拥有庞大的插件生态系统。通过安装AI插件,你可以获得强大的AI编程辅助能力。

核心优势

  1. 免费开源 - 完全免费,社区活跃
  2. 插件丰富 - 数万个插件扩展功能
  3. 跨平台 - 支持 Windows、Mac、Linux
  4. 性能优秀 - 启动快,运行流畅

主流AI插件

1. GitHub Copilot

GitHub Copilot 是最知名的AI编程助手,由GitHub和OpenAI合作开发。

特点:

  • 实时代码建议
  • 支持多种编程语言
  • 上下文感知
  • 注释生成代码

安装步骤:

  1. 打开VS Code扩展商店
  2. 搜索”GitHub Copilot”
  3. 点击安装
  4. 登录GitHub账号

2. Codeium

Codeium 是一款免费的AI代码助手,提供强大的代码补全功能。

特点:

  • 完全免费
  • 支持70+编程语言
  • 代码补全
  • 聊天功能

安装步骤:

  1. 打开VS Code扩展商店
  2. 搜索”Codeium”
  3. 点击安装
  4. 登录Codeium账号

3. Cursor

Cursor 是一款AI-first的代码编辑器,基于VS Code构建。

特点:

  • 内置AI功能
  • 代码生成
  • 代码解释
  • 智能重构

使用技巧

代码补全

AI插件最常用的功能是代码补全:

// 输入注释,AI会生成代码
// 计算数组平均值
function calculateAverage(arr) {
  // AI会自动补全这里
}

代码解释

选中代码,右键选择”Explain Code”:

const fibonacci = (n) => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
};

代码重构

选中代码,右键选择”Refactor”:

// 重构前
function add(a, b) {
  return a + b;
}

// 重构后(添加类型检查)
function add(a, b) {
  if (typeof a !== 'number' || typeof b !== 'number') {
    throw new TypeError('Arguments must be numbers');
  }
  return a + b;
}

最佳实践

1. 善用注释

用注释描述你想要的功能:

# 读取CSV文件并计算每列的平均值
def process_csv(file_path):
    # AI会根据注释生成代码
    pass

2. 逐步生成

复杂功能分步骤生成:

// 第一步:创建数据结构
class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }
}

// 第二步:添加验证方法
// 第三步:添加序列化方法

3. 审查代码

AI生成的代码需要审查:

  • 检查逻辑是否正确
  • 检查是否有安全问题
  • 检查是否符合项目规范

常见问题

Q: AI插件会泄露代码吗?

A: 大多数AI插件会加密传输代码,但敏感项目建议使用本地模型或关闭插件。

Q: AI插件需要付费吗?

A: 部分插件免费(如Codeium),部分需要付费(如GitHub Copilot)。

Q: AI插件支持哪些语言?

A: 主流插件支持几乎所有编程语言,包括Python、JavaScript、TypeScript、Java、C++等。

动手练习

练习1:安装AI插件

  1. 打开VS Code
  2. 安装一个AI插件(推荐Codeium)
  3. 登录账号

练习2:体验代码补全

  1. 创建一个新文件
  2. 输入注释描述功能
  3. 观察AI补全建议

练习3:使用代码解释

  1. 选择一段代码
  2. 使用AI解释功能
  3. 理解AI的解释

下一步

完成本课后,你将:

  • ✅ 了解VS Code的AI插件生态
  • ✅ 学会安装和配置AI插件
  • ✅ 掌握主流AI插件的使用方法
  • ✅ 提高编码效率

准备好了吗?让我们开始吧!