Review of Brackets Code Editor

What is Brackets?

Brackets is one of the popular open source text editor you can use for creating and editing codes easily. Adobe found this for web development purposes but you can use for all coding purposes like editing simple HTML file to building a large project. Brackets is currently distributed under MIT license as an open source code editor. You can edit HTML, CSS and JavaScript codes without making mistakes and preview the results instantly on Google Chrome browser. This is completely a free tool developed with HTML, CSS and JavaScript. You will love to find this tool especially if you are editing codes frequently with Notepad or TextEdit.

How to Install Brackets?

Brackets is a cross platform editor available for Windows, Mac and Linux. You can download brackets from brackets.io site and track the developments on Github.

Features of Brackets Code Editor

Brackets is an intelligent text editor that will detect the start and end tags within your HTML. It will help you to understand where the tag opens and where it ends. You can easily minimize the sections and focus on the section you want to work. The below demo shows how easy it is to create code on Brackets editor:

Important features of brackets include the following:

• Automatic styling and syntax highlighting to show code in different colors.
• You can access the most recent files from the left hand working files panel.
• When you enter the opening tag the list of possible options will appear in the drop-down for selection.
• The closing tag is automatically added when you complete the opening tag.
• Click on any tag to see the corresponding opening or closing tag. This will be very useful when you have lengthier code and trying to find the code blocks.
• You can contract or expand the code blocks to focus on editing portion.
• It is easy to use relative links and connect all files in a project folder when using “href” and other attributes.
• Automatic closing quotation helps to avoid mistakes of forgetting closing quotes.
• Click on the tag or CSS selector and press “command + E” in Mac or “Control + E” in Windows to get all the rules used for that id.

• Shows all possible predictions when the CSS code is entered which helps to choose the correct syntax and value.

• All color values will appear in the drop-down for selection as well as shown on mouse hover.

• Live preview option allows you to see the output on a Google Chrome browser instantly. At this moment it only works on desktop version of Google Chrome and not supported on other browsers.
• You can split the window horizontally or vertically and work on multiple files at the same time.

Extensions for Brackets

Besides the core editing features, Brackets code editor has many useful extensions and here are some of the popular extensions:

• Extract for Brackets – this is used to extract CSS from the PSS file.
• W3C Validation – validates the code as per W3C standards.
• Beautify – used for formatting CSS, HTML and JavaScript codes.
• Git – integration of Git and Brackets.

Extensions can be installed using built-in extension manager under “File > Extension Manager” menu.

Adobe Discontinued Brackets

From Sep 2021 onwards, Adobe will stop supporting the Brackets editor. They have now partnered with Microsoft and encourage users to try Visual Studio Code editor. However, we felt Brackets was so lightweight and easy to use after trying Visual Code Editor.