前端开发利器-Brackets IDE

Posted 2020-07-24 LightSong@计海拾贝

是什么？

http://brackets.io/

A modern, open source text editor that understands web design.

现代， 开源的文本编辑器， 最懂得web设计。

With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser.

专注可视化工具 和 预处理支持， 就是现代感的文本编辑器， 在浏览器中设计更加容易。

 

【注释】：

1、理解上， 与 npm构建的包依赖集成开发环境对比， npm非可视化， 更关注项目的子功能管理，

本工具更加重视前台代码开发， 提升前端开发体验，  让用户在文本编辑器中的修改， 立刻体现在浏览器中，便于前端布局， 便于前端修改html和js，并立刻查看效果， 不用再做save和refresh工作。

2、与腾讯alloydesigner相比， ALLOYDESIGNER工具依赖浏览器chrome环境和XAMP,  此工具集成nodejs的webserver自动触发chrome浏览器，更新页面， 显示样式更改， 此工具对html css js均支持live preview。

 

为什么？

Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it\'s like getting presents all year long.

此工具是一个轻量，但是强大的， 现代感的文本编辑器。  我们将可视化的工具添加进入编辑器， 以便你可以随时获取你想要的帮助。 每3-4周发布新的功能和扩展， 就像常年能够获取礼物一样让人惊喜。

 

Brackets is a different type of editor. Brackets has some unique features like Quick Edit, Live Preview and others that you may not find in other editors. Brackets is written in javascript, HTML and CSS. That means that most of you using Brackets have the skills necessary to modify and extend the editor. In fact, we use Brackets every day to build Brackets. To learn more about how to use the key features, read on.

Brackets包含一些独一无二的功能： 类似 QuickEdit  LivePreview 和 其他的你在其它编辑器找不到的功能。

Brackets是使用JS HTML CSS编写， 这意味着， 大多数你使用的功能， 你都可以修改和扩展。

事实上， 我们（Brackets开发者）每天都使用Brackets去构建Brackets。（自己去开发自己， 真具有自反性）

 

特性

工程

使用Brackets打开一个文件夹， 就对应一个工程， 此工程内的所有文件都可以使用 Code Hints 和 Live Preview 和 Quick Edit功能

Projects in Brackets

In order to edit your own code using Brackets, you can just open the folder containing your files. Brackets treats the currently open folder as a "project"; features like Code Hints, Live Preview and Quick Edit only use files within the currently open folder.

 

Quick Edit

如果CSS中定义了某个标签对应的 样式， 在编辑器中， 将光标落在tag上， 使用ctrl+E， 则能显示CSS中的对应的样式定义， 可以直接修改， save保存， 点击ESC， 退出QuickEdit模式。

对于js类似。

Quick Edit for CSS and JavaScript

No more switching between documents and losing your context. When editing HTML, use the Cmd/Ctrl + Eshortcut to open a quick inline editor that displays all the related CSS. Make a tweak to your CSS, hit ESC and you\'re back to editing HTML, or just leave the CSS rules open and they\'ll become part of your HTML editor. If you hit ESC outside of a quick inline editor, they\'ll all collapse. Quick Edit will also find rules defined in LESS and SCSS files, including nested rules.

You can use the same shortcut to edit other things as well - like functions in JavaScript, colors, and animation timing functions - and we\'re adding more and more all the time.

For now inline editors cannot be nested, so you can only use Quick Edit while the cursor is in a "full size" editor.

 

Live Preview

在编辑中修改后， ctrl+alt+p， 则调用chrome浏览器显示 当前修改网页。（注意此时候， 是webserver方式显示当前网页， 不是本地文件， 所以可以调试ajax调用场景）

后续如果继续修改， 切换到chrome浏览器， 则不用刷新， 则可以直接查看修改效果。 （使用live connection技术）。

 

Preview HTML and CSS changes live in the browser

You know that "save/reload dance" we\'ve been doing for years? The one where you make changes in your editor, hit save, switch to the browser and then refresh to finally see the result? With Brackets, you don\'t have to do that dance.

Brackets will open a live connection to your local browser and push HTML and CSS updates as you type! You might already be doing something like this today with browser-based tools, but with Brackets there is no need to copy and paste the final code back into the editor. Your code runs in the browser, but lives in your editor!

 

Live HighLight

当浏览器中对 某个HTML标签 或者 CSS 规则编辑时候， 这个时候切换到 chrome浏览器， 则浏览器能够高亮显示，当前生效的元素。 如下效果：

 

Live Highlight HTML elements and CSS rules

Brackets makes it easy to see how your changes in HTML and CSS will affect the page. When your cursor is on a CSS rule, Brackets will highlight all affected elements in the browser. Similarly, when editing an HTML file, Brackets will highlight the corresponding HTML elements in the browser.

Today, Brackets only supports Live Preview for HTML and CSS. However, in the current version, changes to JavaScript files are automatically reloaded when you save. We are currently working on Live Preview support for JavaScript. Live previews are also only possible with Google Chrome, but we hope to bring this functionality to all major browsers in the future.

 

QuickView

对于CSS中的颜色值， HTML中写死的img URL， 对于编码者， 可能搞不清到底对应什么样的内容， 最好能够可视化显示出来。 这个功能可以满足， 当鼠标落在颜色上， 和 img上， 会显示可视内容。

Quick View

For those of us who haven\'t yet memorized the color equivalents for HEX or RGB values, Brackets makes it quick and easy to see exactly what color is being used. In either CSS or HTML, simply hover over any color value or gradient and Brackets will display a preview of that color/gradient automatically. The same goes for images: simply hover over the image link in the Brackets editor and it will display a thumbnail preview of that image.

 

扩展插件

如果你找不到你需要的功能， 请浏览插件吧。

Need something else? Try an extension!

In addition to all the goodness that\'s built into Brackets, our large and growing community of extension developers has built hundreds of extensions that add useful functionality. If there\'s something you need that Brackets doesn\'t offer, more than likely someone has built an extension for it. To browse or search the list of available extensions, choose File > Extension Manager… and click on the "Available" tab. When you find an extension you want, just click the "Install" button next to it.