dreamweaver首选参数

核心思想：个性化与效率

在开始之前，请记住一个核心原则：没有“最好”的设置，只有“最适合你”的设置，以下推荐是基于最佳实践和提升效率的通用建议,你可以根据自己的习惯和项目需求进行调整。

通用与界面设置

这部分设置影响 Dreamweaver 的整体工作环境,建议所有用户都先配置。

常规

• 默认视图:
  • 推荐: 代码视图，对于任何开发者，直接从代码开始是最直接、最高效的方式，如果你是设计师，可以选择 实时视图。
• 在浏览器中预览:
  • 推荐: 使用[你的主浏览器]，选择你最常用的浏览器（如 Chrome, Firefox）作为默认预览浏览器,避免每次手动选择。
• 打开文件时:
  • 推荐: 根据文件扩展名决定，让 Dreamweaver 智能判断，对于 .html, .css, .js 文件直接打开代码视图,对于图片等资源则直接打开。
• 撤消/重做:
  • 推荐: 将所有更改合并为单个步骤，默认是“每次击键都算一步”，这会导致你的历史记录非常冗长，合并后，一次完整的粘贴或格式化操作才被记录为一步,历史面板更清晰。

外观

• 界面亮度:
  • 推荐: 深色 或 自定义，深色主题对眼睛更友好，尤其是在长时间编码时，你可以选择 自定义 来微调代码编辑区的背景色和文字颜色。
• 字体:
  • 代码字体: 推荐使用 Consolas, 'Courier New', 'Monaco' 等等宽字体，等宽字体能确保代码对齐,易于阅读。
  • 大小: 根据你的显示器和习惯调整，通常在 12-14pt 之间。

代码颜色

这是个性化程度最高的部分,一套舒适的配色方案能让你编码时心情愉悦。

• 方案: 你可以从预设中选择（如 Dark）,然后在此基础上修改。
• 重点设置:
  • 默认颜色: 保持默认即可。
  • 语法颜色:
    • HTML 标签: 设置为一种醒目的颜色,如亮蓝色或绿色。
    • 属性: 可以设置为比标签稍浅的颜色。
    • 值: 字符串、数字等可以设置不同颜色,便于区分。
    • CSS: 确保 .class, #id, @media 等选择器和属性有明确的颜色区分。
  • 背景: 代码编辑区的背景色，深色主题下，建议使用 #1E1E1E 或 #252526,避免纯黑。
  • 提示: 修改后，在右上角的“预览”区域可以实时看到效果。

代码格式化

这部分决定了当你使用“格式化代码”功能（快捷键 Shift + F1）时,代码的样式。

• 缩进:
  • 大小: 2 或 4。2 更节省空间，4 更易于阅读。团队开发中必须统一。
  • 类型: 制表符 或 空格。强烈推荐使用空格，因为这样可以保证在任何编辑器和系统下代码缩进都保持一致,避免混乱。
• 换行:
  • 换行符: Unix (LF)，这是目前 Web 开发的标准，尤其是在 Git 等版本控制工具中，可以避免 Windows 和 Unix 之间的换行符差异问题。
• 标签和属性:
  • 强制属性换行: 勾选此项，当一个标签的属性过多时，Dreamweaver 会在每个属性后换行,保持代码整洁。
  • 标签大小写: 小写，HTML5 标准推荐使用小写标签。
• CSS 格式化:
  • 属性换行: 每行一个属性，这是最清晰、最易读的 CSS 书写风格。

前端开发者核心设置

如果你主要做 HTML, CSS, JavaScript 开发,以下设置至关重要。

实时视图

• 实时视图与代码同步:
  • 推荐: 双向，这样你在代码视图中修改，实时视图会立即更新；在实时视图中编辑内容（如文本），代码视图也会同步修改,这对于快速原型制作非常方便。
• 浏览器兼容性检查:
  • 推荐: 勾选 启用，Dreamweaver 会根据你选择的浏览器版本，在代码旁边显示兼容性警告,帮你快速定位问题。

HTML

• 默认标签:
  • 默认标签: HTML5，确保所有新文件都基于 HTML5 模板。
• 代码提示:
  • 标签/属性/值: 全部勾选，这是代码提示的基础,能极大提高编码速度和准确性。
  • 延迟: 100ms 或更低,让提示更快出现。

CSS

• 源格式:
  • CSS 样式表: 链接，这是标准做法，将 CSS 代码放在独立的 .css 文件中，并通过 <link> 标签引入。
• 代码提示:

  类似 HTML,确保所有提示选项都已勾选。

• 颜色选择器:
  • 使用操作系统颜色选择器: 勾选,可以使用你系统自带的更强大的颜色选择器。
• CSS 预处理器:

  如果你的项目使用 Sass/SCSS/Less，请在这里进行相应配置（如文件路径、输出格式等）。

JavaScript

• 代码提示:
  • 启用 JavaScript 源文件: 勾选，这样 Dreamweaver 能根据你项目中的 JS 文件提供更精确的提示。
  • 启用 HTML 源文件: 勾选，可以提示你在 HTML 中定义的 ID 和 Class。
  • 启用框架: 如果你的项目使用 jQuery, React, Vue 等框架，务必在这里勾选对应框架，这是 Dreamweaver 智能提示的关键！
• 代码验证:
  • 启用 JavaScript 代码验证: 勾选，让 Dreamweaver 帮你检查基本的语法错误。

高级与全栈开发者设置

如果你使用 PHP、服务器技术或版本控制,这些设置会很有用。

文件

• 隐藏文件:
  • 推荐: 显示隐藏文件，这样你可以在文件面板中看到 .git, .htaccess 等重要文件。
• 站点缓存:
  • 推荐: 启用，缓存可以加速文件链接、模板等功能的响应速度,尤其是在大型项目中。

服务器模型

• 默认服务器模型:
  • 根据你的后端技术选择，如 PHP、ASP.NET、ColdFusion 等,这会影响代码提示和服务器行为。

版本控制

• 访问:
  • 推荐: 始终，这样你可以随时在文件面板中看到版本控制状态（如 Git 的已修改、已暂存等）。
• 集成:

  Dreamweaver 内置了对 Git 和 Subversion 的支持，在这里可以配置你的仓库地址、用户名等信息，实现直接在 IDE 内进行提交、拉取、推送等操作。

快速上手检查清单

如果你觉得上面内容太多,可以先检查并设置以下关键项：

1. 外观: 切换到深色主题,选择一个你喜欢的等宽代码字体。
2. 代码格式化: 设置缩进为 2个空格，换行符为 Unix (LF)。
3. 常规: 设置默认视图为 代码视图,预览浏览器为你常用的浏览器。
4. 代码颜色: 选择一个预设的深色配色方案，并稍作调整,确保代码层次分明。
5. JavaScript: 如果使用框架，务必在首选参数 > JavaScript > 启用框架 中勾选你使用的框架。

如何找到并修改这些设置？

1. 打开 Dreamweaver。
2. 点击顶部菜单栏的 编辑 -> 首选参数 (Windows) 或 Dreamweaver -> 设置 (macOS)。
3. 在弹出的左侧列表中,逐项进行配置。

不要害怕尝试，你可以随时修改这些设置，找到最适合自己的工作流是成为一名高效开发者的第一步,祝你使用愉快！