quinta-feira, 25 de agosto de 2016

Brackets – Editor de texto para Web Designers

Brackets – Editor de texto para Web Designers

Oi, gente! Tudo bem com vocês?

A dica de hoje é para quem, assim como eu, está começando ou tem interesse no desenvolvimento Web e está procurando um Editor de texto para codificar em HTML, CSS e JavaScript, que seja legal e gratuito. Ou, ainda, simplesmente enjoou do seu.

O post de hoje é sobre o Brackets.

Na faculdade, um professor tinha falado dele para mim, mas só por esses últimos dias que mexi nele e vim falar das minhas impressões sobre essa aplicação.

Sobre o Brackets


Ele é um editor de texto voltado para quem programa para Web. Foi escrito na linguagem JavaScript e é um projeto da Adobe, mas possui uma ampla comunidade de desenvolvedores que colaboram com o seu crescimento. Todos podem colaborar, inclusive eu e você.

O software é gratuito, encontra-se na versão 1.8 e pode ser baixado no site oficial. Não possui versão em português e está sob a licença MIT. Se desejar, você encontra a cópia dessa licença aqui.

Instalação


É simples, rápida e sem mistérios. Quando você vê, já acabou!

A única configuração, que precisará fazer, caso deseje, é escolher em que pasta será instalado o programa, como na imagem abaixo. Mas a sugestão dada pelo programa é na pasta “Program Files” (“Arquivo de Programas”), que foi a que eu escolhi.

Brackets – Instalação

Depois é só clicar em próximo e ir seguindo as instruções do instalador.

Aparência


É bem simples. A única coisa que demorei um pouco para me acostumar, foi com o fato dele não possuir abas superiores para navegar entre os arquivos, como as que encontramos nos navegadores e que é comum nesse tipo e programa.

Brackets Light










Para navegar entre as janelas, utilizamos o menu do lado esquerdo, conforme vemos abaixo. “Working Files” exibe os arquivos abertos e logo abaixo temos a pasta onde o projeto atual está guardado. Parece bem organizado para mim.

Organização do Brackets

Ele oferece dois temas para modificar a aparência. O tema padrão Brackets Light, que vimos na primeira imagem desse tópico, e o Brackets Dark, que vemos na imagem abaixo.

Brackets Dark

Também podem ser modificados itens como tamanho da fonte, tipo de fonte e se queremos usar o tema na barra de rolagem ou não.

Brackets - Edição de Tema


Vale ressaltar que, para alterar o tipo de fonte, precisamos declarar não apenas o nome da fonte, mas também o tipo de família, assim como fazemos quando codificamos o CSS.

Recursos da aplicação


Seu uso é bem simples e muito similar à de outros editores que encontramos por aí, como o Sublime Text, por exemplo. Eis alguns recursos que quero destacar:

Autocompletar

Assim como em outros editores desse tipo, possui o recurso de autocompletar (autocompletion) a palavra que estamos digitando. Uma agilidade e facilidade a mais na mão do desenvolvedor.

Basta começar a digitar a palavra, se ele a possui em seu banco de palavras, ele faz a sugestão:

Autocompletar - Brackets

Live Preview


Brackets - Live Preview
Um recurso muito legal é o “Live Preview”, que se encontra no canto superior direito da tela. Seu ícone tem a forma similar a de um raio (imagem a direita), que fica amarelo quando está funcionando, como vemos na imagem.

Ele permite não apenas a execução direito no navegador, mas também permite que você veja as alterações em tempo real.

Se, por exemplo, eu estiver editando o texto, no navegador, ao redor do texto, aparece um quadro azul delimitando aquele espaço, como na imagem abaixo:

Brackets - Live Preview


Importante: essa pré-visualização só roda do Google Chrome, então ele precisa estar instalado para que esse recurso funcione.

JS Lint


HTML, CSS e JavaScript, diferente de outras linguagens, irão rodar no seu navegador se uma tag não for fechada ou faltar um ponto-e-vírgula, pois isso provavelmente não dará erro em tempo de execução, mas irá comprometer a qualidade do código e a sua legibilidade.

Infelizmente, não existem depuradores de código nos navegadores para essas linguagens.

Por isso criaram os validadores de código! Sim, eles existem! Eles verificam o código linha a linha e apontam o erro que existe ali. Como um espaço a mais ou a menos, ponto-e-vírgula faltando, aspas sobrando e etc.

E o JS Lint é um deles. É utilizado para validar códigos JavaScript. E o Brackets já vem com ele de fábrica! Não é ótimo? Se não conhece o o JS Lint, você pode conhecê-lo e utilizá-lo na Web também!

Assim que salvamos o arquivo, uma janela no rodapé ganha vida e o JS Lint dá o ar da graça!

Brackets - JS Lint em ação


A medida que vamos corrigindo os erros, assim como em outros depuradores, a lista do JS Lint vai diminuindo também!


Extensões Adicionais


Sim, é possível instalar recursos adicionais! Como, por exemplo, os validadores para HTML (W3C Validator) e CSS (CSS Lint), novos temas e etc.

Brackets - Extensões


Prós e Contras?


Prós

- Achei leve e rápido para abrir;
- Fácil de instalar;
- Js Lint Instalado;
- Limpo, fácil e simples de manusear;
- Aparência agradável;
- Se manjar, pode ajudar a desenvolver;
- É gratuito.

Contras


- É em inglês;
- Não vem com validadores HTML e CSS instalados;
- Live Preview não funciona com o JavaScript;
- Tem que ter o Google Chrome instalado se quiser usar a função Live Preview.

Conclusão


Achei uma ótima opção gratuita para quem procura um programa de qualidade para escrever seus códigos. Possui os recursos necessários, pelo menos para mim, que estou começando. Pode ser que depois de muito tempo de uso eu venha a não gostar de algo, mas por enquanto é superpositivo para mim!

E você? Já usou? O que achou? Se já instalou alguma extensão, o que achou? Deixe sua opinião nos comentários.

Se você gostou desse post, compartilhe com seus amigos, colegas, familiares e com aqueles que você sabe que gostam desse assunto.

Até mais, abraço!

Postagens Populares