An overview of the open Adobe Brackets IDE

Since the first review of the environment (this review was published more than a year ago) IDE Brackets has evolved from a merely promising prototype into a fully-fledged tool for developing web applications. Recently, a post was also published in which this medium was casually mentioned, but the text and comments were so stingy about the project description that I found it useful to tell the community about the possibilities of this IDE in more detail.

Some information about what IDE Brackets is. The environment is being developed on a web platform (HTML, CSS and JavaScript) for web programmers using Chromium Embedded Framework (CEF) by Adobe. At the heart of Brackets are projects such as CodeMirror, jQuery, require.js, Bootstrap, Node.js. Source codes are distributed under open source license MIT. The main goal of the project is to simplify the web development process. Work on the IDE is on the scrum methodology (2.5 week sprints). The environment is quite stable - IDE Brackets developers themselves began to use it in their daily work for quite some time. You can download the environment from here .

Highlights: The environment has become available for Linux, Node.js support has been added, intelligent code code completion for HTML, CSS, JavaScript has been implemented, the community has created more than a hundred useful plug-ins, plus an advanced system is being developed to simplify the creation of responsive design layouts. produce a wow effect on those who saw it.
')
(under the cut screenshots ~ 1.5Mb)

Intelligent code completion

Thanks to the new API, auto-completion works everywhere: HTML, CSS, JavaScript (including jQuery).

HTML:

CSS:

Auto-completion of CSS properties



Autocompletion of url parameters

JavaScript (jQuery):

Inline code editing

One of the main ideas of the IDE - reducing the number of movements between files within a single project - is realized with the help of so-called Inline-editing, which allows you to work with context-sensitive parts of other files without leaving your current location in the project. Called by hot key (Ctrl + E for PC / Cmd + E for Mac OS). The developers also add new features that use this idea, for example, “Inline Color Editor”, “Inline Bezier Tool”.

Inline-editing CSS code

Inline editing can be invoked for several items at the same time. If several styles are applied to an element, you can move between them by selecting the corresponding element from the list on the right, or using the Alt + ↑, Alt + ↓ hotkeys.

Quick access to JavaScript function declaration:

At the moment, it works with noticeable delays, sometimes it cannot find a function / method declaration.

Inline Color Editor:

Inline Bezier Tool:

A tool for visualizing Bezier curves used as a temporary function in CSS transitions. Is under active development .

Quick access to documentation (Quick Docs)

In fact, this is not a new feature, but very useful and overlaps with the previous one. Displays help on CSS elements while working with the code (Ctrl + K for PC / Cmd + K for Mac OS). The help system is based on materials from webplatform.org .

Quick access to project files (Quick Open)

When you press Ctrl / Cmd-Shift-O, a nice quick jump to the project files pops up. Enter the beginning of the name of the required file - we get the result:

Plug-in management

Since then, the IDE has a human interface for managing plugins, which developers are very proud of, and, indeed, it is very convenient to use them:



It is worth saying that at the moment there are already more than 120 additions available , among which you can find Emmet , Git integration tools, a mini code card a la Sublime Text code and many others. It is also worth noting that the number of available plugins is growing steadily. View IDE with additional plugins:

Live preview (Live Preview) based on Node.js

By default, live preview works thanks to the local Node.js server. In previous versions, this function worked through file: //, which could cause problems with the integration of external services, such as Typekit.

The peculiarity of “live preview” is that when editing CSS files the results are displayed immediately after making changes, while editing HTML and JavaScript - only after saving (“live preview” for HTML files will be available from the next version , for JavaScript already exists plugin that implements Live Preview). Also, when editing HTML in Brackets in the browser, the corresponding editable element is highlighted:

Localization

The development environment is available in 17 languages, including Russian, Japanese, German, Spanish, Norwegian, Czech, Polish. Support for the Russian language is not at the highest level, however, you can work. The biggest misunderstanding is due to the lack of Cyrillic in the Adobe Source font family, so the current system font is used, which slightly breaks the overall perception of the program. Of course, this is all treated by changing the font SourceCodePro, to the one where there is support for the Cyrillic alphabet, but for this you need a little work with your hands.

Responsive Design Tool

In May of this year, Lee Brimelow, told in his blog about a promising plugin (not yet available to users) to simplify work on responsive design. The principle of this plugin is to create a visual base for working with media queries CSS3. In general, as they say, it is better to see once than hear a hundred times:



As mentioned above, the plugin is still somewhere in the bins of the author. On the proposal to place the project on Github, he replied that the Responsive Design Tool will not be distributed as a plugin, but will be embedded directly in Brackets, so you have to wait for the official release.

Linux support

At the moment, the Linux-version of Brackets is not even in the alpha-version stage, as the developers themselves say, this is a kind of “super early preview”, because not all the basic functionality has yet been implemented / works as it should. However, the current Linux version can be used to work (with some limitations).

Results

Yes, by the possibilities and the number of plug-ins, IDE Brackets is currently still inferior to other mature environments and editors, but nevertheless it can already become a full-fledged tool for the web developer, providing some unique features. The drawbacks, of course, are, for example, there is no clear mechanism for configuring the IDE, not the fastest download speed of the application and the operation of certain functions (especially inline JavaScript editing). In any case, the very fact that absolutely any developer who is familiar with web-programming can get involved in the development of Brackets and implement his amazing ideas makes this environment special.

Links

Official website , download page , Brackets plugins
Project on Github
Tuts + training video
Project backlog

PS If you find an error or inaccuracy in the text, please let me know via private messages.