应使用 web-mode 而非 html-mode，因其能统一高亮和处理 HTML 中嵌入的 JS、CSS 及 Jinja/ERB/Vue/JSX 等模板语法，支持智能标签补全、缩进控制与轻量模板插入，且配置简洁、维护活跃。
用 web-mode 而不是 html-mode
Emacs 默认的 html-mode 只处理纯 HTML，遇到 <script> 里的 JS 或 <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 后敲 > 却没自动补上 </div> —— 这不是 bug，是 web-mode 默认关掉了它的标签补全逻辑，只留括号/引号配对。
要启用标签自动闭合，得显式开启：
(setq web-mode-enable-auto-closing-tag t)然后
revert-buffer 或重启 buffer。
立即学习“前端免费学习笔记（深入）”；
- 这个设置只在
web-mode下生效，不影响其他模式，放心开 - 如果补全太激进（比如在
<img src="...">后也强行加</img>），说明你用的是旧版web-mode；升级到 2023 年后的版本，它会识别自闭合标签 - 别碰
sgml-balanced-tag-edit-mode—— 它依赖 DTD，现在没人维护，且和web-mode冲突
怎么快速插入常用结构（比如 HTML5 模板、表单字段）
手敲 <!DOCTYPE html><html><head><meta charset="utf-8">… 太慢，但又不想装重型 snippet 插件（比如 yasnippet）——web-mode 自带轻量模板系统够用。
执行 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>开始标签内，C-c C-t会智能补全对应结束标签；不在标签内时，才触发上面的模板列表 - 别用
html-skeleton包 —— 功能重叠、不更新、且不识别当前 buffer 的模板引擎上下文
Vue / JSX 文件里 HTML 片段不语法高亮
打开 .vue 文件，<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 这种按内容类型分层处理的机制才稳得住。
