A maior parte dos desenvolvedores Front-End como eu adora um Editor de códigos pouco conhecido entre os desenvolvedores convencionais (que adoram o Eclipse), chamado Sublime Text (http://www.sublimetext.com/). Realmente ele é fantástico. Possui ferramentas muito boas a práticas, um Design fenomenal, toda uma gama de plugins, e personalizações possíveis além de aceitar todos os tipos de códigos e linguagens. É um IDE de primeira pode se dizer.
No entanto, no meu dia a dia um outro Software muito bom tem cada vez ganhando mais espaço na minha produtividade e a cada dia está chegando mais perto do Sublime Text. Em sua versão 39 (no momento deste post) o Brackets Sprint possui funcionalidades default em sua versão que são extremamente úteis e algumas delas nem sequer existem no Sublime text com plugins. Com isso a cada dia mais o Brackets Sprint está acolhendo mais e mais seguidores, usuários satisfeitos e fazendo com que mais e mais pessoas participem do crescimento deste programa criando cada dia mais plugins e extensões. No momento deste post o Brackets Sprint já possui extensões suficientes para se igualar ao Sublime Text e o que é melhor, completamente Gratuito, sem registros nem nada do gênero para usar sem pagar.
Sua interface apesar de não ter um acabamento retina como do Sublime Text também é bastante bonita e permite todo tipo de personalização que não deixa a desejar em relação ao Sublime text. Ele também é mais leve que o Sublime text e possui a mesma estrutura de barra de funcionalidades.
Interface do Brackets Sprint
Como funcionalidades padrões além das mais comuns que encontramos em todos os outros editores mais conhecidos como o Sublime Text, Dreamweaver, etc, como destaque para abertura e fechamentos de tags, redução de código por clique, alteração de conjunto de mesmas propriedades, tematização da área de edição o Brackets Sprint possui como funcionalidade padrão o Auto apontamento de caminho onde você vai digitando o URL de um arquivo desejado como uma imagem ou icone ou outro itens e ele vai lhe mostrando os arquivos contidos naquela pasta ou caminho para mais fácil seleção…
Auto apontamento de caminhos de arquivos e pastas
Outra característica muito legal por padrão é que ele mostra as cores referente ao código CSS cujo foi criado. Ao colocar o mouse sobre a cor em questão o Brackets mostra um tooltip com a cor referente aquele código, seja Hexa, RGA, RGB, etc.
Tooltip mostra a cor do seu respectivo código.
O mesmo acontece com uma imagem. Ao colocar-se o mouse sobre o nome da imagem no caminho URL de um código CSS ou HTML ou outro qualquer como JavaScript por exemplo um tooltip com a imagem é mostrado para que saiba que imagem é essa referida no nome.
Tooltip com imagem é mostrada para que saiba que imagem é.
Com uma farta biblioteca de extensões a ser utilizada basta clicar na peça igual ao de lego na barra lateral direita para que se abra uma janela de busca para estas extensões bastando procurar pelo nome delas de forma intuitiva e clicar a instalar e pronto, é só usar clicando no Menu Superior Editar…elas vão se acumulando no final da mesma.
Para que o navegador abra a página que deseja dentro do editor, basta clicar no icone de raio logo acima da de extensões e a mesma se abrirá no seu navegador padrão.
Para quem não gosta da fonte default do programa ai vai uma dica, fuçando no funcionamento do Brackets, descobri uma forma de mudar a mesma. Eu por exemplo, gosto da fonte do Eclipse, a Consolas. Para aplicar a mesma eu editei o arquivo “brackets.min.css”
Dentro da pasta (windows 8.1 x64):
C:\Program Files (x86)\Brackets\www\styles
Abrindo este arquivo em um editor como o Notepad++ como administrador, você deve aplicar a formatação para melhor visualização dos códigos CSS. Procure pela classe “CodeMirror”. Nela é apontado a fonte do editor, cor, e espaçamento da mesma. O código é esse abaixo…
Codigo que deve ser alterado para o editor
Nele você deve substituir a fonta padrão “SourceCodePro” pela que deseja. Como está na imagem acima.
Poucas linhas acima você vai encontrar a declaração @font-face da fonte padrão. Copie e cole no final da última destas e altere para sua fonte.
a declaração que deve ser recriada e alterada.
Uma vez feito isso, salve o arquivo e o feche. Crie a pasta com o arquivo de sua fonte escolhida dentro para a pasta “C:\Program Files (x86)\Brackets\www\styles\fonts”
Reinicie o Brackets e pronto. Veja como ele está usando sua fonte no editor.
Não perca mais tempo com este tutorial, vai lá conhecer o Editor…O site é..
Tentando ser um UX/ UI Front-end Dev e Webdesigner 