Brackets for doubters and newbies

CD: LF

Without plug-ins, Brackets are no better than other editors, but with them you should at least try it.

Introduction

Not so long ago, many articles were published on Habré, relating in one way or another to the editor of Brackets . Many people immediately appeared quite fair questions:

1. How is it better than% EDITOR_NAME%?
2. Are there many plug-ins for it?
3. Is it worth contacting or is it better to use some well-known IDE or text editor?

I hope after reading this article everyone can find answers to these questions.

Out-of-the-box functionality

Although Brackets is positioned as a text editor, in fact it more and more resembles a full-fledged IDE. However, it should be said that we get with the basic installation of this editor:

• Live Preview plugin - works only with Google Chrome. Make any changes to the code in the editor - changes are automatically displayed in the browser window
• syntax highlighting
• tips on editing CSS, JS and HTML files
• clumsy display of Cyrillic text. They promise to fix it in one of the following releases. Now there are several workarounds, see below.

It is a huge number of plugins that allows you to turn this text editor into a powerful combine for WEB development. Further enumeration with the description of possibilities will go. I will not describe all the additions in the catalog; I’ll dwell only on the most useful and interesting, in my opinion.


')

General purpose

Extensions Rating

Beginners, I advise you to put this supplement 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 at least a rough estimate of the usefulness of this extension.

Brackets git

It's all very clear from the name. A very useful extension for working with the well-known version control system.

Code Folding

Without this plug-in, there is no such necessary functionality in Brackets, like folding blocks of code. After installation, triangles will appear on the left, next to the line numbers, which allow you to collapse those fragments that are not needed now.

Emmet

No need for submission, but for beginners it will be interesting to learn about him. This plugin allows you to significantly speed up text input when editing LESS, CSS and HTML.
For example, we introduce the following structure:

button.btn.btn-primary{} 

After pressing the Tab key, it will be expanded to:

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

Go ahead:

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

by clicking will unfold in

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

I will not do further spoilers, better read the reviews already available on Habré:
Goodbye Zen Coding. Hi, Emmet!
Emmet v1.0 released
I also recommend the official instructions (in English).

Codeoverview

It includes a small panel on the right side of the editor window, where all the code from “bird's-eye view” is displayed. You can quickly go to any interesting site.
In addition to the CodeOverview plugin, there is also BluePrint in the Beta stage. Which is better - decide for yourself.

Documents Toolbar

For those who are accustomed to the tab-based interface and do not want to wean 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. Notice how Cyrillic characters began to appear. In addition, there are several plug-ins with the same functionality. It is possible to open the View / Themes item in the menu, where you manually set which fonts to use.

Http Server for Brackets

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

1. This is not LivePreview, i.e. page must be updated manually.
2. You can access this server from any browser installed in the system. Developers under IE and Firefox rejoice.

Also in the extensions catalog there is a Static Preview plugin, similar to LivePreview, but allowing you to do a “live” edit in other browsers, but at the moment (November 8, 2014) it “hangs” Brackets. To be more precise, it does not give the editor the opportunity to complete his work normally - save the settings and the list of open files. Perhaps this error will be fixed soon, but the existing problems have personally pushed me away from this plugin.

Grunt for brackets

Brackets can offer a plugin for Grunt . Its setting is a separate topic, some even wrote entire books about it. From myself, I note only that now, in 2014, not to use Grunt or Gulp is a sign of bad taste and frivolity of the developer.

Beautify, Beautifer

A simple keystroke Ctrl + L or Ctrl + B poorly designed JS or HTML code turns into decorated quite acceptable. On the pictures global_main.js Habra before and after applying this plugin. Do not use these plugins for LESS! They insert spaces after the colon, which makes the LESS file non-compiled.

Quicksearch

Double-clicking on an expression highlights all its entries in the document. The author of the extension is inspired by Notepad ++, which does not hide.

SFtpUpload FTP Sync

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

The coder

LESS Autocompile

For those who do not want a headache from editing CSS long ago invented LESS. This plugin allows you to automatically compile your .less files when saving. In the current state requires a little adjustment.

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

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

  
  if you want to override the output directory .css. Otherwise, the .css file will be created in the same place as .less, 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 LESS files should be processed. To do this, add to .brackets.json or compile.json (both are in the root directory of the project, the first automatically creates Brackets) the following:
  

    { "less": [ "static/login/less/login.less", "static/desktop/less/index.less" //   LESS- ] } 

Brackets autoprefixer

I think this plugin needs no introduction. It inserts the necessary additions to the existing CSS file to support vendor prefixes and older browsers. Depending on the settings, you can get a variety of results. It has a fairly simple parameters window. The full list can be viewed on the project page on GitHub .

CSSLint, LESSLint, LESS StyleSheets Formatter

Three plugins to help improve your LESS and CSS code. Will point to typical and not so errors. An example in the picture.

HTMLHint, More CSS Code Hints, More HTML5 Code Hints

Plugins just give more tips on editing HTML and CSS. Considering the speed with which the basic delivery of Brackets is added to various improvements and additions, we should wait for the integration of the functionality of these plug-ins into the kernel.

ColorHints, Brackets Color Picker

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

Javascript developer

JSHint, JSLint, JSHint Configurator, JSLint Configurator

Extremely useful plugins for developers who not only impose, but also write code in JavaScript. The choice of JSHint and JSLint, although you can use both (the second will be much more biased towards your code). Configurators, as the name implies, allow you to configure different parameters for checking the code, for example, to ignore the use of the requirejs function before its declaration.

Funcdocr

The plugin allows you to quickly document the functions of JS.
For example, there is the following code:

 Desktop.prototype.addResizeHandler = function(handler) { if ($.isFunction(handler)) { this.resizeActions.push(handler); } }; 

Become before the function declaration and enter / **. After pressing the Enter key, FuncDocr will expand this comment, substituting blanks, where you just need to enter the necessary one:

 /** * [[Description]] * @param {[[Type]]} handler [[Description]] */ Desktop.prototype.addResizeHandler = function(handler) { if ($.isFunction(handler)) { this.resizeActions.push(handler); } }; 

AngularJS Code Hints, AngularJS for Brackets

Add hints when entering Angular directives. I am not familiar with this framework, but I hope these two plugins will meet the expectations of specialists.

Rename JavaScript Identifier

We become the identifier, press Ctrl + R, enter a new name - all occurrences of the variable in the script are automatically renamed.

A spoon of tar

With all the variety of settings and parameters, there are some complaints about Brackets. The first and most important is the speed of work. In the presence of a large number of plug-ins and a variety of CSS connected to a document, it starts to noticeably slow down the appearance of hints when editing documents. Sometimes it takes a long time for the editor to react when editing JS scripts. The second is a rather inconvenient navigation tree. Third, some plugins are able to “hang” the editor, preventing it from closing normally and saving the settings.