Brackets

Brackets é uma software para criação e edição de arquivos (IDE) HTML, CSS e JS. Através de configuração é possível trabalhar com PHP. Com ele é possível criar um site e testar o que está sendo feito através do recurso de atualização em tempo real, diretamente no Chrome. Além dos recursos nativos, o Brackets ainda possui um instalador de extensões que ajuda a aumentar e personalizar os recursos.

O programa da Adobe é open source e pode ser baixado e utilizado livremente. Baixar o Brackets. Além de GNU/Linux, suporta também Windows e Mac e suas extensões são distribuídas de forma gratuita. Também é possível instalar temas para deixá-lo com uma aparência personalizada.

O Brackets é um leve e poderoso editor de textos moderno. Foram combinadas ferramentas visuais no editor para que o usuário tenha acesso e ajuda adequada sempre que precisar. Com novos recursos e extensões disponibilizados a cada 3-4 semanas, ele facilita bastante o desenvolvimento Front-end.

Ao digitar-se o arquivo CSS, ele apresenta opções de autocomplete referente a camada clicada. Ao iniciar a digitação de “background”, por exemplo, aparece uma sugestão de salvar como imagem a layer selecionada (ele cria a pasta images e salva dentro delas) já inserindo o restante do código automaticamente; que seria “url(caminho/para-imagem.jpg);”.

Quando uma camada de texto é selecionada, aparece a opção de colocar automaticamente o font-size, a font-family, o line-height e outras. As configurações que foram setadas no Photoshop, podem ser inseridas automaticamente, -não é necessário- alternar entre as janelas do editor e do Photoshop. Fonte, tamanho, cor, são disponibilizadas automaticamente na forma de autocomplete.

Live Preview: Esse recurso permite que o resultado da digitação seja visto, sem reload, (recarregar) a página. O Brackets vai mostrando o resultado em tempo real, funcionando quando a alteração for feita em um arquivo HTML ou CSS, sendo que no JavaScript ele precisa recarregar a página.

Editores expandidos Para trabalhar no CSS aplicado a um ID específico, o Brackets permite a expansão de um trecho de código. Com o cursor do mouse em cima deste ID, pressione Ctrl+E e o Brackets irá mostrar todos os seletores CSS com este ID em um editor em série dentro da janela atual. O código pode ser editado paralelamente ao trabalho.

Split mode: Divide o editor em duas telas, podendo ser na horizontal ou vertical. (Está em View)

	Chave Básica
Ctrl + Aumenta o tamanho da fonte
	
Ctrl--  Diminui o tamanho da fonte

Ctrl-0  Restaura o Tamanho da Fonte

Ctrl- = Aumentar tamanho da fonte 
       
Ctrl+Z: Faz voltar ao comando anterior.

Ctrl+X: Copia o texto recortando.

Ctrl+S: Salva o trecho de código e também abre a janela de diálogo ao ser aberto um novo documento.

Ctrl+D: Duplica uma linha.

Ctrl+Shift+D: Deleta uma linha. 

Ctrl+C: Para copiar um linha ou pedaço de texto.

Ctrl+V: Para colar o que foi copiado com  Ctrl+C.   

Shift+<: Abre uma cortina de input e depois de inserida a tag, fazer Shift+> e a tag de fechamento correspondente será inserida automaticamente.

Ctrl+E: Para editar o CSS sem ter que abrir o arquivo .css. É só ir em um arquivo .html ou .php, clicar sobre o elemento que as propriedades serão alteradas e pressionar Ctrl+E para abrir a tela de edição!

Ctrl+Shift+A: Abre um input para digitar-se uma tag e teclar enter e será inserida a tag completa com seu fechamento e seus atributos no html. Ex.: Digite link e tecle enter, ele vai retornar <link rel=”stylesheet” href=””>. E ao apertar a tecla enter o “ponteiro” do mouse ficará dentro das aspas do atributo href, é só começar a digitar o endereço e ele mostrará as opções em forma de codehint. (dica de código)

Se tiver uma div com um id ou uma class ao clicar-se na “div” e usar o atalho, ele buscará nas folhas de estilo associadas ao documento (.html ou .php) por um seletor que altere “div”, mas se clicar sobre o id ou sobre a class e apertar Ctrl+E ele irá buscar por um seletor que atinja aquele id ou aquela class clicada. Se forem duas ou mais classes pode-se clicar em cima da class que se queira editar e usar o atalho ele fará a buscar por seletores referentes a classe que foi clicada.