Brackets - Editor de Código Web Open Source - Instalação e Review

Colaboração: Diego Boot

Data de Publicação: 27 de julho de 2016

O Brackets é um 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. 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)

╏ Instalar Brackets no Ubuntu e derivados

Para instalar o editor de código para web Brackets no Ubuntu e ainda poder receber automaticamente as futuras atualizações dele, você deve fazer o seguinte:

⋕ Abra um terminal [ no Unity use as teclas CTRL + ALT + T ]

⋕ Instale o Brackets usando os comandos abaixo

  sudo add-apt-repository ppa:webupd8team/brackets [ENTER]
  sudo apt-get update [ENTER]
  sudo apt-get install brackets [ENTER]

⋕ Caso queira DESINSTALAR o Brackets

  sudo add-apt-repository ppa:webupd8team/brackets --remove [ENTER]
  sudo apt-get remove Brackets [ENTER]
  sudo apt-get autoremove [ENTER]

Sobre o autor

✍ Assine o canal । Subscribe
✍ YouTube: http://bit.ly/Taverna_Linux

⑄ Redes Sociais । Social Networks
⑄ Google+: http://bit.ly/g_plus_taverna
⑄ Facebook: https://fb.me/tavernalinux
⑄ Quitter: https://quitter.se/tavernalinux
⑄ Tumblr: http://tavernalinux.tumblr.com
⑄ Twitter: https://twitter.com/tavernalinux
⑄ Medium: https://medium.com/@tavernalinux
⑄ Instagram: https://instagram.com/tavernalinux

║ Creative Commons
║
║ Músicas pro Lyvo 📼
║ Ozymandias Part I e II https://soundcloud.com/lyvo
║
║ Intro por Simon OZ prod no ViMeO 🎥
║ Firefox in Motion https://vimeo.com/3183064