Ctrl+Shift+N模糊搜文件比右键新建更快:输入几个字母(如userlist)即可跳转,输全名反而慢;默认不搜隐藏文件,需Ctrl+Alt+Shift+N启用;支持路径片段搜索,已打开文件置顶。

Ctrl+Shift+N 模糊搜文件比右键新建更快
多数人新建文件的第一反应是右键目录 → New → HTML File,但真正省时间的做法是直接按 Ctrl+Shift+N(Windows/Linux)或 Cmd+Shift+O(macOS),输入几个字母就跳转。比如想建 UserList.vue,输 userlist 或 ulist 就够了;输全名反而慢,还容易拼错。
常见错误是默认不搜隐藏文件(如 .gitignore、.env),需要手动触发:按 Ctrl+Alt+Shift+N 才能包含它们。
- 搜索支持路径片段,例如输
src/api可快速定位到该目录下 - 输错时按
Esc退出,不需清空重输 - 已打开的文件也会出现在结果顶部,方便快速切换
! + Tab 生成 HTML5 骨架最轻量
在空文件里敲 ! 再按 Tab,WebStorm 会自动补全标准 HTML5 结构,比右键新建更顺手——尤其适合临时测试、写 demo 或拆分组件时快速搭架子。
这个动作依赖 Emmet 插件,默认开启;如果失效,检查是否误关了 Settings → Editor → General → Emmet。
- 它生成的是最小可用结构,不含额外 meta 或 script,干净可控
- 后续可接 Emmet 补全,比如在
<body>里输div.container>h1{Hello}+p+Tab,直接展开 DOM - 不推荐用
html:4s或html:xt这类旧模板,HTML5 是当前事实标准
自定义 Vue/JSX 模板避免重复粘贴
每次新建 .vue 文件都手动敲三块结构(<template>、<script>、<style>),很快就会烦。WebStorm 允许你预设模板,路径是:Settings → Editor → File and Code Templates → Files 标签页 → 点 + 新建。
关键点在于变量替换和作用域控制:
- 用
${NAME}自动填入文件名(如新建Header.vue,name: 'Header'就自动写进export default) -
<style scoped>要显式写,否则新建后默认是全局样式,容易污染 - 模板保存后,右键新建时选择你命名的模板(如
Vue Component (scoped)),不是默认的Vue File
Live Template 快速插入常用代码块
模板文件解决的是“整个文件”的初始化,而 Live Template 解决的是“局部代码块”的复用。比如写 Vue 的 watch 或 React 的 useEffect,不用每次都手敲。
配置入口:Settings → Editor → Live Templates → 选语言(如 JavaScript 或 Vue)→ 点 + → Live Template。
- 缩写(Abbreviation)建议简短易记,比如
ue对应useEffect(() => {}, []) - 勾选
Reformat according to style,否则插入后格式可能错乱 - 函数参数位置用
$END$标记光标最终停留点,别漏掉
复杂项目里,模板层级容易混乱——File Template 管整个文件骨架,Live Template 管函数级片段,Surround With(Ctrl+Alt+T)管选中代码包裹,三者职责不同,混用反而降低效率。


















