Adobe Brackets是一个开源的基于HTML/CSS/JavaScript开发,运行在native shell上的集成开发环境。该项目由Adobe创建和维护,根据MIT许可证发布。提供Windows和OS X平台支持。

Brackets的特点是简约、快捷,没有很多的视图或者面板,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等。

前去官网下载:http://brackets.io/

功能及使用介绍

官方提供简体中文语言包,在菜单栏处选择debug->language->simple chinese就可更换为简体中文版本

左侧目录树顶部会显示你最近打开的正在工作的几个文档,非常的方便。

Brackest会检测文档是否符合html规范,并且还有JS错误提示,点击黄色三角感叹号就会弹出错误提示,如下图

把光标放在一个class或id属性的标签名称上,按下Ctrl/Cmd + E(“编辑”)或退出编辑。Brackets将搜索项目下所有CSS文件,然后打开一个内嵌的编辑器嵌入在HTML文件中,可以让你迅速修改CSS代码。唯一美中不足的是:搜索的是项目下所有的CSS文件,如果能修改成所搜当前文件使用的CSS文件就更好了。



Brackest同样也支持JS的快速预览和编辑。

Brackets内建取色器,提供RGBa、HEX、HSLa的颜色编码形式。把光标放在一个颜色编码上,按下Ctrl/Cmd + E(“编辑”),退出取色器窗口需要使用Esc键。

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

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

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

它依赖于在Chrome浏览器中的远程调试功能,这是一个命令行标志启用。在Mac上,如果你已经在使用Chrome浏览器,这时启动“即时预览”,Brackets将询问你是否要重新启动Chrome浏览器启用远程调试功能。

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

部分快捷键

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

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

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

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

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

Ctrl/Cmd + / 行注释

Ctrl/Cmd + Alt + / 块注释

不足:不支持代码折叠。没有代码格式化。

插件推荐

Brackets 代码格式化的插件–beautify

直接打开Brackets 插件管理器,搜索安装beautify。



安装完毕后,选择菜单上的编辑→beautify(或使用快捷键ctrl+alt+L)完成代码格式化(或者也可选择beautify on load保存时自动格式化)。

如果不能在线安装,可直接下载https://github.com/drewhjava/brackets-beautify后,解压放到Brackets 插件目录下(插件目录Help 帮助>Show Extensions Folder 显示扩展目录),记得要放在user目录里,然后重启Brackets
,就能看到beautify了。

注:新版brackets用以上方法安装不了,必须从https://s3.amazonaws.com/extend.brackets/brackets-beautify/brackets-beautify-1.1.3.zip下载,安装方法同上,解压出来直接把brackets-beautify-1.1.3文件夹放到扩展目录的user目录下,重启即可。

快速编写HTML和CSS:Emmet

新发现的代码格式化的插件–jsbeautifier:这款插件支持更多的代码格式化,下载地址:https://s3.amazonaws.com/extend.brackets/brackets-jsbeautifier/brackets-jsbeautifier-0.0.2.zip

Emmet演示请看:http://www.zjgsq.com/1062.html

插件安装方法同beautify

或从GITHUB手动下载:https://github.com/emmetio/brackets-emmet

web前端不可错过的开发工具–Adobe Brackets的更多相关文章

  1. Web前端优化最佳实践及工具集锦

    Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...

  2. 2017 年不可错过的开发工具 Top 50

    想知道 2017 年有哪些值得关注的开发工具吗?StackShare 年度开发工具排行榜来啦! StackShare.io 是一个开发者工具及服务分享平台,致力于发现并分享开发者使用的开发工具.服务与 ...

  3. 10个简化Web开发者工作的HTML5开发工具

    HTML5的到来,改变了设计和开发的工作,完全改变了以前的开发方式. HTML5进行本身就是一个很简单,很快捷的开发技术并且带给开发人员很多不同的工具和功能,使他们的工作变得更加Cool.它的功能非常 ...

  4. [Web前端] WEEX、React-Native开发App心得 (转载)

    转自: https://www.jianshu.com/p/139c5074ae5d 2018 JS状态报告: https://2018.stateofjs.com/mobile-and-deskto ...

  5. 吐槽一下--最近多次在腾讯以及万科的面试经历---Web前端与PHP后端开发

    前端时间,由于职业发展等,想要换一份工作,于是投递了一些国内还算知名的公司,列如: 腾讯.万科之类的: (1)首先说一下这两家公司的反馈情况: 腾讯:投递到反馈,(初次人事打电话沟通)大约1周,三次不 ...

  6. windows下《Go Web编程》之Go开发工具

    Go开发工具很多,比较喜欢的使用作者列出的第一个工具,LiteIDE.它是一款专门为Go语言开发的跨平台轻量级集成开发环境. 一.LiteIDE下载安装 下载地址:https://sourceforg ...

  7. 前端H5开发工具 Adobe Edge

    http://www.cnblogs.com/adobeedge/ http://my.oschina.net/duolus/blog/212801?fromerr=WAcqscJl

  8. Web自动化之Headless Chrome开发工具库

    命令行运行Headless Chrome Chrome 安装(需要带梯子) 下载地址 几个版本的比较 Chromium 不是Chrome,但Chrome的内容基本来源于Chromium,这个是开源的版 ...

  9. web前端设计最好用的工具

    一.FSCapture FastStone Capture(FSCapture)是经典好用的屏幕截图软件,还具有图像编辑和屏幕录制两大功能,可以捕捉全屏图像,或者活动窗口.窗口内的控件对象截图.支持手 ...

随机推荐

  1. 深入理解linux内核v4l2框架之videobuf2【转】

    转自:https://blog.csdn.net/ramon1892/article/details/8444193 Videobuf2框架 1. 什么是videobuf2框架? 它是一个针对多媒体设 ...

  2. mybatis框架之foreach标签

    foreach一共有三种类型,分别为List,[](array),Map三种,下面表格是我总结的各个属性的用途和注意点. foreach属性 属性 描述 item 循环体中的具体对象.支持属性的点路径 ...

  3. (网络编程)基于tcp(粘包问题) udp协议的套接字通信

    import   socket 1.通信套接字(1人1句)服务端和1个客户端 2.通信循环(1人多句)服务端和1个客户端 3.通信循环(多人(串行)多句)多个客户端(服务端服务死:1个客户端---&g ...

  4. 使用linux计划任务自动拉起停止的通达OA服务apache和mysql服务

    概述: 数据库或web服务器瞬时并发过大时,可能面临宕机的危险,用类似开门狗的程序自动监控程序是否正常运行,在服务停止时自动启动服务,可临时解决该问题 监控apache服务的脚本: 每两分钟执行脚本检 ...

  5. sqlserver服务启动后停止,传递给数据库 'master' 中的日志扫描操作的日志扫描号无效

    电脑异常重启,导致SqlServer服务启动后,自动停止,在[计算机管理]-[事件查看器]-[windows日志]中进行查看系统错误日志,在[应用程序]下发现可能的错误信息有以下两条: 1.错误:传递 ...

  6. SQL表链接

  7. 测试开发之Django——No5.Django项目的部署(CentOS7+nginx)

    配置环境:CentOS7 1.安装python3环境 默认的CentOS7系统中,会安装python2.7的版本,由于Django2.0并不支持python2.7的版本,所以我们需要自己在系统中安装p ...

  8. LeetCode(42):接雨水

    Hard! 题目描述: 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度 ...

  9. C++ code:指针类型(pointer types)

    #include <iostream> using namespace std; int main() { float f = 34.5; int *ip = reinterpret_ca ...

  10. 执行 crontab 的计划任务

    新建了一个 Laravel 的计划任务,配置好 crontab * * * * * php /www/sunzhongwei/artisan schedule:run >> /dev/nu ...