4. Brackets 前端编辑器试用

转自：https://blog.csdn.net/wuji3390/article/details/71170579

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，总之不要被工具左右，而要其为我所用