Mac Sublime Text 4一键创建HTML+CSS项目模板

通过自定义代码片段和Shell脚本，可在Mac上用Sublime Text 4高效创建HTML+CSS项目。1. 创建html5前缀的snippet生成HTML模板；2. 编写shell脚本一键生成含css/js/img目录的项目结构；3. 安装SideBarEnhancements插件提升文件操作效率；4. 整合流程：运行脚本→打开项目→使用片段填充内容，实现快速初始化。

在 Mac 上使用 Sublime Text 4 快速创建 HTML+CSS 项目模板，可以通过自定义“片段（Snippet）”或“插件（Package）”实现一键生成基础文件结构。虽然 Sublide Text 本身不支持一键创建完整项目文件夹，但结合快捷方式和代码片段，可以极大提升效率。

1. 创建 HTML 基础代码片段

Sublime Text 的 snippets 功能允许你输入简短前缀后自动补全完整代码。适合快速生成 index.html 和基础 CSS 结构。

• 打开 Sublime Text → Tools → Developer → New Snippet…
• 将默认内容替换为以下代码：

HTML 模板示例（保存为 html5-template.sublime-snippet）：

  


  
  
  
  


  $2
  


]]>
  html5
  text.html.basic
  HTML5 Base Template

• 保存路径：~/Library/Application Support/Sublime Text/Packages/User/html5-template.sublime-snippet
• 使用方法：新建文件，输入 html5，按 Tab 键即可展开模板

2. 自动创建项目文件夹结构

Sublime Text 无法直接创建文件夹，但你可以通过 Shell 脚本或 Automator 实现一键生成标准项目结构。

创建脚本示例（macOS 终端运行）：

#!/bin/bash
# 一键创建 HTML+CSS 项目
project_name="$1"
mkdir -p "$project_name"/{css,js,img}
touch "$project_name"/index.html
touch "$project_name/css/style.css"
touch "$project_name/js/main.js"
echo "HTML+CSS 项目 $project_name 创建完成！"

• 将脚本保存为 newweb.sh，赋予执行权限：chmod +x newweb.sh
• 使用：./newweb.sh my-project，自动创建带结构的文件夹
• 可配合终端别名简化命令，如添加到 ~/.zshrc：alias newweb='./newweb.sh'

3. 配合 SideBarEnhancements 插件提升效率

安装 SideBarEnhancements 插件后，可通过右键菜单快速创建文件，结合模板更高效。

• 使用 Package Control 安装 “SideBarEnhancements”
• 在项目文件夹右键 → New File → 粘贴预设内容或调用 snippet
• 可配合 “FileHeader” 类插件自动插入注释或 CSS 引入

4. 推荐工作流整合

将以上方法组合使用，形成高效开发习惯：

• 先运行脚本生成项目结构
• 用 Sublime 打开项目文件夹
• 在 index.html 中输入 html5 + Tab 自动生成页面骨架
• 在 css/style.css 中使用常用样式片段（可另建 CSS snippet）

基本上就这些。虽然 Sublime Text 4 没有像专业 IDE 那样的项目模板功能，但通过代码片段 + 外部脚本 + 插件配合，完全可以实现接近“一键创建”的体验。关键是把常用结构固化下来，减少重复劳动。