Brackets reviews. Brackets. Required plugins. Preview changes in the browser

Background of Brackets

Let's start with the name and logo. Brackets is translated as [quotes]. These are the ones we see in the logo. I recently changed my logo too. It is more visual, and most importantly, it immediately reflects the essence of our site as a resource about website creation. The same is true here - it perfectly reflects the essence of the code editor, it seems to me.

Adobe Brackets, yes, you heard right - this program is presented by a very well-known company in our circles, Adobe. It was with their easy input that we began to develop this software. However, it was first known as Edge Code. So if you are asked, know that it is the same thing.

Why did I like Brackets?

The first association which I had when opening the software - damn, it’s Russian Sublime! The program supports many languages, and you can easily download Brackets in Russian directly from the offsite. And it's incredibly reminiscent of SublimeText.

Second, ease of use. Of course, at that time glitches killed everything. But the program was still at the testing and development stage. And I simply did not take into account the jambs. Because the design there is more beautiful and thoughtful, especially for beginners. There are buttons, menus and other usability goodies. It seems that minimalism has remained, and at the same time it’s convenient as hell.

Third, original ideas, which I have not seen in SublimeText, or other editors. Interactive viewing and highlighting of elements during layout, quick editing, color hints, built-in help system, and much more. I was especially interested in a couple of plugins. I will talk about this at the end of the article, in the section - "Brackets Editor's Goodies".

Fourthly, it is completely free and there is a Russian version and can be freely downloaded from the official website brackets.io. It seems to me that Adobe deliberately stirred up all this in order to push SublimeText out of the market. He has become very popular.

Fifthly, everything else is also in bulk

- This is multiplatform. You can easily “pioneer” Brackets for both Windows, Linux and other operating systems. This is partly due to the fact that the editor is developed in HTML, CSS and JS. And they work everywhere.

— And many different plugins and extensions. Which allow you to completely customize Brackets to suit your needs.

— And a bunch of design themes of all sorts of colors and tones. For every taste, so to speak.

Brackets – settings and features

Installing the editor
Fixing Russian font problem
Editor interface
Basic setup of Brackets
Split - split screen
Side panel
Live Preview - interactive viewing
Inline Editors for HTML - quick editing
Inline Editors for CSS - fast editing
Quick CSS Documentation

Brackets – plugins and extensions

Themes
Brackets Icons - icons in the editor
Overscroll – rewind below the code
Special Charecters - table of special characters
Brackets CSS Color Preview - quick preview of colors
ColorHints - quick color selection
Brackets Color Palette - choose a color from a picture
Indent Guides - orientation in code nesting
CodeFolding - code folding
Documets Toolbar - horizontal panel of open files
Emmet - quick typing of HTML and CSS
CssFier - quick insertion of selectors in CSS
Minifier - compression of CSS and JS files
JS Beautifier - formatting the code
Autoprefixer - automatic prefixes
Extract for Brackets (Preview) - Part 1
Extract for Brackets (Preview) - Part 2
eqFTP - client directly in the editor
QuickFormTool - quick insertion of forms
SVG Font - view SVG files
Brackets Snippets (by zaggino) – snippets
Response for Brackets - responsive design

And now, as promised...

Brackets editor perks

First, let's go over the advantages of the program itself, and then touch on the “special” extensions and plugins that I just love.

Live Preview

The first thing worth noting is the Live View feature, or as many people call it, live viewing. Thanks to it, you can monitor site changes right during page layout. Please note that the Google Chrome browser is required to operate. This is where your site opens and all changes are shown.

I know, I know, now you say - SublimeText has the same thing! However, please take into account the fact that for this you need to perform rather complicated “dances with a tambourine” every time before everything starts working. And here we have everything out of the box. As one song says: Press the button and you will get the result.

Currently, interactive browsing works in HTML and CSS files. But when editing javascript, you will have to save it.

Quick editing (inline editors)

A very convenient thing. The point is that you can edit CSS and JS directly from the HTML document. Without switching between files. Believe me, it saves a huge amount of time. And I’m generally silent about the convenience and comfort of work. Everything can be done from one file.

You simply select the desired tag, press CMDCTRL+E and you have an open A special window appears. In which you can add styles for this selector. In this case, you can edit both existing styles and create new ones. There you can also switch between CSS files if you have several of them.

Allows you to view the colors that are used in the code. If in other applications you need to open some program or run a plugin to find out what color is used. Here, just hover your mouse over the color code you want, and Brackets will immediately show it to you.

And in the video course itself, we will also install a couple of interesting browsers that will significantly expand and facilitate working with color. In general, you will see everything for yourself.

I've always liked this feature in Dreamweaver. I don’t know how it is now, but once upon a time she was present in it.

If you want to include some file, styles, scripts, pictures - it doesn’t matter. Brackets will automatically tell you not only the path, but also the file name. Very comfortably!

Brackets plugins and extensions (the most):

Brackets Emmet (22)

This plugin allows you to quickly type HTML and CSS. In fact, if you learn to use it correctly, your code writing will speed up by about 10 times. This is an extension from the category "Must Have", which should be in every editor.

Extract for Brackets (Preview)

This is the extension I liked the most in the editor. Allows layout directly from PSD layout. That is, you no longer need to go into Photoshop.

We connect to the plugin, upload our PSD to the Adobe Creative Cloud server, and our editor begins to extract all the styles and graphics from the PSD layout.

This cannot be described in words, you can only see and understand the full scale of the idea. Really cool!

Response for Brackets

Allows you to sculpt the site's adaptability from the Brackets editor window. In other words, responsive design is in your pocket.

Everything is done stylishly and comfortably. When enabled, it creates a separate styles file where all changes are written. When finished, you just need to connect it to the site files.

But there is one moment, where would we be without him, my dear. The extension is still being developed, and it is, let’s say, not entirely stable. However, it is being finalized, updated, and soon everything will be TIP-TOP.

Brackets editor mistakes.

I’ll just write my opinion while working. Since I’ve already dug into it, I can definitely say something.

Firstly— never install several plugins at once. This is especially true for those that will not be described in the video course. It's just that some of them work crookedly with the new version of the editor. And it may start to fail.

There are few of them, but still. Always follow this pattern: We installed the plugin, tried it on the editor, and if everything works, install the next one.

Because sometimes a person will install a bunch of plugins and then guess what, it breaks the work of Brackets.

Secondly— as soon as you install the program, it will have a problem with the Russian font. He will look “a little scary.” It's all about the default font, which is installed after installation. Just change the text font and everything will be fine.

Third, For some students the editor for some reason did not work when they installed it on the system disk. I don’t know what the problem is, maybe I didn’t have enough administrator rights or drivers. That's why I'm always here I give 3 pieces of advice:

Install Brackets not on the system drive
Install Nodejs
Try running as administrator

Today we will look at one of the programs that we will use to work with page layout - Brackets. You can download and install the program from the official website at brackets.io. There is nothing complicated in the installation itself, but setting it up for convenient operation will take you 5 minutes.

Installing plugins in Brackets

Installing plugins is as easy as two times two. Launch Brackets, look for the panel on the left side and select the “Extension Manager” button.

On the first launch, the program initializes extensions, updating their database. The Brackets extension manager has three tabs: Available, Themes, Installed. Accordingly, we are interested in the tab Available.

In the search field, enter the name of the plugin, select the plugin and click “Install”. After installing all plugins, it is advisable to restart the program.

Below is a list of plugins that we will need:

Emmet– a plugin that allows you to significantly speed up writing html and css code using abbreviations and abbreviations. So, if you want the exclamation mark (!) to turn into a full-fledged HTML page after pressing the tab key, then you need this plugin. Also allows you to wrap text with HTML tags.
Tabs - Custom Working is a plugin that adds beautiful tabs to Brackets. Marks unsaved files with green circles. The main purpose of the plugin is to make the work more visual.
Overscroll– a plugin that allows you to scroll code to the end of the page and even scroll an empty area.
Code Font– in modern versions of Brackets allows you to change the code font. In older versions it is simply necessary, since the program displayed the Russian font very ugly.
Brackets Additional Right Click Menu– adds many convenient “goodies” to the context menu - for example, the “Copy” and “Paste” items.
Autosave Files on Window Blur– a plugin for automatically saving open files at the moment when the program window loses focus (for example, if you switch to a browser).

I remind you that after installing the plugins, restart Brackets.

Also watch our video on installing plugins in Brackets.

Brackets– a project developed by Adobe. Initially it was intended as a code editor for simplified creation of web applications. Over the past year, several updates have been released that not only improved the editor's performance, but also added several features that will be useful to developers.

Currently the current version is Brackets 1.2.

Let's start with the program interface:

Interface

The program interface consists of:

Menu – file, edit, search, etc.
Area for selecting project files for editing
Code writing area

You can also select a button to turn on the mode Live Preview, but more on that a little later.

Initially, without plugins or themes, the program interface is quite simple and standard. Nothing superfluous for a novice developer: code syntax highlighting in the editing area, a directory of project directories.

Using the CTRL++ / CTRL+- combination you can increase/decrease the font size.

With the exit version 0.42 support for changing and installing themes has appeared. According to the standard there were only Light And Dark. I have to admit that the dark theme is nicer to look at for me.

Changing themes is done in the tab View – Themes. In the same tab you can change font and him size.

Themes in Brackets

Split View

Version 0.44 fixed a large number of bugs, improved performance, and also added a feature such as Split View. This feature will allow divide the editing area into two parts, and work with two files at the same time. I must admit, this simplified the development significantly.

Horizontal division is possible.

Horizontal division of the Brackets editor area

You can also divide it vertically.

Vertical division of the Brackets editor area

Color palette

Brackets also has a useful function such as calling the color palette using the combination CTRL + E. It works like this:

Put the courses in the color code and press the combination CTRL+E. A color palette will open where you can specify what color and with what transparency you need.

Brackets color palette

Extract for brackets (Preview)

Three years after the very first version of Brackets was released version 1.0. In addition to improving performance, a plugin such as Extract for brackets (Preview).

It allows you to open templates in the format PSD directly into Brackets, and view them as in Photoshop by layers. With its help, you can see the dimensions of a particular page element, for example blocks, in pixels or percentage, as well as its location, and then immediately enter these values in the editor.

Extract for brackets(Review)

Initially, the idea is great, and quite useful. But the problem was that in version 1.0 The plugin did not work correctly, slowed down and overloaded the system.

Another disadvantage is the need to have an account in the Adobe Creative Cloud, because PSD templates are loaded there.

To be honest, even after new versions are released, I don’t use this function because it’s buggy.

Extension Manager

Plugin installation occurs in the window Extension Manager, you can also install there design themes.

Plugins Brackets allow you to expand standard functionality and facilitate project development. One of these plugins, well known to everyone Emmet.

Emmet– a plugin that allows you to write large code using abbreviations, saving time.

For example:

By writing this code in an html document:

XHTML

ul>li*4>a

ul>li* 4>a[ href= # ]

After pressing hot keys (standardly set to the key TAB) the written code will “expand” into

XHTML

Live Preview

And finally, I’ll tell you about such a wonderful function as Live Preview. With this feature you can see the result in real time. The principle is simple: you choose html document, include Live Preview. A browser window will open in which your project will be displayed in the current spelling. It is worth adding that this function only works with the browser Chrome . It seems that they were talking about support for other browsers, but only in future versions of the program.

But this function, in my opinion, is key. Especially for developers working with two screens.

Conclusion

This is where I want to end this review. I can also add that Brackets perfect for beginners web developers. As a beginner website designer, I recommend using it. This editor is not demanding on resources, has a simple interface, and with the help of hotkeys and plugins, it allows you to speed up and simplify code writing.

Editor's official website Brackets.

Text editor Brackets 1.6 is great for website design. This is a great tool from the developers of Adobe. With the livecoding feature, you don't have to reload the page during layout.

Description of the Brackets editor

In general, the appearance of the editor can be customized to your liking. It contains a set of standard design themes. Each theme changes the appearance of the code editing window. Here both the background and syntax highlighting change. There are both dark and light themes. By default, all open files and folders are grouped in the left panel, but they can also be placed in the form of tabs above the open editable file. That is, in Brackets everything is done in such a way that you can make everything most convenient for yourself.

Brackets Features

This text editor is developed using web technologies and has all their advantages. For example, it is cross-platform. This means you can run Brackets on any platform, be it Windows, Linux or Mac.

Brackets has a built-in Color Picker for defining colors during layout. Code completion works beautifully and quickly, and there is also a system for autocompletion of paths to files and images. This will save you a lot of time and eliminate the need to search for the necessary files in folders. Plus, there is a snippet for inserting fish text (lorem ipsum).

Also, in addition to the built-in functions of Brackets, you can expand its functionality using plugins. In the small vertical column on the right there is an icon that looks like a lego element. When you click on it, a modal window will open with a list of all available plugins. Their installation takes just a few seconds and is done by pressing just one button.

Perhaps the most important and distinctive feature of Brackets is the livecoding feature, which displays all code changes immediately on the web page. This function is implemented perfectly here. This is not a banal reboot after making changes, this is livecoding. To launch it, you need to click on the lightning bolt icon in the right panel of the editor. This action will open the file in the browser for live viewing. Also, here you can enable the highlighting function on the page of the place where you are in the code. This is very convenient and if you work with it frequently, it saves you a lot of precious time.

Despite all this rich functionality, Brackets can be downloaded for free. It's great for everyday work and will be a good replacement for your current editor.

Specifications:

Version: Brackets 1.6
Status: Free
Russian language
Author: Adobe
System: Windows
Size: 36.7Mb

Webmasters and programmers quite often use text editors to create websites. But the functionality of ordinary programs of this group, for example, Notepad, is too narrow for people working in this direction. Special applications are created for them, designed to work with markup languages. One of these is the free text editor Brackets from Adobe.

The main feature that makes Brackets popular with layout designers is its support for a large number of markup and web programming languages, namely: HTML, Java, JavaScript, CSS, C++, C, C#, JSON, Perl, SQL, PHP, Python and many others (43 items in total).

In the program code editor window, the structural elements of the above languages are highlighted in a separate color, which helps the layout designer quickly navigate the code and also easily find the beginning and end of an expression. Line numbering, the ability to collapse blocks, and automatic layout structuring also serve as additional user convenience factors when working with Brackets.

Work with text

At the same time, in order to use Brackets, you do not have to be a programmer or web page designer, since the program also supports simple work with text, like a regular text editor.

Brackets can work with a very large list of text encodings: UTF-8 (default), Windows 1250 - 1258, KOI8-R, KOI8-Ru and others (43 names in total).

Preview changes in the browser

Brackets support function "Live Preview", which means that all changes made in a text editor can be immediately viewed in the Google Chrome browser. Therefore, to be able to use this function, you must have this web browser on your computer. The designer can immediately see how his actions affect the web page interface visible to the user, since all changes are displayed in Google Chrome synchronously when saving the file.

File management

In the Brackets editor, you can work with several files at the same time, switching between them using the menu. In addition, it is possible to sort open documents by name, date added and type, as well as auto-sort.

Context menu integration

Thanks to integration into the context menu "Windows Explorer", you can open any file using Brackets without first launching the program itself.

Debug mode

With Brackets you can view and edit web pages in debug mode.

Search and replace

The program provides a convenient search and replace function by text or markup code.

Working with extensions

It is possible to increase the functionality of Brackets by installing built-in extensions. They can be controlled using a special "Extension Manager" in a separate window. Using these elements, you can add support for new markup and programming languages to the program, change interface themes, work with a remote FTP server, manage application versions, and also build in other functionality not provided in the original version of the text editor.

Advantages

Cross-platform;
Multilingual (31 languages, including Russian);
A large number of supported programming languages and text encodings;
Ability to add new functionality using extensions.

Flaws

Function " Live Preview" available only through the Google Chrome browser;
Some sections of the program are not Russified.

Brackets is a powerful text editor for working with program code and markup languages, which has very broad functionality. But even to such a wide range of program features, you can add new ones using built-in extensions.