是Adobe的开源HTML/CSS/JavaScript集成开发环境,来自于Adobe全新代码编辑器Adobe Edge Code CC Preview免费下载升级并开源而来。提供Windows和OS X平台支持。Brackets是一款开源的轻量级的,功能可媲美dreamweaver。Brackets 的特点是简约、优雅、快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等。和 Sublime Text、Everedit 等通用不一样,Brackets 是专门针对 开发而生。

Brackets使用教程:Adobe Brackets网页前端代码编辑器使用教程&免费下载

Adobe全新开源可视化网页代码编辑器Brackets最新免费版官方下载

Brackets部分快捷键

Ctrl/Cmd+Shift+H 可以呼出与关闭文件树
Ctrl/Cmd + E 快速预览/编辑 css样式/javascript函数
Ctrl/Cmd + +/- 放大缩小编辑区字体大小
Ctrl/Cmd + 0 重置编辑区字体大小
Ctrl/Cmd + Alt + P 打开即时预览功能
Ctrl/Cmd + / 行注释
Ctrl/Cmd + Alt + / 块注释
注:css代码、html代码注释时只能使用块注释快捷键

关键词: Brackets 网页编辑器

内联编辑

Instead of jumping between file tabs, Brackets lets you open a window into the code you care about most. Want to work on the CSS that applies to a specific ID? Put your mouse cursor on that ID, push Command / Ctrl+Eand Brackets will show you all the CSS selectors with that ID in an inline window so you can work on your code side-by-side without any popups.

Get a real-time connection to your browser. Make changes to CSS and HTML and you'll instantly see those changes on screen. Also see where your CSS selector is being applied in the browser by simply putting your cursor on it. It's the power of a code editor with the convenience of in-browser dev tools.

预处理支持

Work with preprocessors in a whole new way. We know how important preprocessors are to your workflow. That’s why we want to make Brackets the best code editor for preprocessors out there. With Brackets you can use Quick Edit and Live Highlight with your LESS and SCSS files which will make working with them easier than ever.

Brackets使用教程:Adobe Brackets网页前端代码编辑器使用教程&免费下载