Brackets

开源工具，专注于可视化前端设计。具有的特色功能如下：

快速编辑

可以快速的编辑样式，不用来回切换标签页

实时预览

使用内置server

点击右上角闪电⚡符号，brackets会启动内置服务器，并启动chrome浏览器打开工作目录下被选中的文件。

此时

• 修改css、html，可以实时的反应到浏览器中，不必手动保存代码、刷新浏览器
• 修改JavaScript代码，需要手动保存，brackets会自动刷新浏览器。
• 对于sacc、scss或less，brackets声称能够对他们进行了预处理，嗯，，没看出来。说下载插件Brackets SASS或LESS AutoComile，则能够像css一样实时预览。搞了一下午都没搞出来，，，
• 对于代码中光标所在的元素，浏览器中可以高亮。

使用本地server

使用本地server，不受brackets，因此限制较多，只有外部css的修改会实时反映到浏览器。

使用步骤如下：

• 打开本地server（如idea中开tomcat）
• 项目总的前端代码根目录作为brackets根目录。
• 打开File–>Project Settings，输入项目网页前缀（如http://localhost/myproject）

配置

brackets配置分全局和项目配置，基本用不到，仅介绍如果固定内置server使用的端口号：

• 打开Debug–>Open References File
• 在右边的brackets.json（全局文件）中添加一行字段："staticserver.port": 8080

参考

• How to Use Brackets