Brackets - a selection of the most useful plugins for website typesetters

Friends, probably all of you are familiar with such a code editor as Brackets, if, nevertheless, there are people who have not heard about it, then, in short, Brackets is a free text editor for website developers. Brackets is focused on working with HTML, CSS, and JavaScript.

The same technologies underlie the editor itself, which ensures its cross-platform functionality i.e. Compatible with Mac, Windows and Linux operating systems. Brackets are created and developed by Adobe Systems under the MIT License and are supported on GitHub.

To date, the community has created many extensions that add most of the necessary tools for working on code, such as the Git version control system, viewing HTML code in a browser in real-time (Live Preview), synchronization with FTP (Git-FTP).

Since Brackets is actively developing and a large number of plugins are written for it in this article, I would like to draw your attention to those plugins that make writing code much more comfortable and simplify the life of a web developer.

General-purpose plugins.

Extensions Rating

Beginners are advised to put this add-on the very first. It allows you to organize other add-ons in the catalog according to various criteria, also displays various additional information: the number of downloads, stars, and forks on GitHub, which allows you to at least roughly evaluate the usefulness of this extension.

Before installing the Extensions Rating add-on, we see the following picture.

After installing the Extensions Rating add-on, we can observe additional information about the add-ons.

Brackets git

Everything here is very clear from the name. A very useful extension for working with the well-known version control system.

Code folding

Without this plugin in Brackets, there is no such necessary functionality as folding code blocks. After setting to the left, next to line numbers, triangles will appear that allows you to collapse those fragments that are not needed now.

Emmet

It does not need an introduction, but for beginners, it will be interesting to learn about it. This plugin allows you to significantly speed up text input when editing LESS, CSS and HTML.

For example, we introduce the following construction:

button.btn.btn-primary {Button}

After pressing the Tab key, it will be expanded into the following:

< button class = "btn btn-primary" > Button </ button >

Move on:

div.btn-toolbar> (button.btn.btn-default {Button}) * 3

by clicking will expand to:

< div class = "btn-toolbar" >    < button class = "btn btn-default" > Button </ button >    < button class = "btn btn-default" > Button </ button >    < button class = "btn btn- default » > Button </ button > </ div >

Code overview

It includes a small panel on the right side of the editor window, where all the code is displayed “bird's-eye view”. You can quickly go to any interesting site.

In addition to the CodeOverview plugin, there is also BluePrint. Which is better - decide for yourself.

Documents toolbar

For those who are used to the tabbed interface and do not want to wean from it (instead, Brackets offers a list of open files above the tree).

Brackets fonts

Allows you to select from the list the font that will display the text in the editor. Pay attention to how Cyrillic characters began to be displayed. In addition, there are several more plugins with the same functionality. It is possible to open the View / Themes menu item, where you can manually specify which fonts to use.

Http Server for Brackets

Starts a local HTTP server to debug your project. What is the difference between the built-in live preview?

1. This is not a LivePreview, i.e. the page needs to be updated manually.
2. You can access this server from any browser installed on the system. Developers for IE and Firefox rejoice.

Beautify, Beautiful

By simply pressing the key combination Ctrl + L or Ctrl + B, poorly designed JS or HTML code turns into a well-designed one. In the pictures global_main.js Habré before and after applying this plugin. Do not use these plugins for LESS! They insert spaces after the colons, which makes the LESS file uncompiled.