Brackets — O novo editor de texto da Adobe

Este artigo é dedicado ao mais recente editor de texto open source da Adobe, o Brackets. O projeto, desenvolvido pela Adobe em parceria com desenvolvedores externos, tem características e funcionalidades que batem de frente com outros editores de texto gratuitos do mercado, como o Sublime, Notepad++ e o Gedit. Mas o objetivo aqui não é fazer comparações, mas sim apresentar as principais funcionalidades.

Primeiramente é preciso ter em mente que o Brackets é um editor focado em desenvolvedores front end. Por esta razão, ele é focado em HTML, CSS e JavaScript (tecnologias que foram base para seu desenvolvimento). Além disso, como já foi dito, o Brackets é um projeto open source, ou seja, está aberto (está sob licença MIT) para todos desenvolvedores interessados em contribuir ou adapta-lo (existem várias issues abertas na página do GitHub). Ele também possui versões para Windows, Linux e Mac e é bem leve.

Além disso, o Brackets possui suporte a pré-processadores, como LESS e SCESS e à edição inline, ou seja, é possível, por exemplo, editar um CSS dentro do próprio HTML, sem a necessidade de abrir uma nova janela (que convenhamos, é uma coisa bem chata). Mas o principal aspecto é que o Brackets é extensível. Falaremos mais sobre isso.

Principais Funcionalidades

Extract: Através do plugin Extract é possível tratar arquivos com extensão PSD (Photoshop Document). De forma resumida, é possível extrair todas as informações que você precisa sobre a composição e traduzi-la em código: espaçamentos, bordas, margens, etc. Ele dispensa o uso do Photoshop para extrair as informações de forma manual e faz de forma automática e sofisticada, como é possível ver no vídeo a seguir:

Split Mode: Este modo permite dividir o seu monitor em múltiplas telas, seja na vertical ou na horizontal. É ideal para quem trabalha com front end, como por exemplo: Editar HTML e JavaScript ao mesmo tempo. Esta funcionalidade fica ainda melhor combinada com característica abaixo.

Line Preview: Esta funcionalidade é uma das que achei mais interessante. Ela permite que você visualize os resultados das suas alterações no código HTML de forma automática, sem que seja necessário dar reload na página, de forma semelhante ao quando utilizamos no modo inspect dos navegadores atuais. No entanto existem algumas limitações:

  • Só funciona para alterações em CSS e HTML. Para alterações no JavaScript é necessário dar reload na página.
  • Funcionalidade somente compatível com o navegador Google Chrome.

Para quem utiliza 2 monitores simultaneamente, é simplesmente fantástico.

Extensões

Como já citei, o Brackets é extensível. Já existem diversas extensões excelentes (Além do próprio Extract), como:

  • Brackets Git: Dá suporte completo ao Git dentro do editor.
  • JSHint: Permite esconder trechos já editados do arquivo ou formatam os documentos JavaScript, HTML e CSS.
  • Emmet: Disponibiliza abreviações para agilizar o desenvolvimento de HTML e CSS.
  • Indent Guide: Facilita a leitura do código. Ele cria uma linha guia ligando a tag de abertura e a tag de fechamento de determinado elemento.

Segue uma lista das 11 extensões mais baixadas da última semana (de acordo com o site): Emmet (9900), Code Folding (4004), Beautify (3003), Extract for Brackets (2480), LESS Autocompile (2177), Breckets Git (2135), QuickDocsPHP (2011), Brackets Outline List (1909), JSHint (1828), CSSLint (1764) e HTML Wrapper (1589).

Minhas impressões foram muito boas. Estou utilizando a mais de uma semana e não pretendo parar. A única coisa que me incomodou foram os atalhos do teclado, que são um pouco diferente do que estou acostumado (uso bastante o Gedit). Mas fora isso, estou aproveitando bastante para experimentar temas e extensões diferentes.

Show your support

Clapping shows how much you appreciated Diego Martins de Pinho’s story.