Brackets 前端编辑器试用

Brackets编辑器介绍

"一个现代的，开源的，了解网页设计的编辑器"这是官方的宣传语。也就是说它适用于网页开发，包含了许多亮点功能：实时预览(Live Preview)、内联编辑(Inline Edit)、多行编辑（Multiple Selections）、快速文档（Quick Document）。它是基于Chrominu V8引擎运行的软件，在实际使用过程当中偶尔会有卡顿（i5处理器+4G内存+固态硬盘）；

官方网址：http://brackets.io/
官方使用教程：https://github.com/adobe/brackets/wiki/How-to-Use-Brackets
多重选择教程：https://github.com/adobe/brackets/wiki/Working-with-Multiple-Selections
Top100插件：http://brackets.dnbard.com/extensions

---

坠入爱河

实时预览、行内编辑

---

基本使用

打开一个文件夹就能够做为项目进行开发了，File -> Open Folder就能够进行项目开发了

编辑(Edit)

快捷键	功能	详细描述
ctrl + l	选择行	非选中状态则选择当前行，选中状态执行会添加选中下一行
ctrl + [ / ]	缩进/反缩进	无
ctrl + d	重复当前行	未选中状态，复制当前行；选中状态复制选中区域
ctrl + shift + d	删除当前行	无
ctrl + shift + 上/下箭头	上下移动当前行	无
ctrl + / 或 ctrl + shift + /	注释当前或取消注释	非选中状态下，处理当前行；不然处理选中区域
ctrl + space	显示代码提示	中文输入法占用了此快捷键，可自定义快捷键

导航(Navigation)

快捷键	功能	详细描述
ctrl + alt + [/]	代码折叠或展开	无
alt + 1	折叠全部代码	无
ctrl + alt + o	文档跳转	跳转到某个文件
ctrl + g	行跳转	等价于在文档跳转中输入:
ctrl + T	符号跳转	跳转到定义的符号，好比css选择器，js方法，变量,等价于文档跳转输入@
ctrl + e	快速编辑	不离开当前文件进行外部文件的查看和修改

---

它的美

多重选择

多重选择，意味着你能够一次修改的多处代码，Esc键取消多重编辑

• 分隔选中到行：选中文本状态下，按ctrl + alt + l
  
  "选中后，按ctrl + alt + l")

• 连续选择：alt + 鼠标拖动
  

• 断续选择：ctrl + 鼠标点击
  

实时预览

Brackets支持两种预览方式，均是基于chrome浏览器提供的开发者调试功能，因此只支持chrome实时浏览，一使用内置的静态服务器，二使用服务器（一般是本地）

• 内置静态服务器：支持css/html修改,以及less/sess
• 远程服务器：一般是本地，须要设置File -> project setting指定当前页面的url

注： 快捷键 ctrl + alt + p

行内编辑

不离开上下文便可编辑外部文件，例如在html页面就能够修改某元素的css、css文件内就可使用取色器修改颜色、js能够修改外部的js文件;

注： 快捷键 ctrl + e

---

代码提示

html支持标签和属性的提示,css支持key和value的提示，js提示很好，默认使用Jshit进行代码检测

---

插件

使用包管理器进行插件安装，右侧Extension Manager。在线选中安装、从指定url中安装、本地安装，因为国内网络的缘由部分插件可能没法下载；推荐如下插件：

名称	做用
名称	功能
代码编写
*Emmet	快速编写HTML代码
Autoprefixer	CSS自动补全前缀，实现浏览器兼容
*Markdown Preview	mardkdown实时预览
代码处理
*Beautify	HTML、CSS、JavaScript代码格式化
JSLint	javaScript检查，brackets已经内置了
JSHint	javaScript检查
*CSSLint	CSS检查
*HTMLHint	HTML检查
*JS CSS Minifier	JS CSS文件压缩
CanIUse	使用canIUse网站的数据，查看各个浏览器对css的支持程度
版本控制
Brackets Git	brackets继承git，依然须要安装git才能使用
外观
Custom Work	自定工做空间，修改了文本标签为水平
Minimap	像sublime同样能限时代码的缩略图
brackets-power-mode	很火的代码输入特效，特效颗粒、闪屏，无声音
Brackets Icons	文件列表对不一样类型的文件前添加图标
Indent Guides	代码层次的缩进线

注：插件编写官方教程

---

设置

菜单仅仅能修改少许的设置，如：字体、主题等少许的。更多的设置须要修改json格式的配置文件，软件为中文语言状态下配置文件有中文注释。

• 菜单Debug -> Open Preferences File进行设置
• 菜单Debug -> Open User keyMap File进行设置

总结

• 跨平台：支持windows、linux、ox系统
• 外观：Brackets能够说是源代码编辑器中的美人，它是基于浏览器的软件，它的UI就像网页同样绚丽多彩，同时又简洁大方
• 运行速度：总体运行很流畅，偶尔会有1s左右的延迟
• 代码处理：html支持标签和属性的提示,css支持key和value的提示，js提示很好，默认使用Jshit进行代码检测
• 插件：插件丰富，不少功能可使用插件完成，brackets自带了nodejs对于依赖于nodejs的插件没必要额外安装nodejs
• 发展前景：社区使用比较活跃，js编写插件，文档比较完善
• 使用建议：作为后端开发人员不推荐长期使用，能够选择sublime作为轻量的源代码编辑器。使用过程当中偶尔会有小bug，总之不要被工具左右，而要其为我所用