!+Tab是最轻量的HTML5骨架生成方式，在空文件首行输入!后按Tab即可生成标准HTML5结构，依赖默认开启的Emmet插件，生成内容干净最小化且光标定位在<title>内。
! + Tab 是最轻量的 HTML5 骨架生成方式
空文件里敲 ! 再按 Tab，WebStorm 就会补全标准 HTML5 结构——这是起步最快、干扰最少的方式。它不依赖任何外部模板配置，也不需要提前设置作用域或路径，只要 Emmet 插件开着（默认开启）就能用。
常见错误是误以为要输 html:5 或 html:4s，这些旧写法在现代项目里容易引入过时的 meta 或 doctype；! 生成的是干净、最小可用的结构，<meta charset="UTF-8"> 和 <title></title> 都有，但没多余 script 或 viewport，留给你按需加。
- 必须在空文件或光标位于首行开头时触发，否则可能只补局部片段
- 如果失效，检查
Settings → Editor → General → Emmet是否勾选了 “Enable Emmet for HTML” - 补完后光标停在
<title>标签内，直接输页面名即可
Ctrl+Shift+N 比右键新建更快，但默认不搜隐藏文件
想建 index.html？别右键 → New → HTML File。直接按 Ctrl+Shift+N（macOS 是 Cmd+Shift+O），输入 index 或 ind 就能命中，输全名反而慢，还容易拼错。
真正卡住人的地方是：默认不包含隐藏文件（如 .env、.gitignore），哪怕你搜 .ht 也出不来 .htaccess。必须手动触发完整搜索：Ctrl+Alt+Shift+N（macOS 是 Cmd+Alt+Shift+O）。
立即学习“前端免费学习笔记（深入）”；
- 支持路径片段匹配，比如输
src/views会跳转到该目录下，方便快速定位并新建 - 已打开的文件会置顶，适合边写边建配套文件（如建完
Home.vue，立刻搜home新建Home.spec.ts） - 输错不用清空，按
Esc退出重来就行
自定义 HTML 模板时，viewport 和 CDN 引入别硬编码
项目里每次都要加 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 和 Bootstrap CDN？把它们写进模板确实省事，但要注意：硬编码版本号（如 bootstrap@5.3.2）会让模板迅速过期；写死路径（如 ../css/reset.css）则在不同层级新建文件时失效。
更稳妥的做法是用 WebStorm 的变量机制：${NAME} 填文件名，${DATE} 填日期，但对路径和版本号，建议留空或用占位符（如 <!-- CDN: bootstrap@latest -->），靠团队约定或脚本后续注入。
- 模板路径：
Settings → Editor → File and Code Templates → Files → HTML File - 修改前先点
Copy备份原模板，避免改崩后无法恢复 - 如果项目用 Vite 或 Webpack，模板里别写
script src="/node_modules/xxx"，这类路径在开发服务器下根本不存在
Ctrl+Alt+Insert 创建 HTML 文件，但快捷键冲突需手动解绑
很多人设了 Ctrl+Alt+Insert 专用于新建 HTML 文件，结果发现点了没反应——其实是这个组合键被全局“新建文件”操作占用了，它弹出的是通用新建菜单，不是直出 HTML。
要让它真正生效，得进快捷键设置里把冲突项删掉：Settings → Keymap → Main menu → File → New → File，右键 Remove 默认绑定，再给 HTML File 单独绑定 Ctrl+Alt+Insert。
- 绑定后，在任意目录下按快捷键，直接弹出文件名输入框，无需再选类型
- 注意 macOS 用户需用
Cmd+Option+I，且部分键盘可能映射为Cmd+Opt+Insert（取决于键盘型号） - 如果同时用了 IdeaVim 插件，该快捷键会被拦截，需在 Vim 设置里排除
真正麻烦的不是怎么建文件，而是建完之后要不要加 scoped、要不要配 lang="ts"、要不要初始化 setup() —— 这些没法靠快捷键解决，得靠模板变量和 Live Template 配合。一个没填对的 ${NAME} 或漏掉的 $END$ 光标定位，就可能让后续十次新建都多一步手动调整。
