文档章节

Adobe出品的专门为Web开发者设计的跨平台开源编辑器Brackets

eechen
 eechen
发布于 2015/02/12 09:11
字数 638
阅读 4484
收藏 30
Live Preview实时预览和Ctrl-E行编辑是Brackets特色,安装了PHP手册和代码提示扩展,还有符号列表扩展,用起来还不错.
截图是Brackets跑在Ubuntu14.04上.
下载地址:  https://github.com/adobe/brackets/releases
wget https://github.com/adobe/brackets/releases/download/release-1.3/Brackets.Release.1.3.64-bit.deb



Brackets扩展目录:
Linux: ~/.config/Brackets/extensions
Windows: %APPDATA%\Roaming\Brackets\extensions

Brackets Extension Registry:
http://brackets-registry.aboutweb.com/

JavaScript智能提示:
https://github.com/cfjedimaster/brackets-jshint

PHP智能提示(Ctrl+Space):
https://github.com/mackenza/Brackets-PHP-SmartHints
下载并拖拽ZIP包到"文件"-"扩展管理器"即完成安装.

PHP函数文档提示(Ctrl+K):
https://github.com/Wikunia/brackets-QuickDocsPHP

符号列表:
https://github.com/Hirse/brackets-outline-list

格式化HTML/CSS/JavaScript代码(Ctrl+Shift+L):
https://github.com/drewhamlett/brackets-beautify
Github上下载的ZIP包安装不正确,是不完整的,需要从amazonaws上下载:
http://s3.amazonaws.com/extend.brackets/brackets-beautify/brackets-beautify-1.1.6.zip

Less:CSS预处理器
https://github.com/jdiehl/brackets-less-autocompile
http://lesscss.org/

"调试"-"打开配置文件"
Brackets双击选中高亮:
"highlightMatches": true
Brackets单击高亮:
"highlightMatches": {"showToken": true}

"调试"-"打开用户键映射":
"overrides": {}里添加:
"Alt-/":  "edit.showCodeHints"
https://github.com/adobe/brackets/wiki/User-Key-Bindings
https://github.com/adobe/brackets/wiki/Brackets-Shortcuts

代码提示: Ctrl-Space(改为Alt-/)
注释: Ctrl-/
删除一行: Ctrl-Shift-D

Windows上在Brackets里能够激活搜狗输入法,但输入法不跟随光标位置.
Linux上在Brackets里则可以正常使用Fcitx输入法.

运行 fcitx-config-gtk3 在全局设置里可以设置两个激活输入法的快捷键:
比如我设置了 Ctrl+Space 和 Ctrl+Enter

Brackets Live Preview 传给 Chrome 的命令行参数:
Linux:
/usr/bin/google-chrome \
--no-first-run \
--no-default-browser-check \
--allow-file-access-from-files \
--temp-profile \
--user-data-dir=/home/eechen/.config/Brackets/live-dev-profile \
--remote-debugging-port=9222 \
--flag-switches-begin \
--flag-switches-end \
file:///opt/brackets/www/LiveDevelopment/launch.html

Windows:
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
--user-data-dir="C:/Users/eechen/AppData/Roaming/Brackets\live-dev-profile"
--no-first-run
--no-default-browser-check
--allow-file-access-from-files
--remote-debugging-port=9222
--flag-switches-begin
--flag-switches-end
file:///C:/Program%20Files%20(x86)/Brackets/www/LiveDevelopment/launch

所以绿色版Chrome要做一个软链接到/usr/bin/google-chrome:
sudo ln -s /home/eechen/apps/chrome/chrome/google-chrome /usr/bin/google-chrome

"文件"-"项目设置"填入如 http://127.0.0.1:8080/ 后开启Live Preview,需要保存文件后Chrome才能看到效果:
php -S 127.0.0.1:8080 -t "/home/eechen/apps/brackets/simple_html_dom"
Brackets-node建立并监听端口,保持与launch.html(Chrome Remote Debugging Port)的长连接.
HTML文件修改后会即时通知Chrome更新.
sudo netstat -antp|head -n2 && \
sudo netstat -antp|grep Brackets-node|grep ESTABLISHED
如果直接编辑本地文件,Live Preview(实时预览)不需要保存文件就能预览效果.

Adobe Brackets实时预览原理:
Brackets-node <=> Chrome(--remote-debugging-port)
Chrome通过参数--remote-debugging-port建立远程调试端口.
Brackets内部通过Node.JS跟Chrome建立长连接,从而实现实时预览.

© 著作权归作者所有

eechen

eechen

粉丝 1023
博文 107
码字总数 55962
作品 1
深圳
私信 提问
加载中

评论(12)

丑矬穷
丑矬穷
m
喵星人123
喵星人123
没有rpm包吗
z
zzz654321

引用来自“cyper”的评论

谢谢我把ubuntu12.04也改成你那样子了,panel哈哈放在左侧,,去掉那个Applications菜单后图标全部变成和你一样小了.NICE

@eechen 可否推荐一款notepad++的替代品, 要求打开文本文件要快,打开几M的文件也不卡,支持用正则表达式查找替换,没有其它要求.
1st: scite 2nd: madedit
eechen
eechen 博主

引用来自“Klingon”的评论

你的ubuntu看起来很好看

引用来自“eechen”的评论

谢谢,其实这是Xubuntu14.04,主题都是内置的,左侧的快捷方式其实只是一个普通的面板.

引用来自“Klingon”的评论

好看就好看在左侧满满的图标的面板
如果Xfce面板的应用占满超过面板长度后能像Ubuntu Unity滚动就好了.
Klingon
Klingon

引用来自“Klingon”的评论

你的ubuntu看起来很好看

引用来自“eechen”的评论

谢谢,其实这是Xubuntu14.04,主题都是内置的,左侧的快捷方式其实只是一个普通的面板.
好看就好看在左侧满满的图标的面板
eechen
eechen 博主

引用来自“cyper”的评论

谢谢我把ubuntu12.04也改成你那样子了,panel哈哈放在左侧,,去掉那个Applications菜单后图标全部变成和你一样小了.NICE

@eechen 可否推荐一款notepad++的替代品, 要求打开文本文件要快,打开几M的文件也不卡,支持用正则表达式查找替换,没有其它要求.
我用的是Geany,有些瑕疵,但习惯后觉得还行 http://my.oschina.net/eechen/blog/361421
cyper
cyper
谢谢我把ubuntu12.04也改成你那样子了,panel哈哈放在左侧,,去掉那个Applications菜单后图标全部变成和你一样小了.NICE

@eechen 可否推荐一款notepad++的替代品, 要求打开文本文件要快,打开几M的文件也不卡,支持用正则表达式查找替换,没有其它要求.
eechen
eechen 博主

引用来自“Klingon”的评论

你的ubuntu看起来很好看
谢谢,其实这是Xubuntu14.04,主题都是内置的,左侧的快捷方式其实只是一个普通的面板.
Klingon
Klingon
你的ubuntu看起来很好看
【年度盛宴】2012年度最佳 Web 前端开发工具和框架——《上篇》

2012年,Web 开发领域继续在快速的发展,HTML5 仍然在展示其跨平台的优越性,CSS3 被人们更多的应用到实际项目中,响应式设计(Responsive Design)技巧也被人越来越多的人熟知和使用。   ...

缪斯的情人
2013/01/02
971
2
那些适合日常使用的开源工具和应用(设计篇)

本系列文章将针对办公、设计、娱乐、教育等日常使用场景,进行一些开源工具和应用的推荐,希望能对大家有所帮助。优秀的实在太多,篇幅有限,仅列出部分,发现更多可以利用 OSC 的搜索工具。...

王练
2016/11/23
7.4K
14
前端的日子Brackets

Brackets 是一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows、Linux 以及 OS X 平台。 Brac...

棋帅小七
2017/11/16
0
0
四大顶级JavaScript代码编辑器

  【IT168 评论】JavaScript无处不在,这一点无可否认。每个应用程序都在以某种形式使用它。任何认真对待web开发的程序员都会学习JavaScript。并且要不断学习新的框架,库和工具,因为Jav...

it168网站
2017/03/08
0
0
提供给 Web 开发者的 8 款最佳的跨平台编辑器

非常感谢各位一直以来对我们文章的关注,支持和建议,让我们更有斗志为大家提供更多更好的材 料。今天,我们要介绍集成开发环境(IDE)给各位 web 开发者。IDE 是个非常好的工具,通过它的各...

oschina
2014/02/25
14.5K
19

没有更多内容

加载失败,请刷新页面

加载更多

让《强化学习(第2版)》架起一座通往强化学习经典知识宝库的桥梁

上交大计算科学与工程系俞凯教授,5分钟口述讲解,带你快速认识了解年度重磅图书《强化学习(第二版)》! 在 AlphaGo战胜李世石之后,AlphaZero以其完全凭借自我学习超越人类在各种棋类游戏...

博文视点Bv
23分钟前
6
0
TLA7-EVM开发板的处理器、NOR FLASH、DDR3

TLA7-EVM开发板是一款由广州创龙基于Xilinx Artix-7系列FPGA自主研发的核心板+底板方式的开发板,可快速评估FPGA性能。核心板尺寸仅70mm*50mm,底板采用沉金无铅工艺的6层板设计,专业的PCB...

Tronlong创龙
31分钟前
4
0
UUID的变种-有序

为了解决UUID无序的问题,NHibernate在其主键生成方式中提供了Comb算法(combined guid/timestamp)。保留GUID的10个字节,用另6个字节表示GUID生成的时间(DateTime)。 /// <summary> //...

Canaan_
32分钟前
4
0
Netty学习(6)——通道间数据传输

1. FileChannel实现通道间的数据传输 在Java NIO中,如果两个通道中有一个是FileChannel,那你可以直接将数据从一个channel传输到另外一个channel。 transferFrom() FileChannel的transferF...

江左煤郎
35分钟前
4
0
AngularDOM操作

gtandsn
36分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部