从Windows记事本敲第一行<h1>开始，到VS Code装Live Server插件三秒刷新预览、用Emmet写10行HTML只要一行缩写、CodePen在线分享前端作品，用了7个HTML编辑器后把这几年踩过的坑和现在每天都在用的配置说一下

第一次写HTML是在大学机房的记事本里。敲完<h1>Hello World</h1>，保存成.txt，发现浏览器不认；改后缀名.html，双击打开，看到蓝色大字的那一刻整个人是兴奋的。但那个记事本之旅只持续了三天——没有高亮、没有自动缩进、没有错误提示，写错一个尖括号要找半小时。

后来陆续用过Notepad++、Sublime Text、Brackets、Dreamweaver、WebStorm、VS Code、CodePen、CodeSandbox，一路试下来发现一个真相：HTML编辑器没有"最好"的，只有"最合适你现在阶段"的。新手的需求和做项目的需求完全不同，写个简单页面的工具和管几十个站群的工具也不是一回事。

一、桌面HTML编辑器：6款主流工具的真实使用感受

桌面端编辑器是HTML开发的主力工具。下面这6款是我长期用过或深度试用过的，优缺点都是亲身感受，不是从官网简介抄来的。

二、VS Code从零到好用的配置清单

装完VS Code只是第一步。裸装的VS Code就是一个高级文本编辑器，要做HTML开发，至少需要装下面这几个插件。这是我自己每次重装系统必装的一套，一个不多一个不少：

装完这6个插件，VS Code就从一个文本编辑器变成了一个HTML开发环境。额外说一个很多新手不知道的设置：在VS Code设置里搜"format on save"，勾上。这样每次Ctrl+S保存文件时，Prettier会自动格式化代码。这个设置用上之后就回不去了，代码永远整整齐齐。

三、Emmet：让你写HTML的速度快三倍

Emmet是VS Code内置的HTML缩写引擎，不需要额外安装插件。它的核心逻辑是：你用简短的缩写语法描述HTML结构，按Tab键，VS Code自动展开成完整代码。

举个例子。你想写一个导航栏：一个nav里面套ul，ul里面有5个li，每个li里有一个带链接的a标签，链接文字分别是"首页""产品""关于""联系""博客"。如果手写，大概需要敲80-100个字符。用Emmet一行搞定：

nav>ul>li*5>a[href="#"]{项目$}

按Tab后自动展开为：

<nav><ul><li><a href="#">项目1</a></li><li><a href="#">项目2</a></li><li><a href="#">项目3</a></li><li><a href="#">项目4</a></li><li><a href="#">项目5</a></li></ul></nav>

Emmet的核心语法就几个符号，十分钟学会，一辈子受用：

四、在线HTML编辑器：不用装任何软件，打开浏览器就能写

桌面编辑器虽好，但有些场景在线工具更合适：临时调试一段代码、给别人演示效果、教学演示、或者在没装开发环境的电脑上快速写个页面。在线编辑器的优势是零安装、实时预览、一键分享。

CodePen是前端圈知名度最高的在线编辑器。它的社区生态很强——全球前端开发者在上面的公开作品数量惊人，你想实现什么效果（CSS动画、卡片布局、导航栏），搜一下基本能找到参考代码。免费版有广告但功能足够用，Pro版$8/月多了私密项目和更多存储空间。

JSFiddle更适合技术问答场景。你在Stack Overflow上看到的大部分前端问题，回答者都会贴一个JSFiddle链接，把bug复现出来。它的优势是加载速度快、界面简洁、支持主流JS框架。

五、不同阶段的HTML编辑器选择路线

说了这么多工具，按阶段整理一个清晰的选择路线。不需要每个都试，按自己的阶段对号入座就行：

六、几个新手经常问的问题

七、写HTML时两个容易被忽略的效率提升

除了选对编辑器，还有两件事能大幅提升写HTML的效率，但很多教程不提。

第一个是代码片段（Snippets）。VS Code支持自定义代码片段，把常用的HTML结构保存成快捷缩写。比如你经常写一个带图片+标题+描述的产品卡片，可以把整段HTML存成"product-card"片段，输入缩写按Tab就出来。配置方法：Ctrl+Shift+P打开命令面板，搜"snippets"，选"Configure User Snippets"，选html.json，在里面定义你的片段。一次配置，长期省时间。

第二个是浏览器开发者工具。严格来说这不属于"编辑器"，但写HTML的人离不开它。F12打开开发者工具，Elements面板可以实时改HTML和CSS看效果，改满意了再复制回编辑器。这个"先在浏览器里调试，再回编辑器改源码"的工作流，比在编辑器里改一次、刷新一次高效得多。

说穿了，HTML编辑器这个事跟选车有点像——有人开五菱宏光送货够用，有人需要特斯拉的自动驾驶，有人开保时捷追求极致性能。Notepad++是五菱宏光，轻量便宜够用；VS Code是特斯拉，智能好用生态强；WebStorm是保时捷，专业但贵。关键不是哪个车最好，是你的需求和预算决定了哪个最合适。

如果你现在刚开始学HTML，别在选编辑器上纠结太久。下载VS Code，装Live Server，新建一个index.html，敲下! + Tab，你就已经开始了。工具永远只是工具，真正重要的是你用它写出了什么。