Mac Sublime Text 4一键创建HTML+CSS项目模板-html教程-PHP中文网

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

星夢妙者

发布： 2025-11-13 22:31:02

原创

640人浏览过

通过自定义代码片段和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项目模板

在 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）：

<snippet>
  <content><![CDATA[
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>$1</title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  $2
  <script src="js/main.js"></script>
</body>
</html>
]]></content>
  <tabTrigger>html5</tabTrigger>
  <scope>text.html.basic</scope>
  <description>HTML5 Base Template</description>
</snippet>

登录后复制

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

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

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

立即学习“前端免费学习笔记（深入）”；

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

创建脚本示例（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 创建完成！"

登录后复制