新手刚开始学网页，第一个纠结的往往是“用什么编辑器”。网上有人说 VS Code 好，有人说 Sublime 轻，还有人推荐 WebStorm。这篇我们把三款主流编辑器摆在一起对比，告诉你它们各自适合谁，然后给出一套新手拿来就能用的插件清单和基础配置。

先说结论：如果你完全没主意，直接选 VS Code。下面会讲为什么。

一、三款编辑器对比

网页设计圈用得最多的就是这三款，定位完全不同：

• VS Code（免费）：微软出品，免费开源，生态最旺。插件多到你想不到，文档社区一搜一大把，新手老手都在用。启动比 WebStorm 快，功能比 Sublime 全，是目前网页设计领域的事实标准。
• Sublime Text（轻量付费）：以快著称，打开几兆的大文件也秒开。界面极简，适合喜欢“纯文本编辑器”手感的人。但需要付费（有无限试用），插件生态不如 VS Code，配置门槛偏高。
• WebStorm（重型付费）：JetBrains 出品，智能提示和重构能力最强，适合做大型项目。但启动慢、吃内存、要付费订阅，对新手来说“功能过剩”反而增加学习成本。

/* 三款编辑器横向对比 */
VS Code     | 免费  | 生态最旺  | 新手老手通吃
Sublime     | 付费  | 极致轻量  | 喜欢极简的人
WebStorm    | 付费  | 智能最强  | 大型项目团队

二、为什么推荐新手用 VS Code

不是说另外两款不好，而是对新手来说 VS Code 的综合优势最明显：

• 零成本上手：免费下载，装好就能用，不用纠结授权和订阅。
• 自带该有的功能：语法高亮、自动补全、Emmet 缩写、终端、Git 集成都内置，不用折腾配置。
• 遇到问题搜得到答案：用户量大意味着网上教程和问答多，新手踩的坑别人早踩过，搜一下就有解。
• 插件按需安装：默认干净，需要什么功能装什么插件，不会被一堆用不上的功能干扰。

从 VS Code 入门，等以后做大型项目觉得不够用了，再切到 WebStorm 也来得及，迁移成本不高。

三、必装插件清单

VS Code 装好之后，先装这几个插件，写代码体验会立刻不一样：

• Live Server：本地起一个静态服务器，保存 HTML 自动刷新浏览器。新手调试页面必备，不用每次手动刷新。
• Prettier：代码格式化工具，一键把缩进、换行、引号统一成规范风格。团队协作时尤其有用，避免“格式之争”。
• Auto Rename Tag：改 HTML 标签名时自动同步改闭合标签，比如把 <div> 改成 <section>，闭合的 </div> 会跟着变成 </section>。
• CSS Peek：在 HTML 里按住快捷键能跳转到对应 CSS 定义，找样式不用满文件翻。

// 在 VS Code 里装插件：
// 1. 左侧栏点扩展图标（或 Ctrl+Shift+X）
// 2. 搜插件名，点 Install
// 3. 装完重启编辑器生效

推荐先装这四个：
- Live Server      本地预览
- Prettier         格式化
- Auto Rename Tag  标签同步
- CSS Peek         样式跳转

四、基础配置

插件装好后，再做几项基础配置，写代码会更舒服。打开设置（Ctrl+, 或 Cmd+,），改这几项：

1. 字体

用等宽字体，写代码才对齐。推荐 "Fira Code" 或 "JetBrains Mono"，都支持连字，把 =>、!== 这类符号显示成一个整体，看着舒服。

// settings.json 里加：
{
  "editor.fontFamily": "'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 22
}

2. 保存自动格式化

让 Prettier 在保存时自动整理代码格式，省掉手动格式化的动作。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

3. Emmet 缩写

VS Code 默认支持 Emmet，敲缩写按 Tab 自动展开。比如：

!-- 敲下面这行，按 Tab 展开 --
ul.card-list>li.card*3

!-- 会变成 --
<ul class="card-list">
  <li class="card"></li>
  <li class="card"></li>
  <li class="card"></li>
</ul>

Emmet 是写 HTML 的加速器，常用缩写背熟几个，效率立刻翻倍。默认就开着，不用额外配置。

五、别在工具上耗太久

新手常犯的一个误区是“配置编辑器上瘾”——花一整天调主题、配色、图标，结果一行代码没写。编辑器配置够用就行，写代码本身才是重点。先用默认配置跑起来，遇到具体痛点再针对性优化，比一开始就追求“完美配置”靠谱得多。

下一篇我们整理一份常用快捷键大全，背熟之后写代码会更顺手。