[转] 前端开发利器--Brackets 的七种武器和旁门左道

转自：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 Text三、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

• JS CSS Minifier

  这个插件好像也是前端编辑器必装的插件，能够压缩CSS和JS文件

  主页：https://github.com/abagshaw/brackets-minifier

• brackets-minimap

 

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 Autoprefixer

  这个插件能够自动只能的为 CSS 元素添加前缀。

  主页：https://github.com/mikaeljorhult/brackets-autoprefixer

• brackets-color-palette

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

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

• brackets-documents-toolbar

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

• brackets-projects

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

其实之前用Sublime Text三、Atom都有作相似的笔记，但只想本身备忘，因此写得很是笼统。此次真的写出来分享，其实就是想逼迫本身好好写博客。至少有十年未曾写blog了吧。。。

最重要仍是要告诉你们，Brackets真的很好用，若是你正用其它工具写前端的话。也许上面那些我喜好的插件还不是您的菜的话，下面的链接您可要珍藏好了，TOP-100 extensions！

http://brackets.dnbard.com/extensions