转自:http://www.jianshu.com/p/ff7798aa4548


Brackets是Adobe开发的web编辑器,是一款免费开源、多平台支持的软件,并在于GitHub上维护。Brackets支持增加插件以提供额外的功能扩展,下面的文章将介绍一些我常用的插件以及我使用期间的心路历程。

Brackets网站的介绍图片

这就是Brackets的介绍图片,可以看出,他们对“快速编辑”这一功能是非常推荐的。快速编辑就是当你的鼠标点到某元素的ID或者Class时,Ctrl+E 迅速为您查找该项目下面所有ID名或者Class名所在的CSS文档位置。除了“快速编辑”,Brackets还有实时预览,通过Chrome可以在编辑html、css时,实时预览最终效果。

这也是Sublime Text3、atom这些编辑器所不能比拟的,纵然会有类似的插件,但一定是不如原生的兼容性和流畅度。Brackets给自己的定位就是现代、开源、懂WEB设计的编辑器。

我自己在前端开发上也用了很多软件,Adobe Dreamweaver---- 暴露年龄说一句:从它还不是Adobe时就开始用----现在功能还是很强大,但UI以及软件思维已经落后了。

之后就用了Sublime Text3,这是一款启动速度快、运行流畅的编辑器,种类繁多、功能强大的插件更是给Sublime Text 3锦上添花。

Atom

Atom在windows只能用惊艳来形容。它是基于Chromium开发成多平台的编辑器,它和Sublime Text3一样,插件很多,有老东家GitHub的支持,使得它的发展非常迅速。它现在就是我的MarkDown 编辑器,你能把它打造成你想要的IDE.

Brackets更关注于web设计师的需求,代码提示、快速编辑、实时预览都是它的强项,它同样基于Chromium开发,前端工程师可以非常快捷方便开发各种插件,加强对Brackets的体验,丰富Brackets的功能。

下面我将为大家推荐一些实用的Brackets插件,一方面可以增强工作效率,一方面可以少安装一些工具软件。


  1. emmet

    emmet 现在已经成了前端编辑器必装插件,大大的提高了html css代码的工作效率,不用多介绍。这个属于现代编辑器的武器。。。

    主页:http://emmet.io/

  2. brackets beautify

    这也是各个前端编辑器必装插件,它可以使您的代码看起来很整洁。代码格式化插件.

    主页:https://github.com/brackets-beautify/brackets-beautify

  3. brackets-git

Git集成插件。我现在都不用git软件了,完成后直接提交。不管是GitHub、bitbucket还是我自建的git服务器。

主页:https://github.com/zaggino/brackets-git

  • MarkdownPreview

Markdown有多受欢迎呢,看看那些卖得老贵IOS软件、MAC软件就可见一斑了。用Brackets当Markdown文档编辑器不会输给那些很贵的编辑器的。----你懂得怎么拓展的话。

主页:https://github.com/gruehle/MarkdownPreview

 

Sublime Text用习惯了以后,对minimap还是相当有好感的,Atom我也专门找了对应的插件来装,Brackets也是。

主页:https://github.com/zorgzerg/brackets-minimap

  • simple-todo
 

todo类的插件用过很多,其实也就用用而已,Atom有个很不错的插件,它居然搜索整个项目的TODO 作为列表,但我不喜欢那样的。这个插件之所以被我列入武器系列,因为它除了可以在项目里面创建txt todo,还可以连接Trello。Trello有什么用,我将在下篇文章写。

主页:https://github.com/ovk/brackets-simple-todo

  • brackets-colorHints

这个插件有看到介绍的好像比较少,它能够对CSS文件里面的颜色16进代码做成一个列表,然后从暗到亮做一个排列,提高工作效率就得靠这些小工具。

主页:https://github.com/konstantinkobs/brackets-colorHints

  • HTML Wrapper

这个插件可以自动为<ul>, <ol>, <nav>, <tr>, <select>生成包裹代码。是Atom和Brackets通用插件。

主页:https://caferati.me/labs/html-wrapper

  • Brackets Icons

Brackets 边栏添加文件图标,可以快速帮你识别出你要编辑的文件的类型。

主页:https://github.com/ivogabe/Brackets-Icons

这个插件是利用Brackets打开图片后,可以选择颜色并且复制颜色代码到剪贴板。有三种代码可供选择:Hex, RGB(a), HSL(a) 。

主页:https://github.com/sprintr/brackets-color-palette

  • brackets-documents-toolbar

还是习惯有个TAB在上面选文件吧。。。。还可以关闭掉左侧的文件列表。

  • brackets-projects

插件默认快捷键alt+p,打开项目窗口,可以设置名称图标等。。。

其实以前用Sublime Text3、Atom都有做类似的笔记,但只想自己备忘,所以写得非常笼统。这次真的写出来分享,其实就是想逼迫自己好好写博客。至少有十年不曾写blog了吧。。。

最重要还是要告诉大家,Brackets真的很好用,如果你正用其它工具写前端的话。也许上面那些我喜爱的插件还不是您的菜的话,下面的连接您可要珍藏好了,TOP-100 extensions!

http://brackets.dnbard.com/extensions


												

[转] 前端开发利器--Brackets 的七种武器和旁门左道的更多相关文章

  1. 前端开发利器-Brackets IDE

    是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器 ...

  2. 快速开发平台分享-UCML快速开发七种武器

    传统的快速开发平台强调的是组件重用.构件重用,主要解决功能重用层面,一般提供了软件开发最常用的功能:表单设计.BPM(业务流程管理).报表.组织机构及权限等功能.但只有功能重用,没有过程重用,要么只能 ...

  3. 前端开发利器—FIDDLER 转

    http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器—FIDDLER 1.Fiddler相对其他调试工具 ...

  4. Linux就这个范儿 第15章 七种武器 linux 同步IO: sync、fsync与fdatasync Linux中的内存大页面huge page/large page David Cutler Linux读写内存数据的三种方式

    Linux就这个范儿 第15章 七种武器  linux 同步IO: sync.fsync与fdatasync   Linux中的内存大页面huge page/large page  David Cut ...

  5. 面试官的七种武器:Java篇

    起源 自己经历过的面试也不少了,互联网的.外企的,都有.总结一下这些面试的经验,发现面试官问的问题其实不外乎几个大类,玩不出太多新鲜玩意的.细细想来,面试官拥有以下七种武器.恰似古龙先生笔下的武侠世界 ...

  6. 百度云世界里的“七种武器”:PCS、BAE、Site App、ScreenX等

    如果说去年百度世界的关键词是“百度新首页”的话,那么今年在研发者人群中,对百度世界最深的印象就是“七种武器”,即在云的世界里,百度为开发者所提供的包括个人云存储.LBS.移动云测试中心等在内的七种工具 ...

  7. UNIX/Linux C 程序员需要掌握的七种武器

    我是一名普通的软件工程师,不是什么技术大牛.这篇文章所提到的"七种武器"只是我这些年工作经验的一点体会和感悟,如果有错误的地方,还请大家指正. (一)C语言 作为一名C程序员,熟练 ...

  8. 让 Python 代码更易维护的七种武器——代码风格(pylint、Flake8、Isort、Autopep8、Yapf、Black)测试覆盖率(Coverage)CI(JK)

    让 Python 代码更易维护的七种武器 2018/09/29 · 基础知识 · 武器 原文出处: Jeff Triplett   译文出处:linux中国-Hank Chow    检查你的代码的质 ...

  9. ansible七种武器和json

                                                               ansible七种武器和json • 第一种武器 – ansible 命令,用于执 ...

随机推荐

  1. 【转】DDMS中线程状态的说明

    因为最近的工作中需要关注APP中的线程,在DDMS中可以查看某个应用的线程: 可以看到每个线程都有自己的status属性,那不同的status分别代表什么情况呢? running – executin ...

  2. Codeforces Round #521 (Div. 3) D. Cutting Out 【二分+排序】

    任意门:http://codeforces.com/contest/1077/problem/D D. Cutting Out time limit per test 3 seconds memory ...

  3. iText生成PDF 格式报表

    1.导包 <dependency> <groupId>com.lowagie</groupId> <artifactId>itext</artif ...

  4. bootstrapPaginator设置同步会翻2页的小坑

    因为需要用到post的返回值在做后面的决定.不想嵌套在回调函数中.网上找了一下.设置为同步 $.ajaxSetup( { async: false }); 结果bootstrap的翻页组件就出了bug ...

  5. mobienet, shufflenet

    参考github上各位大神的代码 mobilenet和shufflenet,实现起来感觉还是各种问题. mobilenet目前使用的代码来自这里:https://github.com/BVLC/caf ...

  6. 用$(this)选择其下带有class的子元素

    $(this).find('.son').removeClass("disn")

  7. mysql replace()用法

    mysql replace实例说明: UPDATE tb1 SET f1=REPLACE(f1, 'abc', 'def'); 释:表tb1中字段f1中为abc的值更新为def.一般用于某字段中值存在 ...

  8. Oracle单行函数用法

    单行函数分为五种类型:字符函数.数值函数.日期函数.转换函数.通用函数. 1.字符函数: 对于输入的字符转换为需要转为的字符或数值. upper()大写 --小写字母转为大写字母 --对于表指定的字符 ...

  9. SQL0668N 不允许对表XX执行操作,原因码为 "3"

    DB2 Load导入数据失败之后,表被锁,提示,SQL0668N 不允许对表XX执行操作,原因码为 "3". 之前也遇到过,当时都是现查现用的,现在在博客记一下,以备后查. 解决方 ...

  10. #leetcode刷题之路9- 回文数

    判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1:输入: 121输出: true 示例 2:输入: -121输出: false解释: 从左向右读, 为 ...