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

4. Brackets 前端编辑器试用的更多相关文章

  1. Brackets 前端编辑器试用

    Brackets编辑器介绍 "一个现代的,开源的,了解网页设计的编辑器"这是官方的宣传语.也就是说它适用于网页开发,包含了许多亮点功能:实时预览(Live Preview).内联编 ...

  2. Brackets - 前端编辑器推荐

    Brackets是一款基于web(html+css+js)开发的web前端编辑器.它有许多普通编辑器难以实现的功能,是web前端开发者的神器. 戳我去下载 其功能如下: 1.快速编辑 将光标定在颜色上 ...

  3. Brackets - 前端神器

    做了几年的 .Net 项目开发,后来公司转 Java 语言开发,Java 做了还没一年,公司准备前后端分离开发,而我被分到前端! Brackets是一款基于web(html+css+js)开发的web ...

  4. Brackets前端开发编辑器

    http://www.cnblogs.com/xiazdong/p/3550148.html http://blog.csdn.net/shinesun001/article/details/5348 ...

  5. Atom 编辑器试用

    简介 它号称"21世纪可黑客的文本编辑器".GitHub支持并开源,并支持跨平台.和brackets编辑器一样基于浏览器开发,意味着你可以使用less(包含css)来定制编辑器界面 ...

  6. Brackets前端开发IDE工具

    Brackets是一个开源的前端开发IDE工具,网页设计师和前端开发人员必备的前端开发IDE工具. 它能够使你在开发WEB网站实时预览你的网页,目前版本只适用于Chrome浏览器可以实时预览效果 支持 ...

  7. 前端编辑器 之 sublime-text3

    工善欲其事,必先利其器 作为一名前端工程师,一定要有熟练,便捷的开发工具,虽然自己一直使用神一样的编辑器,但是却没有使用的像神一样,于是再次深入了解下这款工具 下载sublime-text 去官网下载 ...

  8. sublime前端编辑器入门与个人使用经验分享

    Sublime Text(以下简称sublime)是一款很好用的代码编辑器,小巧且很灵敏,几乎可以编写大部分主流的计算机语言代码,更是堪称前端代码编辑神器. 你百度一下会发现许多sublime的安装和 ...

  9. 新手必需用!大道至简的前端编辑器Sublime Text

    很多人在进入学习前端的时候(包括我自己),除了选择学习合适的技术,还需要一个得(自)心(己)应(喜)手(欢)的开发工具,一个得心应手的开发工具除了可以令你的效率大大提高,也可以令你在写代码的时候,心情 ...

随机推荐

  1. BackTrack5里使用OpenVAS

    不多说,直接上干货! 前提 VM虚拟机的 BackTrack5安装完美图文教程: http://download.csdn.net/detail/u010106732/9845495 关于OpenAV ...

  2. CUDA还未产出,又要出北洋多元统计习题集

    其实目前是自己摸清了一个套路.genome realign的算法,以及CUDA的写法都已经有数了,前两天也弄完了关静的所有任务.但是今天关静早上一上来就宣布一个重磅消息:除了全学期的作业和期末论文,另 ...

  3. Android项目实战(四十四):浅谈Postman (网络请求调试插件)

    前言: Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件.    在项目开发中,可以依赖此工具模拟API测试. 使用详解: 各种情况Api的模拟请求的Postman使用方 ...

  4. Design Doc: Session History for Out-of-Process iframes

    Design Doc: Session History for Out-of-Process iframes Charlie Reis, May 2014 This document outlines ...

  5. caioj 1106 树形动态规划(TreeDP)1:加分二叉树

    解这道题的前提是非常熟悉中序遍历的方式 我就是因为不熟悉而没有做出来 中序遍历是5 7 1 2 10的话,如果1是根节点 那么5 7 1就是1的左子树,2, 10就是右子树 这就有点中链式dp的味道了 ...

  6. js 异步加载的方式

    js 异步加载的方式 渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染 defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中 ...

  7. Chrome开启无界面浏览模式Python+Windows环境

    环境:Python 3.5.x + Selenium 3.4.3 + Chromedriver 2.30 + Chrome 60 beta版 + WIN7/WIN10 chrome_options = ...

  8. 參加北京bluemix云计算大会偶记

    我就不写散文了.博客也要轻量化. 记录心路历程吧. 这是一次ibm的技术大会.也是传道大会,洗脑大会.会议主题看起来非常多,占领了北京国际饭店的三层,作为一个老ibm bp感受非常多. 1.北京的创业 ...

  9. HTML <button> 标签

    HTML <button> 标签 目标 实现点击button跳转到一个新的界面 参考文档 实例 以下代码标记一个按钮: <button type="button" ...

  10. Mac OSX 平台安装 MongoDB

    Mac OSX 平台安装 MongoDB MongoDB 提供了 OSX 平台上 64 位的安装包,你可以在官网下载安装包. 下载地址:https://www.mongodb.com/download ...