1.2 准备工具：5分钟搞定开发环境

1.2 准备工具：5分钟搞定开发环境

别担心，配置开发环境一点也不难！跟着下面的步骤操作，5分钟内就能开始写你的第一行JavaScript代码。

安装VS Code（写代码的“超级笔记本”）

1. 下载VS Code

• 打开浏览器，访问VS Code官网：
• 点击首页的“Download for Windows”按钮（系统会自动识别你的操作系统）
• 等待安装包下载完成（文件大小约80-100MB）

2. 傻瓜式安装步骤

1. 找到下载好的安装包（通常在“下载”文件夹），双击运行
2. 出现安装界面，点击“我同意此协议”，然后点击“下一步”
3. 安装位置保持默认（或选择你喜欢的文件夹），点击“下一步”
4. 重要：在“选择附加任务”页面，勾选这三个选项：
   • ✅ 创建桌面快捷方式
   • ✅ 将“通过Code打开”操作添加到Windows资源管理器文件上下文菜单
   • ✅ 将“通过Code打开”操作添加到Windows资源管理器目录上下文菜单
5. 点击“下一步”，然后点击“安装”
6. 等待进度条完成，点击“完成”启动VS Code

必备基础配置（3步完成）

第1步：新建第一个文件夹

1. 在电脑桌面上右键点击空白处
2. 选择“新建”→“文件夹”
3. 将文件夹命名为my-first-js（可以直接复制粘贴这个名字）

第2步：用VS Code打开文件夹

1. 打开VS Code软件
2. 点击欢迎界面的“打开文件夹”（或按Ctrl+K然后按Ctrl+O）
3. 在弹出的窗口中找到并选中刚才创建的my-first-js文件夹
4. 点击“选择文件夹”

第3步：创建第一个HTML文件

1. 在VS Code左侧的“资源管理器”面板中，点击my-first-js文件夹
2. 点击右上角的“新建文件”图标（或按Ctrl+N）
3. 将文件命名为index.html（必须是这个名字，包括.html后缀）
4. 按下Enter键保存

第4步：安装“Open in Browser”插件 这个插件能让你一键在浏览器中查看代码效果：

1. 在VS Code左侧找到扩展图标（像四个小方块的图标），点击打开
2. 在搜索框中输入“Open in Browser”
3. 找到第一个搜索结果（作者是TechER），点击“安装”
4. 安装完成后会显示“已安装”

认识两个核心工具

VS Code：写代码的“笔记本”

• 作用：专门用来写代码的编辑器，就像你写作业用的笔记本，但它有代码高亮、自动补全、错误提示等超能力
• 界面组成：
  • 左侧：文件资源管理器（显示你的文件夹和文件）
  • 中间：编辑区域（你写代码的地方）
  • 底部：状态栏（显示文件类型、编码格式等）

浏览器（Chrome）：运行代码的“舞台”

• 作用：把你写的代码“表演”出来的地方，就像戏剧需要舞台才能呈现给观众
• 如何使用：
  1. 在VS Code中打开index.html文件
  2. 右键点击编辑区域的空白处
  3. 选择“Open in Default Browser”（或按Alt+B快捷键）
  4. 你的代码就会在Chrome浏览器中运行起来

> 编程金句：好的工具是成功的一半，但比工具更重要的是开始行动的勇气。现在，你已经拥有了写出第一个程序的所有条件！