又一款WEB开发神器

原来一直用 Sublime 来着，但老用破解软件总感觉有些不舒服，然后就碰见了 Brackets。

Brackets 是一个免费、开源且跨平台的 WEB 集成开发环境（IDE工具）。由 Adobe 主导开发，根据 MIT 许可证发布，支持 Windows、Linux 以及 OS X 等平台。

并且，Brackets 自带非常强大的插件系统，对 nodejs，python，ruby，PHP，Rust 等前后端语言也都支持不错。虽然是打着 Web前端开发的旗号，但从各种插件来看，Brackets 的野心确实不小。

Brackets的一些优点

实时预览

brackets的即时显示与调试功能需要配合谷歌浏览器来使用。在点击工具栏闪电状的图标，保存代码时浏览器即可自动刷新。如果是本地服务器的项目还会提示输入服务地址。

CSS修改更方便

在Brackets中，只需要将鼠标放到某个类上，ctrl+e即可打开快捷修改css的小窗口。对于sass中的样式也有效。

扩展插件

除了内置在Brackets中的核心功能之外，还有一个庞大且不断增长的开发人员社区构建扩展，添加各种有用的功能。

安装插件时只需要点击右侧工具栏第二个积木形状的按钮，然后再搜索自己想要的插件就OK了。由于插件都是从国外下载的，所以有时候可能需要翻墙。

对Theseus的移植

对于Brackets而言，最令人兴奋的可能是对Theseus的整合 。Theseus是由Adobe和MIT的人们创建的开源项目。它专注于为Chrome 和 Node.js应用程序提供调试支持 。也就是说Brackets能够调试由服务器端JavaScript和客户端代码组成的Node.js应用程序。

预览PSD

Extract for Brackets最高大上的功能。点击图层，然后输入css属性，图层的样式自动跑出来了，还能测量两个元素之间的距离。如果是文字图层可以点击copy text，文字就到粘贴板上。如果是普通图层，填写background或img的时候，还能自动切图到你的文件夹。

如何切换中文界面

Brackets是自带中文界面的，所以你只需要自己手动切换就行了。

部分快捷键

Ctrl/Cmd+Shift+H 可以呼出与关闭文件树

Ctrl/Cmd + E 快速预览/编辑 css样式/javascript函数

Ctrl/Cmd + +/- 放大缩小编辑区字体大小

Ctrl/Cmd + 0 重置编辑区字体大小

Ctrl/Cmd + Alt + P 打开即时预览功能

Ctrl/Cmd + / 行注释

Ctrl/Cmd + Alt + / 块注释（CSS跟HTML代码注释时只能使用块注释快捷键）

部分插件推荐

Beautify 一键规整你的代码

Emmet 加快打码速度，提供诸如div>ul>li的快捷生成代码

Extension Highlighter 不同的文件后缀显示不同的颜色

JSHint 检查JS

tabs 把打开的文件列表从左边移动到头部

Themes for Brackets 众多的主题

Quick Search 选择一个单词，其他同名的也标注出来

往期分享

【无删减电影】系列

【小白教程】系列

【实用工具】系列