Branckets 常用插件说明

上面对Branckets做了一个简单的介绍->Branckets新一代Web开发编码神器, 这里我们来说说广大的开发者为Branckets开发的强大插件, 有了它们Branckets, 简直如虎添翼, 分分钟把集成IDE秒成渣.

UTF8 Converter

这个什么好解释的咯, 就只是UTF8.

https://github.com/Armacryss/brackets-utf8-converter

Shizimily Multi-Encoding for Brackets

Brackets默认是不支持GBK编码的, 特别是在windows上GBK编码是文本的默认编码, 虽然自己知道可以更改编码, 但是如果要协同工作的话, 碰上了不同编码的情况还是很蛋痛的

https://github.com/Hiromi-Ayase/brackets-shizimily-multiencoding

Brackets Beautify

代码美化插件, 这个自然是必装的咯, 支持 HTML, CSS, 和 JavaScrip 三种文件的格式化.

使用方法:

  1. Edit > Beautify
  2. Windows/Linux: Ctrl-Alt-B
  3. Windows: Ctrl-Shift-L
  4. MacOSX: Cmd-Shift-L

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

Brackets Autoprefixer

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

https://github.com/mikaeljorhult/brackets-autoprefixer

Brackets Icons

顾名思义, 按照文件的扩展名, 给它安排相应的图标

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

Brackets Document Toolbar(with tabs)

Tab栏, 说来也奇怪为什么官方版本不支持这个功能. 随便一提, 早期的版本也不支持代码折叠, 貌似是从1.5开始支持了. 由此推断以后或许会支持这个功能.

https://github.com/dnbard/brackets-documents-toolbar

选择文本后高亮显示相同的文本, 和Brackets Document Toolbar(with tabs), 官方同样不支持这个功能

https://github.com/enturn/brackets-quick-search

BracketstoIX extension

对Brackets增加的一些扩展功能

https://github.com/apptoix/bracketstoix

brackets-minimap

你使用过Submit的话估计你一定会对编辑框右侧的那个代码地图印象会相当深吧, brackets当然也会支持这种功能咯, 只是不是官方支持的而已, 不过也没关系, 使用起来是一样一样的.

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

Brackets Terminal

让你能太编码的过程很方便的调用控制台命令, 而不用切换到控制台, 简直爽有木有

https://github.com/artoale/brackets-terminal

brackets-sftp-upload

代码时时同步到线上服务器, 免去了启动ftp的时间, 很方便

https://github.com/bigeyex/brackets-sftp-upload

Markdown Preview

对于经常需要写Markdown的你来说, 是不是需要时不时的预览下呢, 那么有了这个插件, 你就不用再进行编译和切换到浏览器查看了, 直接在编辑器内完成一切操作, 超nice.

https://github.com/gruehle/MarkdownPreview

Extract for Brackets

Adobe 官方插件, 可以预览PSD,点击图层,然后输入css属性,看到没有,图层的样式自动跑出来啦,有木有有木有?!width、height、left、top、color、background-color、opacity应有尽有,还能测量两个元素之间的距离,再也不用到PS里手工测量和偷瞄CSS Hat的代码啦!如果是文字图层,还可以点击copy text,文字就到粘贴板上啦。如果是普通图层,填写background或img的时候,还会自动切图到你的文件夹耶!要不要这么霸气呀?!
(PS: 当然对于大陆用户来说相当然并卵的插件o(╯□╰)o, 不支持离线, 而且最大只支持15MB, 我就只能呵呵)

https://helpx.adobe.com/creative-cloud/help/extract-for-brackets.html

QuickDocsJS

快速查看javascript帮助文档
使用: CMD+K

https://github.com/Wikunia/brackets-QuickDocsJS

QuickDocsPHP

快速查看PHP帮助文档
使用: CMD+K

https://github.com/Wikunia/brackets-QuickDocsPHP

brackets-jshint

javascript代码提示, 方便第一时间发现你编码时不规范的地方

https://github.com/cfjedimaster/brackets-jshint

brackets-csslint

css代码提示, 方便第一时间发现你编码时不规范的地方

https://github.com/cfjedimaster/brackets-csslint

Brackets-Git

集成Git到你的Brackets中

Main panel of Brackets Git
Main panel of Brackets Git

History panel of Brackets Git
History panel of Brackets Git

Details view for a specific commit
Details view for a specific commit

Commit dialog
Commit dialog

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

html-designer

一个掉渣天的功能, 虽然并不新鲜, 但是能把他集成到Brackets中还是得费很大功夫的, 必须致敬.
使用拖拽的方式进行html布局, 详情请看下面GitHub

https://github.com/swmitra/html-designer

FuncDocr

快速生成文档注释, 相当方便, 比Sublime的那个参见还多了一个选择类型的功能, 虽然有点然并卵, 但是还是相当赞的
支持 javascript and php
使用方法: /** + Enter

https://github.com/wikunia/brackets-funcdocr

Emmet plugin for Brackets editor

HTML, CSS 快速编辑插件, 想必大家都知道的, 这里就不过多阐述, 以后可能会单独另起篇幅来说明.

http://emmet.io/
https://github.com/emmetio/brackets-emmet

PHP-SmartHints

一个十分好用的PHP代码提示, 补全插件

https://github.com/Brackets-PHP/Brackets-PHP-SmartHints

Bootstrap Snippets for Brackets

快速生成Bootstrap代码, 详细使用方法查看下面GitHub地址

https://github.com/acbarbosa1964/acb-bootstrap-snippets

更多优秀插件

https://ingorichter.github.io/BracketsExtensionTweetBot/