📝 AIGC浩然学长：VS Code 新手入门：编写与运行代码

📝 AIGC浩然学长：VS Code 新手入门：编写与运行代码 📝 AIGC浩然学长：VS Code 新手入门：编写与运行代码 Modified February 18 Code block JavaScript Copy // ❌ 不好的命名 let a = 18; let b = "John"; let c = 85.5; // ✅ 好的命名 let studentAge = 18; let studentName = "John"; let averageScore = 85.5; // ❌ 不好的函数名 function calc(x, y) { return x + y; } // ✅ 好的函数名 function calculateSum(number1, number2) { return number1 + number2; } 命名规范： • 变量和函数名用 驼峰命名法：studentName, calculateAverage • 常量用 全大写+下划线：MAX SCORE, PI VALUE • 类名用 大驼峰：Student, ScoreCalculator 🎯 快速参考卡片 常用快捷键 代码示例速查表 本教程包含以下可运行的代码示例： 示例 难度 学习重点 位置 Hello World ⭐ 基础打印输出 第五章 变量和计算 ⭐ 变量定义、算术运算 第五章 函数使用 ⭐⭐ 函数定义、调用、返回值 第五章 数组操作 ⭐⭐ 数组创建、访问、方法 第五章 对象使用 ⭐⭐ 对象创建、属性访问 第五章 条件判断 ⭐⭐ if else 语句 第五章 循环打印 ⭐⭐ for 循环基础 第五章 简单计算器 ⭐⭐⭐ 综合运用函数和条件 第五章 IntelliSense演示 ⭐⭐ 智能补全实战 第四章 个人信息卡片 ⭐ 对象练习 练习任务1 成绩计算器 ⭐⭐ 函数和数组 练习任务2 九九乘法表 ⭐⭐⭐ 嵌套循环 练习任务3 购物车系统 ⭐⭐⭐ 对象数组操作 练习任务4 猜数字游戏 ⭐⭐⭐⭐ 综合应用 练习任务5 🚀 下一步学习建议 初级阶段（正在进行） • ✓ 熟悉 VS Code 界面和基本操作 • ✓ 学会创建文件和运行代码 • ✓ 理解 IntelliSense 和自动保存 进阶阶段（接下来） • 学习 JavaScript 基础语法（变量、函数、循环） • 了解如何安装和使用第三方包（npm） • 学习使用调试器（断点、单步执行） 高级阶段（未来目标） • 掌握 Git 版本控制 • 使用 Copilot Agent 模式加速开发 • 构建完整的 Web 应用项目 ❓ 常见问题 FAQ Q: 终端显示"node 不是内部或外部命令"？ A: 说明 Node.js 没有正确安装或没有添加到系统 PATH。解决方法： 1. 重新下载安装 Node.js 2. 安装时勾选"Add to PATH"选项 3. 安装后重启电脑 4. 再次在终端输入 node version 验证 Q: IntelliSense 不显示提示怎么办？ A: 可能的原因： 1. 文件后缀名不对（检查是否为 .js） 2. 没有安装对应语言的扩展（如 Python 需要 Python 扩展） 3. VS Code 正在加载（等待几秒） 4. 尝试手动触发：按 Ctrl + Space Q: 代码改了但运行结果没变化？ A: 可能是没有保存文件。解决方法： 1. 检查文件名旁边是否有 ● 圆点（表示未保存） 2. 按 Ctrl + S 手动保存 3. 或者开启"自动保存"功能 Q: 终端路径不对怎么办？ A: 使用 cd 命令切换到项目文件夹： Code block Bash Copy Windows cd C:\Users\YourName\Documents\my first project Mac/Linux cd /Documents/my first project 🎉 恭喜你！ 如果你已经成功： • ✅ 创建了项目文件夹并打开到 VS Code • ✅ 检查了 Node.js 环境 • ✅ 创建了 app.js 文件 • ✅ 写入代码并看到 IntelliSense 提示 • ✅ 在终端运行代码并看到结果 那么你已经完成了编程入门的第一大步！ 记住：编程是一项需要大量练习的技能。不要害怕犯错，每个错误都是学习的机会。 🏋️ 动手练习任务 为了巩固所学知识，这里有一些练习任务供你完成： 练习1：个人信息卡片 ⭐ 任务： 创建一个对象来存储你的个人信息，并打印出来。 Code block JavaScript Copy // 创建你的个人信息对象 let myInfo = { name: "你的名字", age: 0, // 填入你的年龄 city: "你的城市", hobbies: ["爱好1", "爱好2", "爱好3"] }; // TODO: 打印所有信息 console.log("我的名字：" + myInfo.name); // 请继续完成其他信息的打印... 期望输出： Code block Plain Text Copy 我的名字：张三 我的年龄：20 我的城市：北京 我的爱好：阅读, 游泳, 编程 练习2：成绩计算器 ⭐⭐ 任务： 写一个函数计算学生的平均分，并判断等级。 Code block JavaScript Copy // 定义函数：计算平均分 function calculateAverage(scores) { // TODO: 计算总分 // TODO: 计算平均分 // TODO: 返回平均分 } // 定义函数：判断等级 function getGrade(average) { // TODO: 根据分数判断等级 // 90以上: 优秀 // 80 89: 良好 // 70 79: 中等 // 60 69: 及格 // 60以下: 不及格 } // 测试代码 let myScores = [85, 92, 78, 88, 95]; let avg = calculateAverage(myScores); let grade = getGrade(avg); console.log("各科成绩：", myScores); console.log("平均分：", avg); console.log("等级：", grade); 命名规范： • 变量和函数名用 驼峰命名法：studentName, calculateAverage • 常量用 全大写+下划线：MAX SCORE, PI VALUE • 类名用 大驼峰：Student, ScoreCalculator 🎯 快速参考卡片 常用快捷键 代码示例速查表 本教程包含以下可运行的代码示例： 示例 难度 学习重点 位置 Hello World ⭐ 基础打印输出 第五章 变量和计算 ⭐ 变量定义、算术运算 第五章 函数使用 ⭐⭐ 函数定义、调用、返回值 第五章 数组操作 ⭐⭐ 数组创建、访问、方法 第五章 对象使用 ⭐⭐ 对象创建、属性访问 第五章 条件判断 ⭐⭐ if else 语句 第五章 循环打印 ⭐⭐ for 循环基础 第五章 简单计算器 ⭐⭐⭐ 综合运用函数和条件 第五章 IntelliSense演示 ⭐⭐ 智能补全实战 第四章 个人信息卡片 ⭐ 对象练习 练习任务1 成绩计算器 ⭐⭐ 函数和数组 练习任务2 九九乘法表 ⭐⭐⭐ 嵌套循环 练习任务3 购物车系统 ⭐⭐⭐ 对象数组操作 练习任务4 猜数字游戏 ⭐⭐⭐⭐ 综合应用 练习任务5 示例 示例 难度 难度 学习重点 学习重点 位置 位置 Hello World Hello World ⭐ ⭐ 基础打印输出 基础打印输出 第五章 第五章 变量和计算 变量和计算 ⭐ ⭐ 变量定义、算术运算 变量定义、算术运算 第五章 第五章 函数使用 函数使用 ⭐⭐ ⭐⭐ 函数定义、调用、返回值 函数定义、调用、返回值 第五章 第五章 数组操作 数组操作 ⭐⭐ ⭐⭐ 数组创建、访问、方法 数组创建、访问、方法 第五章 第五章 对象使用 对象使用 ⭐⭐ ⭐⭐ 对象创建、属性访问 对象创建、属性访问 第五章 第五章 条件判断 条件判断 ⭐⭐ ⭐⭐ if else 语句 if else 语句 第五章 第五章 循环打印 循环打印 ⭐⭐ ⭐⭐ for 循环基础 for 循环基础 第五章 第五章 简单计算器 简单计算器 ⭐⭐⭐ ⭐⭐⭐ 综合运用函数和条件 综合运用函数和条件 第五章 第五章 IntelliSense演示 IntelliSense演示 ⭐⭐ ⭐⭐ 智能补全实战 智能补全实战 第四章 第四章 个人信息卡片 个人信息卡片 ⭐ ⭐ 对象练习 对象练习 练习任务1 练习任务1 成绩计算器 成绩计算器 ⭐⭐ ⭐⭐ 函数和数组 函数和数组 练习任务2 练习任务2 九九乘法表 九九乘法表 ⭐⭐⭐ ⭐⭐⭐ 嵌套循环 嵌套循环 练习任务3 练习任务3 购物车系统 购物车系统 ⭐⭐⭐ ⭐⭐⭐ 对象数组操作 对象数组操作 练习任务4 练习任务4 猜数字游戏 猜数字游戏 ⭐⭐⭐⭐ ⭐⭐⭐⭐ 综合应用 综合应用 练习任务5 练习任务5 🚀 下一步学习建议 初级阶段（正在进行） • ✓ 熟悉 VS Code 界面和基本操作 • ✓ 学会创建文件和运行代码 • ✓ 理解 IntelliSense 和自动保存 进阶阶段（接下来） • 学习 JavaScript 基础语法（变量、函数、循环） • 了解如何安装和使用第三方包（npm） • 学习使用调试器（断点、单步执行） 高级阶段（未来目标） • 掌握 Git 版本控制 • 使用 Copilot Agent 模式加速开发 • 构建完整的 Web 应用项目 ❓ 常见问题 FAQ Q: 终端显示"node 不是内部或外部命令"？ A: 说明 Node.js 没有正确安装或没有添加到系统 PATH。解决方法： 1. 重新下载安装 Node.js 2. 安装时勾选"Add to PATH"选项 3. 安装后重启电脑 4. 再次在终端输入 node version 验证 Q: IntelliSense 不显示提示怎么办？ A: 可能的原因： 1. 文件后缀名不对（检查是否为 .js） 2. 没有安装对应语言的扩展（如 Python 需要 Python 扩展） 3. VS Code 正在加载（等待几秒） 4. 尝试手动触发：按 Ctrl + Space Q: 代码改了但运行结果没变化？ A: 可能是没有保存文件。解决方法： 1. 检查文件名旁边是否有 ● 圆点（表示未保存） 2. 按 Ctrl + S 手动保存 3. 或者开启"自动保存"功能 Q: 终端路径不对怎么办？ A: 使用 cd 命令切换到项目文件夹： 🎉 恭喜你！ 如果你已经成功： • ✅ 创建了项目文件夹并打开到 VS Code • ✅ 检查了 Node.js 环境 • ✅ 创建了 app.js 文件 • ✅ 写入代码并看到 IntelliSense 提示 • ✅ 在终端运行代码并看到结果 那么你已经完成了编程入门的第一大步！ 记住：编程是一项需要大量练习的技能。不要害怕犯错，每个错误都是学习的机会。 🏋️ 动手练习任务 为了巩固所学知识，这里有一些练习任务供你完成： 练习1：个人信息卡片 ⭐ 任务： 创建一个对象来存储你的个人信息，并打印出来。 期望输出： 练习2：成绩计算器 ⭐⭐ 任务： 写一个函数计算学生的平均分，并判断等级。 提示： • 数组求和可以用循环：for (let i = 0; i < scores.length; i++) • 平均分 = 总分 / 科目数量 练习3：九九乘法表 ⭐⭐⭐ 任务： 用循环打印九九乘法表。 期望输出： 练习4：购物车系统 ⭐⭐⭐ 任务： 创建一个简单的购物车，能添加商品、计算总价。 练习5：猜数字游戏 ⭐⭐⭐⭐ 任务： 创建一个猜数字游戏（简化版，用固定答案）。 祝你编程愉快！如果有哪一步卡住了，随时问我。Happy Coding! 🚀 官方讲解视频： https://www.youtube.com/watch?v=MNBwGGwvvKE 欢迎开启你的编程之旅！这份笔记将带你从零开始，手把手教你如何在 VS Code 中编写并运行你的第一个程序。 欢迎开启你的编程之旅！这份笔记将带你从零开始，手把手教你如何在 VS Code 中编写并运行你的第一个程序。 一、准备工作：项目管理 在正式写代码之前，良好的组织习惯非常重要。 核心原则 • 以"文件夹"为单位： VS Code 建议你为每一个项目创建一个独立的文件夹。这样，所有的代码文件都会整齐地排列在左侧的"资源管理器"中，方便查找。 • 打开项目： 将你的文件夹打开到 VS Code 中，这是开启编程工作的最佳方式。 操作步骤 1. 在电脑上创建一个新文件夹（例如命名为 my first project） 2. 打开 VS Code 3. 点击 文件 (File) → 打开文件夹 (Open Folder) 4. 选择你刚创建的文件夹 5. 左侧资源管理器会显示这个文件夹的所有内容 二、环境检查：安装运行环境 (以 Node.js 为例) 虽然 VS Code 本身很强大，但运行特定的代码（如 JavaScript）需要电脑里安装对应的运行环境。 为什么需要 Node.js？ • Node.js 是 JavaScript 的运行环境，让你的 JavaScript 代码可以在电脑上直接运行（而不仅仅是在浏览器中）。 • 如果你跟着教程学习 JavaScript，必须先安装 Node.js。 如何检查是否已安装 1. 打开终端 (Terminal) ◦ 方式1：点击菜单栏 视图 (View) → 终端 (Terminal) ◦ 方式2：快捷键 Ctrl + ` Ctrl + ` Control + `` (反引号) 5.2 终端操作技巧 • 多终端窗口： 点击终端右上角的 + 可以开启多个终端 • 拆分屏幕： 点击拆分图标，可以同时看到多个终端 • 切换终端： 使用下拉菜单在不同终端间切换 • 清屏： 输入 clear (Mac/Linux) 或 cls (Windows) 5.3 运行你的第一个程序 准备工作： 在 app.js 中写入代码 更多练习代码示例： 你可以尝试运行以下不同的代码示例，感受 JavaScript 的魅力： 示例1：变量和计算 示例2：函数的使用 示例3：数组操作 示例4：对象的使用 示例5：条件判断 示例6：循环打印 示例7：综合练习 简单计算器 运行步骤： 1. 确认路径 ◦ 终端所在的路径应该是你的项目文件夹 ◦ 如果不对，使用 cd 命令切换到正确路径 ◦ 终端所在的路径应该是你的项目文件夹 ◦ 如果不对，使用 cd 命令切换到正确路径 2. 输入运行命令 Code block Bash Copy node app.js 这里的文件名要和你创建的文件名一致 这里的文件名要和你创建的文件名一致 这里的文件名要和你创建的文件名一致 3. 查看结果 ◦ 你会看到运行结果直接打印在终端上： Code block Plain Text Copy Hello World 我的第一个程序！ ◦ 你会看到运行结果直接打印在终端上： 成功标志： • ✅ 没有报错信息 • ✅ 显示了你用 console.log() 打印的内容 • ✅ 终端返回命令提示符（等待下一个命令） 💡 小白学习贴士 1. 多看 IntelliSense 的提示 IntelliSense 是你最好的老师，会告诉你每个对象后面能接什么功能。不要急着关闭它，多看看列表里的选项，了解有哪些可用方法。 2. 后缀名不要写错 如果 .js 写成了 .txt 或其他后缀，VS Code 就无法提供智能补全了。记住： • JavaScript 文件 → .js • Python 文件 → .py • HTML 文件 → .html • CSS 文件 → .css 3. 善用终端 终端不仅可以运行代码，还可以： • 安装第三方包（npm install） • 查看文件列表（ls 或 dir） • 创建文件夹（mkdir） • 版本控制（git 命令） 4. 结合 AI 功能 虽然这个基础教程侧重于手动操作，但你还可以利用： • Copilot Chat 的"代理模式 (Agent mode)"来帮你自动完成复杂的环境配置 • Ask 模式来解答编程问题 • 内联建议来加速代码编写 5. 学会写注释 注释是给自己和其他人看的"代码说明书"，养成写注释的好习惯非常重要！ 好的注释示例： 注释的黄金规则： • ✅ 解释"为什么"这样做，而不是"做了什么"（代码本身已经说明了做什么） • ✅ 复杂逻辑要注释 • ✅ 函数前要说明功能、参数和返回值 • ❌ 不要写废话注释（如 i++ // i自增） 6. 使用有意义的变量名 好的变量名让代码自己会说话！ 对比示例：