[转] 前端开发利器--Brackets 的七种武器和旁门左道
转自:http://www.jianshu.com/p/ff7798aa4548
Brackets是Adobe开发的web编辑器,是一款免费开源、多平台支持的软件,并在于GitHub上维护。Brackets支持增加插件以提供额外的功能扩展,下面的文章将介绍一些我常用的插件以及我使用期间的心路历程。
![](/assets/blank.gif)
这就是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锦上添花。
![](/assets/blank.gif)
Atom
Atom在windows只能用惊艳来形容。它是基于Chromium开发成多平台的编辑器,它和Sublime Text3一样,插件很多,有老东家GitHub的支持,使得它的发展非常迅速。它现在就是我的MarkDown 编辑器,你能把它打造成你想要的IDE.
Brackets更关注于web设计师的需求,代码提示、快速编辑、实时预览都是它的强项,它同样基于Chromium开发,前端工程师可以非常快捷方便开发各种插件,加强对Brackets的体验,丰富Brackets的功能。
下面我将为大家推荐一些实用的Brackets插件,一方面可以增强工作效率,一方面可以少安装一些工具软件。
emmet
emmet 现在已经成了前端编辑器必装插件,大大的提高了html css代码的工作效率,不用多介绍。这个属于现代编辑器的武器。。。
主页:http://emmet.io/
brackets beautify
这也是各个前端编辑器必装插件,它可以使您的代码看起来很整洁。代码格式化插件.
主页:https://github.com/brackets-beautify/brackets-beautify
brackets-git
Git集成插件。我现在都不用git软件了,完成后直接提交。不管是GitHub、bitbucket还是我自建的git服务器。
主页:https://github.com/zaggino/brackets-git
- MarkdownPreview
![](/assets/blank.gif)
Markdown有多受欢迎呢,看看那些卖得老贵IOS软件、MAC软件就可见一斑了。用Brackets当Markdown文档编辑器不会输给那些很贵的编辑器的。----你懂得怎么拓展的话。
主页:https://github.com/gruehle/MarkdownPreview
JS CSS Minifier
这个插件好像也是前端编辑器必装的插件,可以压缩CSS和JS文件
主页:https://github.com/abagshaw/brackets-minifier
brackets-minimap
![](/assets/blank.gif)
Sublime Text用习惯了以后,对minimap还是相当有好感的,Atom我也专门找了对应的插件来装,Brackets也是。
主页:https://github.com/zorgzerg/brackets-minimap
- simple-todo
![](/assets/blank.gif)
todo类的插件用过很多,其实也就用用而已,Atom有个很不错的插件,它居然搜索整个项目的TODO 作为列表,但我不喜欢那样的。这个插件之所以被我列入武器系列,因为它除了可以在项目里面创建txt todo,还可以连接Trello。Trello有什么用,我将在下篇文章写。
主页:https://github.com/ovk/brackets-simple-todo
- brackets-colorHints
![](/assets/blank.gif)
这个插件有看到介绍的好像比较少,它能够对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
![](/assets/blank.gif)
Brackets 边栏添加文件图标,可以快速帮你识别出你要编辑的文件的类型。
主页:https://github.com/ivogabe/Brackets-Icons
Brackets Autoprefixer
这个插件可以自动只能的为 CSS 元素添加前缀。
主页:https://github.com/mikaeljorhult/brackets-autoprefixer
brackets-color-palette
![](/assets/blank.gif)
这个插件是利用Brackets打开图片后,可以选择颜色并且复制颜色代码到剪贴板。有三种代码可供选择:Hex, RGB(a), HSL(a) 。
主页:https://github.com/sprintr/brackets-color-palette
- brackets-documents-toolbar
![](/assets/blank.gif)
还是习惯有个TAB在上面选文件吧。。。。还可以关闭掉左侧的文件列表。
- brackets-projects
![](/assets/blank.gif)
插件默认快捷键alt+p,打开项目窗口,可以设置名称图标等。。。
其实以前用Sublime Text3、Atom都有做类似的笔记,但只想自己备忘,所以写得非常笼统。这次真的写出来分享,其实就是想逼迫自己好好写博客。至少有十年不曾写blog了吧。。。
最重要还是要告诉大家,Brackets真的很好用,如果你正用其它工具写前端的话。也许上面那些我喜爱的插件还不是您的菜的话,下面的连接您可要珍藏好了,TOP-100 extensions!
http://brackets.dnbard.com/extensions
转载于:https://www.cnblogs.com/rangeon/p/7838234.html
[转] 前端开发利器--Brackets 的七种武器和旁门左道相关推荐
- 前端开发利器--PxCook(像素大厨)
前端开发利器 - - PxCook(像素大厨) 1.PxCook简述 2.PxCook安装 3.PxCook基本操作 3.1 通过软件打开设计图 3.2 常用快捷键 3.3 常用工具 3.4 从psd ...
- 快速开发平台分享-UCML快速开发七种武器
传统的快速开发平台强调的是组件重用.构件重用,主要解决功能重用层面,一般提供了软件开发最常用的功能:表单设计.BPM(业务流程管理).报表.组织机构及权限等功能.但只有功能重用,没有过程重用,要么只能 ...
- 前端开发利器—FIDDLER 转
http://www.cnblogs.com/yuzhongwusan/archive/2012/07/20/2601306.html 前端开发利器-FIDDLER 1.Fiddler相对其他调试工具 ...
- 七种武器武装.NET(常用开发工具介绍)(转)
我学习.Net快一年了,偶然间发现大家用的开发工具很多我都没见过,于是暗中的进行收集(呵呵,夸张了),现在收集满七种特来做此总结!我称他们为"七种武器"\(^o^)/ 第一种武器长 ...
- html cdn不缓存,【前端开发日常 - 6】七牛CDN上的网页缓存问题及HTML禁止缓存(续)...
需求背景 紧接着之前的内容[前端开发日常 - 5]七牛CDN上的网页缓存问题及HTML禁止缓存. 由于七牛CDN无法通过设置对单独的文件修改,而只能通过对 bucket 的统一设置修改 max-age ...
- 视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
- 视频教程-Web前端开发利器 SPRY框架之页面效果-JavaScript
Web前端开发利器 SPRY框架之页面效果 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
- 视频教程-Web前端开发利器 SPRY框架之数据集XML-JavaScript
Web前端开发利器 SPRY框架之数据集XML 有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情 ...
- 程序员 :超越软件蓝领的七种武器
信息技术的发展时间虽然不长,但其爆炸式的发展速度使信息技术迅速覆盖社会和人类生活的各个角落.程序员们是这场信息化浪潮的见证者之一,更是其中的主要参与者,这是时代赋予每个程序员的机会和责任. 信息技术的 ...
最新文章
- JAVA命令行编译及运行
- Ruby版本管理(RVM)
- The Art of Unix Programming
- @Cacheable原理
- OpenCV学习笔记(四):XML,YAML(.txt,.doc)文件读写操作
- 微型计算机基础知识,微型计算机的基础知识
- 通过CSS,Jquery实现DIV的各种动作(包括漂移,未测试IE6)
- ios低版本、微信浏览器低版本 不能使用的js语法总结
- Pr视频剪辑软件使用小结
- VS201X更换平台Rebuild项目时,旧平台生成的发布件被删除
- CA证书出错,请登录微信支付商户平台下载证书
- Axios 的简易学习笔记
- Quartus-建立新工程
- torch.bmm() 与 torch.matmul()
- 帝国CMS(EmpireCMS) v7.5配置文件写入漏洞分析
- x64 可变参数原理完全解析
- zynq系列之-----PS端iic使用
- 长春市建筑物矢量数据(Shp格式+带高度)
- 跨时钟域为什么要双寄存器同步
- ABAP smartforms 打印多页打印在同一页上解决