Brackets 前端编辑器试用

最新推荐文章于 2021-06-04 17:14:06 发布

weixin_30681121

最新推荐文章于 2021-06-04 17:14:06 发布

阅读量147

点赞数

文章标签：前端 git javascript ViewUI

原文链接：http://www.cnblogs.com/jcook/p/6434913.html

版权

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

坠入爱河

实时预览、行内编辑
神奇的Brackets

基本使用

打开一个文件夹就可以作为项目进行开发了，File -> Open Folder就可以进行项目开发了

编辑(Edit)

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

快捷键	功能	详细描述
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	代码层次的缩进线