VS Code按Shift+Alt+F没反应,先查三件事:右下角语言模式是否为HTML(非Plain Text)、是否安装并启用了Prettier等格式化插件、settings.json中html.format.*配置值是否合法。

VS Code 按 Shift+Alt+F 没反应?先查这三件事
不是快捷键失效,而是格式化能力根本没加载进来。VS Code 默认有 HTML 格式化逻辑,但触发前提是「当前文件被识别为 HTML」且「有可用的 formatter」。
常见错误现象:Shift+Alt+F 按下后毫无反应;命令面板搜 Format Document 列表为空;右键菜单里“格式化文档”置灰。
- 检查右下角状态栏语言模式——必须显示
HTML,不是Plain Text或Auto;点它手动切一次最直接 - 确认已安装并启用 Prettier 或官方 HTML 语言支持插件;
esbenp.prettier-vscode是目前最稳定的 HTML 格式化后端 - 检查
settings.json中是否误配了html.format.*项(比如html.format.wrapLineLength: -1),非法值会导致整个 HTML 格式化模块静默退出
Sublime Text 的 Tab 不展开 Emmet 缩写?作用域没对
Emmet 在 Sublime Text 里默认只在 text.html.basic 作用域响应 Tab,而你写的 HTML 很可能不在这个上下文里。
典型场景:在 JS 文件里写模板字符串、用 .vue 或 .svelte 后缀保存、文件后缀是 .htm 而非 .html。
立即学习“前端免费学习笔记(深入)”;
- 按
Ctrl+Shift+P(Windows)或Cmd+Shift+P(macOS),输入Set Syntax: HTML手动切换语言模式 - 检查
Preferences → Settings – Syntax Specific,确认当前文件类型配置中没有禁用 Emmet(如"emmet_enabled": false) - 如果是在 JS/TS 模板字符串中写 HTML,需额外安装插件(如
Emmet for JavaScript)并配置scope规则,否则原生 Emmet 不会介入
CodeMirror 6 里怎么加 Shift-Alt-F 格式化 HTML?别套 CM5 的写法
formatDocument 这个命令名在 CodeMirror 6 里根本不存在,CM5 的 autoFormatRange 也不能直接搬过来用。CM6 的快捷键和格式化逻辑是解耦的,必须自己绑定 + 自己实现。
关键点:光注册快捷键没用,run 回调里必须调用真实格式化函数,否则按了等于没按。
- 确认你用的是
@codemirror/lang-html和prettier-plugin-html,二者缺一不可;仅靠keymap插件无法生成格式化能力 - 初始化编辑器时,在
extensions里注入keymap.of([{ key: "Shift-Alt-F", run: () => formatHTML(editor) }]) -
formatHTML函数得你自己写——要么封装prettier.format调用,要么用html-beautify等轻量库;CM6 不提供开箱即用的 HTML 格式化逻辑
Prettier CLI 批量格式化 HTML 时缩进不生效?检查 .prettierrc 覆盖范围
用 npx prettier --write "src/**/*.html" 命令跑完,发现缩进还是 4 空格,不是你配的 2 空格——大概率是配置文件没被读到,或者被更高优先级配置覆盖了。
Prettier 查找配置的顺序是:命令行参数 → .prettierrc(JSON / YAML / JS)→ package.json 里的 prettier 字段 → 默认值。
- 确保
.prettierrc文件放在项目根目录,且文件名完全匹配(不能是.prettierrc.json却用.prettierrc当扩展名) - 运行
npx prettier --find-config-path src/index.html验证 Prettier 实际加载的是哪个配置文件 - 如果项目里同时有
.editorconfig,注意它的indent_size可能干扰 Prettier 行为;建议统一用.prettierrc管理缩进,删掉.editorconfig中的重复项
.prettierrc 放错位置,批量格式化就永远不按你想的来。



















