Brackets – a selection of the most useful plugins for a website layout designer

Brackets - подборка самых полезных плагинов для верстальщика сайтов

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

The same technologies are at the heart of the editor itself, which ensures its cross-platform, i.e. Compatible with Mac, Windows and Linux operating systems. Brackets is created and developed by Adobe Systems under the MIT License and maintained 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), FTP synchronization (Git-FTP).

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

General purpose plugins.

Extensions Rating

For beginners, I advise you to put this add-on first. It allows you to organize other add-ons in the directory according to various criteria, and also displays various additional information: the number of downloads, stars and forks on GitHub, which allows you to at least roughly estimate 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 more information on add-ons.

Brackets Git

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

Code Folding

Without this plugin, Brackets lacks the functionality you need, like folding code blocks. After installation, on the left, next to the line numbers, triangles will appear, which allow you to collapse those fragments that are not needed now.

Emmet

It needs no introduction, but it will be interesting for beginners 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 expand into this:

<button class=“Btn btn-primary”> Button button>

Go ahead:

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

expands 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>

Codeoverview

Includes a small panel on the right side of the editor window, where all the code is displayed “from a bird’s eye view”. You can quickly jump to any interesting site.

Besides 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 get rid of it (instead, Brackets offers a list of open files above the tree).

Brackets fonts

Allows you to select a font from the list, which will be used to display the text in the editor. Pay attention to how the 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 item in the menu, where you can manually specify which fonts should be used.

Http Server for Brackets

Launches a local HTTP server to debug your project. What is the difference from the built-in Live Preview?

  1. This is not a LivePreview, i.e. the page must be updated manually.
  2. You can access this server from any browser installed on the system. IE and Firefox developers are jubilant.

Beautify, Beautifer

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

This is what the code looks like before using the plugin.

This is how it looks after using the plugin.

QuickSearch

When you double click on an expression, it highlights all its occurrences in the document. The extension’s author is inspired by Notepad ++.

SFtpUpload, FTP-Sync

Allows you to upload project files to the server via (S) FTP. They know how to authorize by key.

Plugins for layout designer

LESS Autocompile

For those who do not want the headache of editing CSS, LESS was invented for a long time. This plugin allows you to automatically compile your .less files on save. In its current state, it requires a little adjustment.

In the header of the .less file, you need to write something like:

// out: ../css/login.css

if you need to override the .css output directory. Otherwise, the .css file will be created in the same place as the .less file, which is not very good. All other LESS settings for the file are written here.

In the project settings, you need to explicitly specify which files LESS should process. To do this, add the following to .brackets.json or compile.json (both are in the root directory of the project, the first is automatically created by Brackets):

{
“Less”: [
       «static/login/less/login.less»,
       «static/desktop/less/index.less»
      //И все остальные LESS-файлы
   ]
}

Brackets autoprefixer

I guess this plugin needs no introduction. It inserts the necessary additions into the existing CSS file to support vendor prefixes and older browsers. A wide variety of results can be obtained depending on the settings. Has a fairly simple options window. The full list can be viewed on the project page at Github

CSSLint, LESSLint, LESS StyleSheets Formatter

Three plugins to help you improve your LESS and CSS code. They will indicate typical and not so common mistakes. An example in the picture.

HTMLHint, More CSS Code Hints, More HTML5 Code Hints

Plugins just give more hints when editing HTML and CSS. Considering the speed with which various improvements and additions are added to the basic Brackets distribution, we should wait for the integration of the functionality of these plugins into the core.

ColorHints, Brackets Color Picker

The first one displays a hint when you hover the cursor over the code or the name of the color in the editor; it can also show gradients. The second one displays a window with a palette for choosing the desired color. When editing LESS files, the color selection window should be called by Ctrl + Alt + K, if it did not appear automatically after entering the word color

That’s all for now, thanks for your attention friends, I hope this article was useful for you.

Leave a Reply

Your email address will not be published. Required fields are marked *