O documento descreve o editor de código-fonte Brackets, incluindo suas principais características como edição rápida de HTML, CSS e JavaScript, visualização ao vivo das alterações, suporte a extensões e compatibilidade multiplataforma. O documento também discute a extensão Emmet para acelerar a criação de códigos HTML e CSS através de atalhos de digitação.

2. Instalação

3. Editor
Menu
Arquivo
Live Preview
Gerenciador de Extensões

4. Sobre o Brackets
 Um novo editor open-source para a
próxima geração da web.
 HTML5, Css3, JavaScript;
 Edições rápidas para as linguagens;
 Comandos e atalhos para ajudar no
código CSS e HTML;

5.  É rápido – muito rápido. Excelente para
desenvolvimento front-end, desde
pequenas coisas até grandes projetos;
 Tem o recurso de Live Preview – por
utilizar o próprio navegador para exibir o
resultado do desenvolvimento on-the-fly,
temos uma visualização real do que está
acontecendo;

6.  É fácil – a interface é simples e intuitiva. Tem opção
para vários idiomas, incluindo o português brasileiro;
 É extensível – o editor pode receber novos recursos
através da adição de extensões. Além disso, o
repositório de extensões é grande o suficiente para
cobrir soluções para diversas situações pelas quais
outros desenvolvedores já passaram;
 Integração com Theseus – o desenvolvimento, a
análise de código e a depuração de Javascript ficam
fáceis com o a integração com Theseus. De fato, não
é surpresa um editor que utiliza Node.js como infra
ter uma boa integração para depuração JavaScript;

7.  É multiplataforma – possui pacotes pré-compilados para
Windows, Mac e Linux. Apesar de o pacote para Linux ser
Debian, a característica open source do editor permite que
terceiros empacotem para outras distros, como o Fedora;
 Gerenciador de projetos – o gerenciador de pastas funciona
como um gerenciador de projetos. Um recurso que falta no
Sublime text, mas que foi bem implementado no Brackets.
Não é preciso levantar várias instâncias do editor, basta
selecionar o projeto em que vamos trabalhar. Além disso, o
editor se lembra dos arquivos abertos na última vez que o
projeto foi trabalhado, trazendo essa seleção
automaticamente;
 Construído com tecnologia web – a ferramenta não é apenas
focada em web, é construída com tecnologia web.
Exatamente por isso, ela pode ser modificada utilizando
apenas marcação, CSS e JavaScript;

10. Click em cima de uma tag HTML e aperte Ctrl +
E

11. No CSS e JS segue o mesmo
estilo

12. Contras
 É fundamental uma resolução alta para o
Live Preview – a grande vantagem do Live
Preview é poder colocar o editor lado a lado
com a janela do navegador. No meu caso,
com 1920x1080px, a experiência foi
excelente. Mas, em resoluções menores, a
experiência do Live Preview pode ser
prejudicada.
 Não permite abrir outro código que tenha
codificação diferente da UTF-8;

13. Gerenciador de Extensões
Instalar o Emmet;

14. Emmet
 Emmet (anteriormente conhecido
como codificação Zen) é um conjunto de
ferramentas de desenvolvedor web que
podem melhorar muito o seu fluxo de
trabalho de HTML & CSS.

16.  Após digitar aperte Ctrl+Alt+Enter;

17.  # usado para id;
 . Usado para Class;
 * Quantidade de
repetição da tag;
 + Quantidade de tags;

19. Referências:
 http://imasters.com.br/desenvolvimento/software-
livre/brackets-o-editor-para-web-que-faz-jus-ao-seu-
proposito/
 https://github.com/adobe/brackets/blob/master/samples/p
t-br/Primeiros%20Passos/index.html
 https://github.com/adobe/brackets/wiki/How-to-Use-
Brackets
 http://brackets.io/
 http://www.youtube.com/watch?v=NhVdn7_ub5k
 http://emmet.io/

20. Dúvidas?