VSCode是免费开源轻量强大的代码编辑器，适合初学者与专业人士；下载安装后熟悉界面、新建HTML文件并用Live Server预览，再安装ESLint、Prettier、Auto Rename Tag三大插件提升开发效率。
VSCode 是一款免费、开源、轻量又强大的代码编辑器，适合初学者快速上手，也深受专业开发者的喜爱。安装简单，配置灵活，开箱即用就能写代码。
下载与安装：选对版本，一步到位
打开官网 code.visualstudio.com，页面会自动识别你的操作系统（Windows / macOS / Linux），点击“Download for [系统名]”即可。Windows 用户建议选 .exe 安装版（带自动配置路径和右键菜单），不推荐 ZIP 解压版——省去手动配置的麻烦。安装过程一路默认下一步，勾选“Add to PATH”和“Add “Open with Code” action”能让终端和鼠标右键更方便调用 VSCode。
初次启动与界面熟悉：不用怕，关键区域就这几个
启动后你会看到左侧活动栏（5 个图标）、上方菜单栏、中央编辑区、左下角状态栏，以及右侧可能弹出的“开始”页。重点先认住：
• 左侧第2个图标是 资源管理器（Explorer），用来管理文件夹和文件；
• 第3个是 搜索（Search），支持全局关键词查找；
• 第4个是 源代码管理（Source Control），后续学 Git 时会用到；
• 按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（macOS）呼出命令面板，几乎所有操作都能搜到。
新建第一个文件：写一行 HTML 并预览
点击资源管理器顶部的“打开文件夹”，选一个空文件夹（比如 D:\my-first-code）。然后右键空白处 → “新建文件”，命名为 index.html。双击打开，在里面输入：
Hello, VSCode!
按 Ctrl+S 保存。接着安装插件提升体验：在左侧第5个图标“扩展（Extensions）”里搜 Live Server，点击安装。安装完右键编辑区 → “Open with Live Server”，浏览器会自动打开并显示标题——修改文字再保存，页面实时刷新。
让 VSCode 更好用：三个新手必装插件
除了 Live Server，推荐立即安装：
• ESLint：帮你检查 JavaScript 语法和潜在错误；
• Prettier：一键格式化代码，保持缩进、空格、换行统一；
• Auto Rename Tag：修改 HTML 开始标签时，自动同步结束标签。
装完重启或重载窗口（Ctrl+Shift+P → 输入 “Developer: Reload Window”），它们就会默默工作。
基本上就这些。不需要懂太多概念，先跑起来，再一点点加功能。VSCode 的强大不在一开始有多复杂，而在你每次遇到小问题时，总能找到一个插件或快捷键把它解决掉。
