搭建ionic开发IDE利器-Brackets

本文链接：https://blog.csdn.net/ioniconline/article/details/50162387

您可自由转发此文，但请保留出处：Ionic在线学习网站 http://www.ioniconline.com

Brackets ：免费、开源、跨平台。
HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具)。
Adobe 创建和维护，在Windows、Linux平台都可使用。
与 Sublime Text等通用代码编辑器不一样的是，Brackets 专门针对 WEB 前端开发而生。

下载安装Brackets及插件

到官网下载：http://brackets.io/ 根据不同的Windows、Linux 平台选对相应的版本下载，然后安装即可。
安装一些常用插件（文件->扩展管理器），笔者安装的插件有：
- Beautify: Format JavaScript, HTML, and CSS files。（编辑->Beautify pn save）
- Brackets Icons：File icons in Brackets’ file tree。（不同文件类型有不同图标标识）
- Console Plus：Shows console.logs &.errors without leaving Brackets.
- Extract for Brackets (Preview)：Preview of Extract functionality inside Brackets。
- Ionic Framework Code Hinting：Code hinting for the Ionic Framework。

常用操作指南：

打开项目：文件 -> 打开目录，左侧会展示对面的文件树。
格式化代码：编辑->Beautify on save。
快捷编辑：Ctrl + E。
- CSS：光标放在一个class或id属性的标签名称上，按下Ctrl+ E。Brackets将搜索项目下所有CSS文件，会打开一个内嵌的编辑器可以让你迅速修改CSS代码。当前class/id标签有多处样式定义时，编辑窗口提供切换按钮来切换显示样式，也可以使用Alt + Up/Down箭头键切换。需要注意的是，Brackets会检测当前html文档以及项目下所有CSS文件来查找class/id样式，即使某些CSS文件在当前html文档中未被引用到。
- JS函数：把光标放在一个js函数名称上，按下Ctrl+ E，也可以快速预览/编辑。