VPS    微软    Win10    云市场    苹果    Office2016

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

 编程开发    , ,    2013-11-10
Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows、Linux 以及 OS X 平台。

Brackets 的特点是简约、优雅、快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等。和 Sublime TextEveredit 等通用代码编辑器不一样,Brackets 是专门针对 WEB 前端开发而生……

Brackets - 优秀免费的开源前端开发工具演示视频:

一、项目设置

1、打开 Brackets,整个界面很简洁,顶部菜单栏只提供file > exit退出编辑器功能。左侧为项目组织结构的文件树,使用Ctrl/Cmd+Shift+H可以呼出与关闭文件树。右侧为编辑区,上部为工具栏,中部为文档区域,下部为提示区域。

brackets
2、打开项目 使用File > Open Folder命令打开项目文件夹,左侧文件树项目名更新为项目文件夹名,文件树更新为当前项目的文件树。

brackets

在项目名上单击左键,弹出项目编辑菜单,编辑菜单会显示历史项目,以及项目编辑命令。

brackets

Open Folder命令:打开新的项目。
Project Settings命令:设置当前项目的Web地址,在页面调试预览时会用到。
设置要求:必须是http://开头的web地址。

brackets

如上图,设置为http://127.0.0.1/demo/slide时,在浏览器预览时,会通过web地址打开相应的页面。

brackets

如果没有设置,会通过文件的盘符地址打开页面。

brackets

二、文件编辑

在文件树中点击index.html,主区域打开index.html的文档。

brackets

1、Brackest会检测文档是否符合html规范,如下图提示,在20行有一个style样式块需要放在head节点里。

brackets

2、把光标放在一个class或id属性的标签名称上,按下Ctrl/Cmd + E(“编辑”)或退出编辑。Brackets将搜索项目下所有CSS文件,然后打开一个内嵌的编辑器嵌入在HTML文件中,可以让你迅速修改CSS代码。

brackets

当前class/id标签有多处样式定义时,编辑窗口提供切换按钮来切换显示样式,也可以使用Alt + Up/Down箭头键切换。
需要注意的是,Brackets会检测当前html文档以及项目下所有CSS文件来查找class/id样式,即使某些CSS文件在当前html文档中未被引用到。

3、Brackets同样支持对JS对象定义的快速预览/编辑,把光标放在一个js函数名称上,按下Ctrl/Cmd + E(“编辑”)或退出编辑。

brackets

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

brackets

5、根据读者的反映,新版本中的 Brackets 已经支持 HTML、HTML5、CSS 以及 Javascript 的代码提示(代码补全)了。

三、即时预览

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

目前即时预览功能的一些限制:
它仅适用于 Chrome 浏览器为目标浏览器,你必须安装 Google 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 + / 块注释
注:css代码、html代码注释时只能使用块注释快捷键

有待改进之处:

1、撤销修改功能支持的步数较少
2、未保存的修改在撤销时会一次撤销到最后一次保存的状态
3、取色器不支持Ctrl/Cmd + E关闭
4、Javascript只支持对函数的快速预览/编辑
5、对于css样式、javascript函数的快速预览:Brackets会检测当前html文档以及项目下所有css、javascript文件来查找目标,即使某些css、javascript文件在当前html文档中未被引用到。对于作为JSON对象属性的函数的查找结果,其他对象中的同名函数也会被索引到
6、在使用网页即时预览功能时,打开Chrome控制台,Brackets会退出即时预览
7、不支持双击选中中文字符串
8、不支持代码折叠

总的来说,Brackets 这个项目还很新,潜力巨大,而且现在 WEB 前端开发需求极其旺盛,真正好用强大的免费工具也不是特别多,加上 Brackets 开源,支持多平台,所以还是非常值得尝试与学习的,希望这款开发工具可以对你有所帮助吧

相关文件下载地址:

官方网站:访问
软件性质:免费开源

下载 Brackets (Win)  |  Mac  |  Linux64位32位  |  来自异次元  |  开发相关  |  WEB相关  |  更多编辑器

各位正在潜水的同学请注意,有 56 位无聊人士 在异次元附近海域出没!
  • 哈~……

    10 10
     
    • 既然比我还积极!?

      10 10
       
    • 前排留个名+1

      7 10
       
    • 这货难道是Adobe Edge Code的免费版?

      6 10
       
  • 沙发是我的了,哇哈哈哈!!!

    10 10
     
  • 前排留个名

    9 10
     
  • 哇哦,做前端的有福了

    6 10
     
  • 和DW比呢?

    7 10
     
    • 根本不是一个东西。。。DW是面向初学者吧,反正不用DW很多年了

      8 10
       
  • 这个怎么如此像sublime Text?嘿嘿,还是喜欢sublime Text~~

    8 10
     
  • Adobe 这是要放弃 Dreamweaver了吗?D

    9 10
     
    • Adobe是不会放弃DW的,这只是一个开源项目。就像Transgaming有Cedega,也有Wine的开源项目。

      7 10
       
    • 这只是DW的一款帮助前端开发的辅助工具,永远无法替代DW。

      9 10
       
    • 至今不知道DW究竟有何大用处~~~

      7 10
       
  • 目测没有中文版,压力大。

    7 10
     
    • 据说可以设置中文版

      7 10
       
    • 亲测可以设置中文

      8 10
       
    • 非常嗨皮的可以设置中文,支持的语言还不少

      10 10
       
  • 个人感觉sublime text2实用性更强!尤其是细节上更人性化的设计!

    6 10
     
    • 目前觉得就两点比sublime text2实用,
      1、实时预览。2、ctrl+e编辑CS·S

      9 10
       
  • 小X 这个有没有编码问题呢?貌似不支持GBK编码

    7 10
     
    • 确实不支持GBK,不支持中文

      7 10
       
  • 即使显示不好使

    9 10
     
  • 只认VisualStudio,其它都不习惯啊。

    8 10
     
    • 你用VS写前端?

      6 10
       
    • 太渣了

      10 10
       
    • vs写前端怎么了?写了好几年了,前后端代码一起搞定!

      9 10
       
  • 一直纯手写+firebug

    8 10
     
  • 终于推荐这个软件啦,我还发邮件给小X推荐过呢。一直在用,非常棒!

    10 10
     
  • 除了开源免费可以歌颂之外,其他倒是没什么亮点。
    没用过IntelliJ IDEA的,可以Google下。

    9 10
     
  • 如果可以设置界面颜色就完美了。现在在用subime text的原因很大是因为配色很舒服,在夜间的时候用无压力。

    7 10
     
    • 有theme插件的,配色多达20多种,monokai也在里面

      8 10
       
  • 还不错,唯一的缺点就是卡,启动慢

    8 10
     
  • 貌似 最大亮点即时预览以及其他功能 都能用st2通过插件实现啊 而且启动速度也不咋样

    10 10
     
    • 即时预览也能通过st2实现?哪个插件?

      7 10
       
  • php中即时显示没用嘛,还是要手动刷新

    8 10
     
  • 用了半年多了,从27开始用,非常好!开源免费!大量插件!emmit完美支持!
    唯一缺点,卡。。。尤其是文档大的时候,超过500行就比较明显了

    10 10
     
    • 求下你所说的theme主题配色插件链接,非常感谢!

      7 10
       
    • 中文有没有办法解决?为什么我中文全乱码?

      9 10
       
    • 配色插件已解决。想问问朋友你,请问怎么自定义设置所用的字体?

      10 10
       
    • 你字体问题解决了吗?中文乱码,其实就是title那里要写中文,其他全英文

      9 10
       
  • 官网下载用的那个验证码总是不能显示。。。

    10 10
     
  • 安装不了呀。。提示must be a local hard drive

    6 10
     
  • 右键没有复制剪切粘贴真是不爽!!
    虽然可以快捷键~

    8 10
     
  • 表示已经用惯了Editplus ,而且只要不升级就是正版免费,所以,纯围观。

    8 10
     
  • 编写PHP时,如何设置才能自动缩进?谢谢

    9 10
     
  • 中文显示乱码

    10 10
     
    • 我的也是中文乱码,咋办???? 你解决了??

      6 10
       
  • mac版的解压缩密码是多少?

    7 10
     
  • 跟DW缺点很一致啊,开一个10来K几十K的js文件,慢得就想撞土啬的冲动,哦,同志们,前端开发js文件会小么?或许是我的机器配置太低了!

    9 10
     
  • 中文编码不支持可有解决办法?

    6 10
     
  • 这款最大的好处,不仅是开源,而且发展极快,插件的开发速度迭代很快,起码支持class自动引入,这是subline所不及的吧,虽然subline在可扩展性很强,但是至少现在已经进入一个发展瓶颈了,而brakets现在才刚起步,而且速度也是越来越快,bug修复的特挺快的.提示效果却不逊于webstorm,个人感觉以后就是一个mini版的webstorm.

    6 10
     
  • 星际牛仔~

    10 10
     
  • 和sublime相比没有自动缩进,很麻烦。

    7 10
     
  • 中文乱码怎么解决

    6 10
     
  • 小X的哥哥的同学的老师的儿子的妈妈养的小猫的表弟的主人的朋友说看帖不回会被鄙视de

    7 10
     





评论内容 (*必填):
Ctrl + Enter 快速提交