Espresso 是一款专为 macOS 设计的强大网页编辑与开发工具，以其优雅的界面、高效的代码编辑能力和直观的实时预览功能而闻名。它将代码编辑器、CSS 编辑工具、文件管理器和预览服务器融为一体，旨在为前端开发者与设计师提供流畅的一体化工作体验。

一、核心界面与工作区详解

Espresso 的界面设计紧凑而功能分区明确，主要分为以下几个核心区域：

导航边栏（左侧）： 顶部为项目文件树，以清晰的层级结构展示项目中的所有文件和文件夹。底部是“片段”和“注释”管理器，方便快速插入代码块和查看项目备注。
编辑主区域（中部）： 这是核心工作区。支持分页（Tab）编辑，每个打开的文件都会以一个标签页呈现。编辑器提供语法高亮、代码折叠、智能缩进等功能，并针对 HTML、CSS、JavaScript、PHP 等多种语言进行了优化。
CSS 侧边栏（右侧）： Espresso 的特色功能之一。当编辑 HTML 文件时，此侧边栏会自动分析文档结构，并列出所有关联的 CSS 规则。你可以在此直接查看、编辑甚至创建新的 CSS 样式，无需在文件间频繁切换。
实时预览窗口（可分离）： 通过工具栏按钮或快捷键可以呼出实时预览窗口。它会自动刷新，即时反映代码更改，并支持在多个浏览器引擎（如 WebKit）下预览，是调试样式的利器。
底部状态栏： 显示当前文件的编码、语法类型、光标位置等信息，并提供错误检查、验证等工具的快捷入口。

二、完整工作流程：从创建到导出

操作： 启动 Espresso 后，你可以选择：

创建新项目： 点击菜单栏 文件 (File) → 新建项目 (New Project)...，或使用快捷键 Command + Shift + N。在弹出的对话框中指定项目名称和存储位置。
打开现有项目： 点击菜单栏 文件 (File) → 打开 (Open)...，或使用快捷键 Command + O，然后选择包含你网站文件的文件夹。

项目打开后，其所有文件和文件夹将在左侧导航边栏中完整呈现。

操作：

操作： 当编辑 HTML 文件时：

操作：

操作： 在编辑文件时，点击底部状态栏的“检查”图标，或使用菜单 工具 (Tools) → 验证 (Validate)，可以对当前文件的语法、链接等进行快速检查，错误或警告会显示在底部面板中。

操作： Espresso 本身不包含 FTP 功能，导出即保存文件。

多光标编辑： 按住 Command 键并在不同位置点击，可以创建多个光标，实现批量编辑。按住 Option 键并拖动鼠标可以创建纵向列光标。
快速跳转： 按 Command + T 可以打开“快速跳转”面板，输入文件名的一部分即可快速定位并打开项目中的任何文件。
代码片段 (Snippets) 高效使用： 将常用代码块（如 HTML5 结构、CSS reset）保存为片段。在编辑器中输入片段预设的缩写并按 Tab 键即可快速插入。片段可在左侧边栏底部管理。
自定义语法高亮与主题： 通过 Espresso → 偏好设置 (Preferences) → 字体与颜色 (Fonts & Colors)，可以深度自定义编辑器的外观，包括为不同语言选择独立的配色方案。
项目范围的搜索与替换： 使用 Command + Shift + F 打开项目搜索，可以跨所有文件查找和替换文本，支持正则表达式。

问题：实时预览窗口没有自动更新。

解决方案： 首先检查预览窗口顶部的 URL 是否正确指向了你的本地项目文件。然后确认 Espresso 的“实时预览”功能已启用（预览窗口工具栏上的环形箭头图标应为蓝色激活状态）。有时，浏览器缓存可能导致显示旧内容，尝试在预览窗口内右键选择“重新加载”。
问题：CSS 侧边栏没有显示或为空。

解决方案： 确保当前激活的编辑器标签页是 HTML 文件，并且该 HTML 文件通过 <link> 标签正确链接了外部 CSS 文件。如果 CSS 是内联或通过 @import 引入，侧边栏可能无法识别。尝试保存所有文件并重新打开 HTML 文件。
问题：代码自动补全功能不工作。

解决方案： 前往 偏好设置 (Preferences) → 编辑 (Editing)，检查“自动提示”选项是否被勾选。同时，确认当前文件的语法模式是否正确（查看状态栏右侧的语法标识）。
问题：打开项目后文件树是空的。

解决方案： 你可能打开的是一个单独的文件，而非项目文件夹。请关闭当前窗口，使用 Command + Shift + O（“打开项目”的快捷键）重新选择包含整个网站文件的父文件夹。