Introdução ao Brackets

Nesse artigo irei lhe mostrar um passo a passo para mexer nesse editor de códigos poderoso

Escolher um editor de código certo as vezes se torna uma tarefa difícil para a maioria dos desenvolvedores, em certos casos só podemos usar algumas especificas por conta da linguagem, porém certos editores fazem milagres no nosso dia a dia de desenvolvimento.

Gravado em javascript e criado pela famosa Adobe Inc. o Brackets é uma ótima escolha quando se trata de velocidade e recursos, além que é um editor de códigos open source e você pode baixar o código dele, abrir uma branch sua e fazer melhorias se for o caso :D e ainda mais que muitos computadores não suportam certos editores como VSCode por conta do tanto de memória RAM que ele consome fora o navegador que você estiver usando para visualizar seu código e algum outro software ou serviço que você esteja usando no momento do desenvolvendo, devido a isso seu computador pode acabar não suportando tamanho consumo de memoria e acabar travando ou dando a enigmática “tela azul”.

Instalação

Para fazer a instalação é um passo bem simples, é apenas você acessar o site do brackets que se encontra em: http://brackets.io

Ao clicar em “Baixar Brackets” ele irá baixar um arquivo executável para que você possa instalar o editor em sua maquina, ao abrir o executável só avançar e ele irá instalar tudo corretamente.

Interface

Ao abrirmos o Brackets pela primeira vez, irá ser mostrado uma pasta com um “projeto” que na verdade é um site de boas vindas do Brackets.

A interface do Brackets por sua vez é bem clean e fácil de entender onde estão localizados os recursos, antes que eu explique sobre a parte de criação de arquivos entre outras coisas, tem uma funcionalidade que já vem com o Brackets que é muita bacana.

Live Preview

De apenas um clique nesse icone em formato de raio que fica no canto superior direito do seu editor e espere carregar. E shazam o navegador abriu o seu site, e o lado bom disso é que está funcionando a compilação em tempo real, caso você faça alguma alteração no conteúdo, assim que você salvar ele irá mudar no navegador.

Esse recurso do Brackets por sua vez é muito interessante para que não tenhamos que ficar recarregando a pagina do navegador assim poupando mais tempo.

Arquivos e Pastas

Bem, vamos por a mão na massa, eu criei em meus documentos uma pasta chamada “code ”e dentro dessa pasta code adicionei uma outra pasta chamada “brackets” essa é uma forma que eu uso para organizar cada projeto meu, fica por você a maneira como você se organiza.

clique em File e dentro da lista que abriu clique em Open Folder… e vá até dentro da pasta do projeto que você criou. obs.: tem que estar dentro da pasta do seu projeto ao selecionar a pasta.

E olha que chocrível, ele abriu dentro de sua parte, no canto esquerdo você verá o nome da sua pasta em que você entrou, agora vamos criar os arquivos!

Clique em File e dentro da lista que abriu clique em New e vualá foi criado um arquivo Unitled-1 ao qual iremos nomear como index.html para que possamos simular nosso primeiro projeto de site.

Agora pressione as duas teclas ctrl + s e em seguida irá abrir um modal para que você possa salvar seu arquivo, provavelmente ele já irá estar dentro do seu projeto, logo salve o arquivo com o nome index.html.

E pronto, se tudo ocorrer bem nosso arquivo foi renomeado e já podemos passar para o próximo passo.

Usando o Live Preview

Agora iremos criar uma estrutura simples html, irei disponibilizar um código abaixo, deixe exatamente do modo em que está, nesse artigo não irei explicar sobre o html e o que cada dessas tags significa, isso ficará para um outro artigo.

Ocorrendo tudo bem agora é só pressionar ctrl + s novamente e irá salvar o código que você adicionou, é muito importante lembrar que toda alteração que você fizer e quiser ver em tela o que você mudou precisa sempre salvar o arquivo, se não ele não irá mostrar as alterações. Assim que salvo você irá poder clicar no ícone do raio para ativar o Live Preview e ocorrendo tudo bem o seu projeto irá abrir automaticamente no browser assim que carregar

UAU!!! e caso ocorra tudo bem será isso que irá aparecer na tela, um texto escrito “Olá Mundo” e com isso finalizo esse artigo, caso possua alguma duvida só entrar em contato comigo pelas minhas redes sociais, e se você for meu aluno só me chamar onde designamos nossas conversas.

Bons estudos e se lembre nada é difícil, tudo só depende de seu foco e querer.

Link do repositório do Brackets: https://github.com/adobe/brackets