欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

brackets：前端开发工程师必备编辑器 这个文章里说明 可以下载下来安装 有大用

shiping1 的头像
星期一, 2014-06-09 09:20 — shiping1

安装扩展,扩展安装后看它的说明,说明里有使用方法
这个文章里说明 如何下载下来安装

brackets：前端开发工程师必备编辑器

 

   5条评论  前端开发工具, 精选推荐

最近开始使用一个新的编辑器，是Adobe开发的开源的项目，与Sublime Text2相比有两点优势：1.可以实时预览；2.可以快速编辑，在HTML可以编辑CSS和JS代码。

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

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

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

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

1

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

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

把 光标放在一个class或id属性的标签名称上，按下Ctrl/Cmd + E（“编辑”）或退出编辑。Brackets将搜索项目下所有CSS文件，然后打开一个内嵌的编辑器嵌入在HTML文件中，可以让你迅速修改CSS代码。 唯一美中不足的是：搜索的是项目下所有的CSS文件，如果能修改成所搜当前文件使用的CSS文件就更好了。
3
Brackest同样也支持JS的快速预览和编辑。

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

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 + / 块注释

不足：不支持代码折叠。

推荐一些优秀的扩展

1.代码格式化插件：Beautify

直接打开Brackets 插件管理器，搜索安装beautify。
安装完毕后，选择菜单上的编辑→beautify（或使用快捷键ctrl+alt+L）完成代码格式化

2.HTML代码编辑：Emmet

最强大的HTML和CSS快速编辑插件

3.CSS和JS压缩插件：Minify

很强大的插件，集成了CSS和JS的压缩，会在同个目录下自动生成*.min.*格式的文件。

4.CSS3代码自动补全插件：auto prefix

使用CanIUse上的css3数据，自动补全css3前缀和浏览器兼容，不过可能有些新了。有一些旧版本的浏览器会被抛弃掉。

5.代码折叠插件：brackets-code-folding

安装URL：https://github.com/thehogfather/brackets-code-folding

默认不支持代码的可折叠功能。通过此扩展的安装，对代码添加可折叠功能。

6.当关闭编辑器时自动保存所有打开未保存的文件：Autosave Files on Window Blur

类似Sublime Text2、phpstorm / webstorm的风格，之前提到的不足全部解决了。

7.主题：theme

安装URL：https://github.com/MiguelCastillo/Brackets-Themes

该扩展为一个用于使用基于CodeMirror的主题集的扩展。安装该扩展后应用程序菜单中出现“Themes”菜单，开发者可以为应用程序界面从中选用一个主题。

其他的等待发现中，如果你发现有优秀的插件，不妨给我推荐一下。

文章部分参考这里：http://www.zjgsq.com/903.html

最新最早最热
  • 智宇博客
    智宇博客

    感谢分享，介绍这么详细，搜藏，没事了就学习！

    2月12日回复顶转发
  • 王东满
    王东满

    [嘻嘻] 我又来了，你网站还真多东西看。。。又收获到好东西了。。我也推荐个前端的软件，webstorm 不知道楼主有没听说？现在也是比较流行，出到8版了。

    5月4日回复顶转发
    • 王东满
      王东满

      [嘻嘻] 这个用过，主题满意度100%，但感觉在编写css方面有点不够好，提示语法不够准确。不会自动保存- -，不过也不错，打开速度超快。。哈哈，工具还是看个人的吧，那个brackets刚刚下载好，准备测试一下。 [鼓掌]

      来自 http://caibaojian.com/brackets-editor.html






       

    • 酷剑
      酷剑

      感谢你的热心评论。这个软件我用过，后来因为比较复杂，所以我没有使用，前端开发的话，用这个sublime text2还是挺好的。你去试试看。http://caibaojian.com/sublime-text2.html

      5月4日回复顶转发


web前端不可错过的开发工具–Adobe Brackets（开源、简洁强大的HTML、CSS和JavaScript集成开发环境）

 web前端工具  admin   3102浏览  4评论

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

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

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

功能及使用介绍

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

1

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

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

把光标放在一个class或id属性的标签名称上，按下Ctrl/Cmd + E（“编辑”）或退出编辑。Brackets将搜索项目下所有CSS文件，然后打开一个内嵌的编辑器嵌入在HTML文件中，可以让你迅速修改CSS代码。唯一美中不足的是：搜索的是项目下所有的CSS文件，如果能修改成所搜当前文件使用的CSS文件就更好了。
3
Brackest同样也支持JS的快速预览和编辑。

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

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。
5
安装完毕后，选择菜单上的编辑→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目录下，重启即可。(我是把目录名改成brackets-beautify 不改的话 也不知行不行) (也有可能是brackets-code-folding-0.2.26\brackets-code-folding-master 这种形式)直接把 brackets-code-folding-master 文件夹复制过去就可以了
(为什么我解压安装不行 要 install from url 安装才行 )
快速编写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前端开发-Web前端工程师 » web前端不可错过的开发工具–Adobe Brackets（开源、简洁强大的HTML、CSS和JavaScript集成开发环境）

Tags: 

与本文相关的文章

最新最早最热
  • Eamonning
    Eamonning

    真的挺不错，就是发现不能多Tab打开，觉得有点别扭

    3月15日回复顶转发
    • Eamonning
      Eamonning

      但有时候我发现他记的位置是不太对的，我第二次点回去，经常位置就不是我上次编辑的位置了，我用的Win8，不知道是不是因为兼容问题还是什么

      3月17日回复顶转发
    • 牵着狗狗看MM
      牵着狗狗看MM

      应该不可能不兼容的，ADOBE AIR开发的软件，兼容应该没问题的，我WIN7 XP都没问题，WIN8没用

    • 牵着狗狗看MM
      牵着狗狗看MM

      左侧有目录树，而且还有工作中的文档，其实可以算是多TAB打开了

      3月17日回复顶转发

来自 http://www.zjgsq.com/903.html

普通分类: 
其它
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2