Brackets 前端编辑器试用

灰太狼 2022-06-16 03:45 214阅读 0赞

# Brackets编辑器介绍 #

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

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

--------------------

# 坠入爱河 #

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

--------------------

# 基本使用 #

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

## 编辑(Edit) ##

<table style="color:rgb(0,0,0); font-size:14px; line-height:21px"> 
 <thead> 
  <tr> 
   <th>快捷键</th> 
   <th>功能</th> 
   <th>详细描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ctrl + l</td> 
   <td>选择行</td> 
   <td>非选中状态则选择当前行，选中状态执行会添加选中下一行</td> 
  </tr> 
  <tr> 
   <td>ctrl + [ / ]</td> 
   <td>缩进/反缩进</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>ctrl + d</td> 
   <td>重复当前行</td> 
   <td>未选中状态，复制当前行；选中状态复制选中区域</td> 
  </tr> 
  <tr> 
   <td>ctrl + shift + d</td> 
   <td>删除当前行</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>ctrl + shift + 上/下箭头</td> 
   <td>上下移动当前行</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>ctrl + / 或 ctrl + shift + /</td> 
   <td>注释当前或取消注释</td> 
   <td>非选中状态下，处理当前行；否则处理选中区域</td> 
  </tr> 
  <tr> 
   <td>ctrl + space</td> 
   <td>显示代码提示</td> 
   <td>中文输入法占用了此快捷键，可自定义快捷键</td> 
  </tr> 
 </tbody> 
</table>

## 导航(Navigation) ##

<table style="color:rgb(0,0,0); font-size:14px; line-height:21px"> 
 <thead> 
  <tr> 
   <th>快捷键</th> 
   <th>功能</th> 
   <th>详细描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ctrl + alt + [/]</td> 
   <td>代码折叠或展开</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>alt + 1</td> 
   <td>折叠所有代码</td> 
   <td>无</td> 
  </tr> 
  <tr> 
   <td>ctrl + alt + o</td> 
   <td>文档跳转</td> 
   <td>跳转到某个文件</td> 
  </tr> 
  <tr> 
   <td>ctrl + g</td> 
   <td>行跳转</td> 
   <td>等价于在文档跳转中输入:</td> 
  </tr> 
  <tr> 
   <td>ctrl + T</td> 
   <td>符号跳转</td> 
   <td>跳转到定义的符号，比如css选择器，js方法，变量,等价于文档跳转输入@</td> 
  </tr> 
  <tr> 
   <td>ctrl + e</td> 
   <td>快速编辑</td> 
   <td>不离开当前文件进行外部文件的查看和修改</td> 
  </tr> 
 </tbody> 
</table>

--------------------

# 它的美 #

## 多重选择 ##

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

*  分隔选中到行：选中文本状态下，按ctrl + alt + l  
    ![行分隔][1002413-20170223184516273-1688148421.gif]  
    "选中后，按ctrl + alt + l")
 *  连续选择：alt + 鼠标拖动  
    ![连续选择][1002413-20170223184639710-1329356884.gif]
 *  断续选择：ctrl + 鼠标点击  
    ![断续选中][1002413-20170223184735773-1755097494.gif]

## 实时预览 ##

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

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

*注：* 快捷键 ctrl + alt + p

## 行内编辑 ##

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

![行内编辑][1002413-20170223184848851-1208462344.gif]

*注：* 快捷键 ctrl + e

--------------------

# 代码提示 #

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

--------------------

# 插件 #

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

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

*注：*插件编写官方教程

--------------------

# 设置 #

菜单仅仅能修改少量的设置，如：字体、主题等少量的。更多的设置需要修改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，总之不要被工具左右，而要其为我所用

[http_brackets.io]: http://brackets.io/
[https_github.com_adobe_brackets_wiki_How-to-Use-Brackets]: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets
[https_github.com_adobe_brackets_wiki_Working-with-Multiple-Selections]: https://github.com/adobe/brackets/wiki/Working-with-Multiple-Selections
[http_brackets.dnbard.com_extensions]: http://brackets.dnbard.com/extensions
[Brackets]: /images/20220616/3640d948bad94846b3cf8c6e00554e00.png
[1002413-20170223184516273-1688148421.gif]: /images/20220616/84ee27ead0e9440da2e02f2d29cfcc60.png
[1002413-20170223184639710-1329356884.gif]: /images/20220616/49ffaf005af54b5e806437137db293eb.png
[1002413-20170223184735773-1755097494.gif]: /images/20220616/d01b08ebc8c741fd8dad38d9b4346611.png
[1002413-20170223184848851-1208462344.gif]: /images/20220616/9551d3f4355a400cb02d5da827520266.png