网页开发工具Adobe Brackets

作者:LuckyMoke 时间:2013-04-09

Brackets

Brackets is an open source code editor for the web. It’s built with JavaScript, HTML and CSS by web developers like you.

小小酥的宅路历程

Brackets 是 Adobe 的开源 HTML/CSS/JavaScript 集成开发环境。Brackets提供 Windows和OS X 平台支持。

第一次见到它就被它的小清新所深深吸引,相比于其他种类繁多的编辑器,Brackets有自己的独到之处。

一、即时预览

Brackets提供网页即时预览功能。使用该功能时,Brackets调用Chrome浏览器打开当前页面,此后修改html、css、javascript并保存后,所修改的内容会即时响应到浏览器中的页面,无须手动刷新页面。这是Brackets最大的一个亮点,有两个显示器的程序猿有福了,可以分屏显示Brackets和chrome,即时修改即时预览,无需切换编辑器/浏览器和刷新页面。

目前即时预览功能的一些限制:

它仅适用于Chrome浏览器,你必须安装Chrome。

只能同时对一个HTML文件进行预览 – 如果切换另一个HTML文件,Brackets将关闭原来的预览。

二、快速编辑

1.当你把鼠标放在html的class/id上边,按下键盘的“Ctrl+E”键,该class/id的样式就会直接显示在当前界面,方便修改。

小小酥的宅路历程

注:Brackets会检测当前html文档以及项目下所有CSS文件来查找class/id样式,即使某些CSS文件在当前html文档中未被引用到。

2.Brackets内建取色器,提供RGBa、HEX、HSLa的颜色编码形式。把光标放在一个颜色编码上,按下“Ctrl+E”。

小小酥的宅路历程

三、部分快捷键

  1. Ctrl + Shift+H 可以呼出与关闭文件树
  2. Ctrl + E 快速预览/编辑 css样式/javascript函数
  3. Ctrl + +/- 放大缩小编辑区字体大小
  4. Ctrl + 0 重置编辑区字体大小
  5. Ctrl + Alt + P 打开即时预览功能
  6. Ctrl + / 行注释
  7. Ctrl + Alt + / 块注释

四、下载地址

http://download.brackets.io/ 官方下载

Tips

GitHubLuckyMoke

Weibokeailvyou

QQ839488083

米拓交流群

模板有不完善的地方欢迎指正!

1511438794807394.jpg