使用 sublime text 的 snippet 和宏功能可自动化前端项目初始化。1. 先准备项目结构模板，通过多文件新建并保存为 .sublime-project 文件实现快速恢复；2. 创建 snippet 快速生成 html5 基础结构，在 index.html 中输入 html5 按 tab 键即可展开完整页面结构；3. 利用宏录制新建多个文件并自动命名，提升初始化效率；4. 可结合 sidebarenhancements 等插件进一步实现更完整的结构自动生成。
创建前端项目时，手动新建文件夹、写基础 HTML 结构、引入 css 和 JS 文件这些重复性工作其实完全可以自动化。用好 sublime text 的代码片段（Snippet）和宏（Macro）功能，就能快速实现一个标准化项目结构的初始化，节省时间，也减少出错。
1. 准备你的项目结构模板
前端项目通常有固定的结构，比如：
project/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── assets/ └── images/
你可以先手动创建一个这样的结构，作为模板。或者，用 Sublime 的“多文件新建”功能来快速生成。比如，打开 Sublime，新建多个标签页，分别命名为
index.html
、
css/style.css
、
js/main.js
、
assets/images/
（最后一个可以留空，只作为结构展示），然后保存为一个
.sublime-project
文件，这样每次打开这个项目文件就能快速恢复结构。
立即学习“前端免费学习笔记（深入）”；
小技巧：保存项目时，Sublime 会记录当前打开的文件和窗口状态，适合用于快速恢复项目初始状态。
2. 使用 Snippet 快速生成 HTML 基础结构
Sublime 的代码片段功能非常适合用来快速生成标准 HTML 页面结构。你可以自己创建一个 Snippet，比如输入
html5
后按 Tab 键就自动展开完整的 HTML5 模板。
创建方法如下：
- 打开
Tools > Developer > New Snippet...
- 替换内容为如下代码：
<snippet> <content><![CDATA[ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="js/main.js"></script> </body> </html> ]]></content> <tabTrigger>html5</tabTrigger> <scope>text.html.basic</scope> </snippet>
- 保存为
html5.sublime-snippet
，放在默认的
Packages/User
文件夹中。
这样在新建的
index.html
文件中输入
html5
后按 Tab 键，就能一键生成完整结构，连 CSS 和 JS 引用都自动写好。
3. 利用宏录制简化重复操作
如果你希望一键新建多个文件并自动命名，可以使用 Sublime 的宏录制功能：
- 打开
Tools > Record Macro
- 手动执行一系列操作，比如：
- 新建文件（
Ctrl + N
）
- 保存为
index.html
- 再新建文件，保存为
css/style.css
- 再新建文件，保存为
js/main.js
- 新建文件（
- 停止录制后，保存宏为
init_project.sublime-macro
- 然后你可以为这个宏绑定快捷键，方便一键执行
虽然宏不能自动创建文件夹结构，但配合 Snippet 使用，可以大大加快初始化流程。
4. 高阶玩法：结合插件自动创建结构
如果希望更进一步，比如自动创建整个文件夹结构，可以安装插件，比如：
- FileDiffs
- SideBarEnhancements
- ProjectManager
其中，SideBarEnhancements 插件支持右键菜单新建文件夹、文件，并且可以自定义模板。你可以结合它和 Snippet，实现更完整的项目初始化体验。
基本上就这些。用好 Snippet 和宏，就能在 Sublime 里快速搭建一个标准前端项目模板。虽然看起来简单，但长期下来能节省不少重复劳动。
