Emacs怎么写HTML_高级编辑器HTML技巧【技巧】
胖丽酱_9238
发布时间：2026-03-12 23:13:03
|
908人浏览过
|
来源于php中文网
原创
应使用 web-mode 而非 html-mode，因其能统一高亮和处理 HTML 中嵌入的 JS、CSS 及 Jinja/ERB/Vue/JSX 等模板语法，支持智能标签补全、缩进控制与轻量模板插入，且配置简洁、维护活跃。
用 web-mode 而不是 html-mode
Emacs 默认的 html-mode 只处理纯 HTML，遇到 <script></script> 里的 JS 或 <style></style> 里的 CSS 就直接当普通文本高亮，标签补全、缩进、注释都错乱。真实项目里 HTML 几乎总是混着 JS、CSS、模板语法（比如 Jinja、ERB），web-mode 是唯一能统一处理这些的主流模式。
安装后加这行到配置里：
(add-to-list 'auto-insert-alist '(".*\.html?\'" . "html"))再手动
M-x web-mode 切换一次，之后打开
.html 文件就自动启用了。
- 别用
mmm-mode 或 mmm-web-mode —— 配置复杂、维护停更、和现代框架（如 Vue SFC）根本不兼容
-
web-mode 的 web-mode-engines-alist 可以绑定后缀到模板引擎，比如把 .j2 映射到 jinja，否则变量插值 {{ foo }} 会被当成普通文本
- 如果缩进异常，检查
web-mode-code-indent-offset 和 web-mode-markup-indent-offset 是否一致；默认是 2，但团队项目可能要求 4
electric-pair-mode 自动闭合标签失效怎么办
很多人开了 electric-pair-mode，输入 <div> 后敲 <code>> 却没自动补上
—— 这不是 bug，是
web-mode 默认关掉了它的标签补全逻辑，只留括号/引号配对。
要启用标签自动闭合，得显式开启：
(setq web-mode-enable-auto-closing-tag t)
然后
revert-buffer 或重启 buffer。
立即学习“前端免费学习笔记（深入）”；
- 这个设置只在
web-mode 下生效，不影响其他模式，放心开
- 如果补全太激进（比如在
<img src="..." alt="Emacs怎么写HTML_高级编辑器HTML技巧【技巧】" > 后也强行加 web-mode；升级到 2023 年后的版本，它会识别自闭合标签
- 别碰
sgml-balanced-tag-edit-mode —— 它依赖 DTD，现在没人维护，且和 web-mode 冲突
怎么快速插入常用结构（比如 HTML5 模板、表单字段）
手敲 <meta charset="utf-8">… 太慢，但又不想装重型 snippet 插件（比如 yasnippet）——web-mode 自带轻量模板系统够用。
HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
执行 M-x web-mode-insert-tag，输入 html:5 回车，立刻生成完整 HTML5 骨架；输 form:text 就插入带 label 和 input 的字段组。
- 支持的模板名见
web-mode-tag-map 变量，常用有：html:5、div、form:post、table:2
- 如果光标在
<div> 开始标签内，<code>C-c C-t 会智能补全对应结束标签；不在标签内时，才触发上面的模板列表
- 别用
html-skeleton 包 —— 功能重叠、不更新、且不识别当前 buffer 的模板引擎上下文
Vue / JSX 文件里 HTML 片段不语法高亮
打开 .vue 文件，<template></template> 区域全是白底黑字，JSX 里写 <div>hello</div> 也没高亮 —— 这是因为 web-mode 默认不识别这些扩展名，需要手动注册。
加这几行到配置：
(add-to-list 'auto-insert-alist '("\.vue\'" . "vue"))<br>(add-to-list 'web-mode-content-types-alist '("vue" . "\.vue\'"))<br>(add-to-list 'web-mode-content-types-alist '("jsx" . "\.jsx\'"))再确保
web-mode-engines-alist 里有
("vue" . "vue") 和
("jsx" . "react")。
- 路径匹配必须用正则，
"\.vue\'" 中的 \' 表示文件结尾，避免误匹配 vue.config.js
- JSX 必须设为
"react" 引擎，否则 { } 插值不会被识别为 JS 上下文
- 改完配置后，已打开的
.vue 文件要 M-x web-mode 手动重载，不能只靠 revert-buffer
HTML 编辑真正的难点不在补全或高亮，而在于上下文感知：同一对尖括号，在 .html 里是标记，在 .vue 里可能是模板指令，在 .erb 里又夹着 Ruby。所有“通用”方案都会在这里掉链子，得靠 web-mode 这种按内容类型分层处理的机制才稳得住。
