第二节 编辑器选择与配置
“工欲善其事，必先利其器。” 在 Web 前端开发领域，代码编辑器是我们每天相伴时间最长的生产力工具。选择一款顺手、强大的编辑器，能让开发过程事半功倍。 尽管市面上曾流行过 Sublime Text、Atom 等优秀的编辑器，也有功能强大的付费 IDE 如 WebStorm，但本教材首推 Visual Studio Code（简称 VS Code）。 为什么选择 VS Code？ VS Code 是由微软开发的一款免费、开源、跨平台的现代化代码编辑器。凭借其轻量级的启动速度、强大的原生功能以及极其丰富的插件生态系统，它已成为目前全球前端开发者中最主流、最受欢迎的选择，几乎成为了行业事实标准。
一、vscode安装
（一）下载VSCode
- 打开浏览器，访问 (
https://code.visualstudio.com/)。 - 官网首页会自动识别你的操作系统。通常情况下，直接点击首页巨大的蓝色按钮（例如“Download for Windows”）即可下载最新稳定版。
（二）安装VSCode
- 找到下载好的安装包，双击运行
- 在安装向导中，强烈建议勾选 “添加到 PATH (Add to PATH)”，这将方便我们后续在命令行中快速调用编辑器。
- 点击Install（安装）按钮，等待安装完成。
（三）启动VSCode
安装完成后，确保勾选了“运行 Visual Studio Code”，点击完成即可启动。你也可以通过桌面快捷方式或开始菜单启动它。
（四）安装扩展（可选）
VS Code 默认界面为英文。对于初学者，我们建议安装官方中文语言包以便更快上手。
- 打开 VS Code 后，点击左侧活动栏中的“扩展”图标（由四个方块组成）。
- 在顶部的搜索框中输入“Chinese”，找到由 Microsoft 提供的“Chinese (Simplified) (简体中文) Language Pack”。
- 点击“Install”安装。安装完成后，根据右下角的弹窗提示，点击“Change Language and Restart”（更改语言并重启），软件重启后界面即变为中文。
图1-1 中文（简体）插件
二、AI 智能编码助手的配置
VS Code 之所以强大，很大程度上归功于其丰富的插件生态。插件（Extension）是用于扩展编辑器功能的小工具，能提供诸如代码高亮、格式化、自动补全等增强功能。 在 AI 时代，AI 智能编码助手已成为开发者的必备插件。它就像一位坐在你身旁的资深导师，能基于大模型帮你生成代码、解释复杂的逻辑、甚至自动写注释和测试用例。 本教材以阿里巴巴推出的**通义灵码（TONGYI Lingma）**为例，演示如何为你的 VS Code 装上“AI 大脑”。
（一）插件安装与登录
1.打开扩展中心
打开 VS Code 后，点击左侧活动栏中的“扩展”图标（由四个方块组成）。
2.搜索并安装
在搜索框中输入“TONGYI Lingma”。找到该插件后，点击“安装”。
3.启用与重启
安装完成后，确保插件处于“已启用”状态。建议重启一次 VS Code 以确保插件功能完全生效。
4.登录账号
重启成功后，点击左侧活动栏新出现的通义灵码图标，按照界面提示登录你的阿里云账号，即可开始使用智能编码功能。
（二）基础使用方法
安装并登录通义灵码后，你可以通过以下两种常用方式让 AI 辅助你的学习与开发：
1.单行代码自动解释（内联辅助）
在 CSS 或 JavaScript 文件中，将鼠标光标移动到任意一行代码的末尾，输入 //（双斜杠，表示注释），稍微等待 1 秒钟，通义灵码会自动以灰色字体的形式生成该行代码的作用解释。此时只需按下 Tab 键，即可采纳并输出这段解释内容。
2.多行代码详细解析（对话框辅助）
当遇到一段复杂的、难以理解的代码块时： 首先，用鼠标选中这段你不理解的代码。 接着，按下快捷键 Ctrl + Shift + L（Windows）唤出通义灵码的对话框。 在输入框中输入 /e（Explain 的缩写），然后连续按下两次回车键。AI 就会为你提供这段代码的逐行详细解释。
（三）扩展阅读
阿里云高校计划： 为了支持教育与科研，阿里云为在校大学生提供了丰富的云计算资源和免费的学习权益。建议同学们在课后主动了解并申请该计划，获取免费的云服务器资源，这将为你后续学习网站部署与上线提供极大的便利。
腾讯云+校园： 为在校大学生提供丰富的云计算资源和学习权益，建议同学们了解和申请。