2014年2月7日星期五

好用的前端Web编辑器- Brackets

Brackets 是一个开放原码的以前端开发为主的IDE，而且是由Adobe 所开发的.
Bracket is an open source editor for web designers and front-end developers



下载地址:
http://brackets.io/
https://github.com/adobe/brackets

想要先对Brackets 有所了解的朋友，可以先到Wiki 查看相关内容，

而Brackets 官方也有影片介绍，让我们可以快速了解，

另外还有几段介绍影片也是可以让我们更加了解Brackets：
Brackets: A Free Open Source Code Editor for the Web (这影片我喜欢里面介绍的方式)

说到介绍影片就不能不介绍Jeffery Way 的影片，我就是看了这段影片之后就喜欢上Brackets 这个Web 编辑器，


不过没有中文、只支援UTF-8 编码

 下面是Brackets 非常好用的一些功能:
1 Live Development
就是在编辑器中做什么,马上就可以在浏览器中看到效果
这应该是我最喜欢的功能之一，不过这个功能必须要搭配「Chrome浏览器」才会有作用，在Brackets的右上方有一个「闪电」的符号（Harry Portter ?!），按下闪电符号之后就会开启Chrome 浏览器并开启目前正在编辑的网页档案，只要在Brackets 里对网页做更动并在储存之后Chrome 里所呈现的网页也会立即做变动，如果开发环境有双萤幕的话，编辑HTML 时就会更加方便！
另外在Brackets 中按下「F12」会执行Chrome 的Developer Tools，而按下「F5」则会重新载入Brackets，假如有进入Live Development 状态则会关闭。

2 Quick Edit
  就是在HTML 中可以直接编辑页面所用的CSS
例如说在Brackets 里开启HTML 档案，选定某一个Element Tag，例如 "h1"然后按下「Ctrl + E」后就会进入Quick Edit 的状态，就是直接把h1在CSS定义显示出来,然后我们就可以在Quick Edit 区块里去编辑css 内容，编辑完成之后在Chrome 里所呈现的页面也就跟着改变，这不用存档，样式编辑的同时就可以看到呈现的结果，于Quick Edit 编辑完成后，再按下「Ctrl + E」可以关闭Quick Edit，而main.css 的内容也会跟着改变。

3 Shortcut - 快捷键
Brackets 的Wiki 里就有整理:

几个会常用到的快速键整理如下：
切换已开启的档案：Ctrl + Tab
快速开启档案：Ctrl + Shift + O
开关Live File Previwer：Ctrl + Alt + P

4 Brackets Extensions

Brackets 跟ST2 一样都有扩充套件可以使用（不过两者的套件不能互为使用）
底下介绍如何为Brackets 安装Extensions，首先我要来安装「Html Templates」这个扩充套件，
下载Html Templates Extension 的Zip 档案
下载之后，先解开压缩档，接着回到Brackets，点选「Helper > Show Extensions Folder」
开启「extensions」的目录，然后进入「user」目录中，把刚才解开的压缩档内容复制或是剪下，然后将内容复制到「Extensions / user」目录下，关闭档案总管，接着也重新开启Brackets，然后建立一个新档案并且改名为「test.html」,点选「Edit > HTML Templates」,接着看我们要使用哪一种的doctype,套用HTML 5 的范本内容

就这样，Brackets 的Extensions 安装就这么简单，各个Extensions 的使用就看usage 的内容来了解​​，以下就列出几个推荐安装的Extensions，
Brackets Commands Guide：https://github.com/peterflynn/brackets-commands-guide
如果你想要让Brackets有Sublime Text 2的Command Palette的功能，这个就套件就一定要装。
Emmet/Zen Coding：https://github.com/emmetio/emmet/downloads
不用多说，这个套件是一定要安装的！
时间：
标签： ,