Sublime Text para edição de códigos

O Sublime Text é um editor de código simples, rápido, leve e muito fácil de utilizar, porém, repleto de funcionalidades que fazem dele uma poderosa ferramenta para desenvolvedores. A versão premium (paga) oferece diversos recursos que otimizam o trabalho dos programadores, mas até mesmo a versão gratuita oferece funcionalidades essenciais para produtividade no desenvolvimento de sites e sistemas.

Para quem está buscando um editor de código eficiente e com uma boa relação custo/benefício, este artigo tem como objetivo apresentar os motivos pelos quais o Sublime Text pode ser uma ótima opção na sua escolha.

Instalação do Sublime Text

Obviamente que antes de mais nada é necessário instalar o Sublime Text no seu computador, e para isso você pode precisa fazer o download do instalador no site oficial em www.sublimetext.com

Passo 1 – Faça o download do instalador de acordo a versão do seu sistema operacional. Neste artigo utilizaremos a versão Windows 64 bits.

Passo 2 – Execute o instalador clicando duas vezes sobre ele e, em seguida, escolha o local de destino para instalar o Sublime Text no seu computador. Você pode clicar diretamente em Next e deixar o local de instalação padrão sugerido pelo sistema operacional.

Passo 3 – Confirme as opções de instalação clicando em Next, clique em Install para instalar e em Finish para finalizar.

Passo 4 – Procure pelo ícone do Sublime Text na sua área de trabalho ou no menu de programas do Windows. Abrindo o Sublime você verá uma janela semelhante à da imagem a seguir:

Instalação de Plugins

Uma das grandes vantagens do Sublime Text é a versatilidade de customizar a ferramenta de acordo com a sua necessidade. Existem centenas de plugins que facilitam, e muito, a vida dos programadores, bastando apenas alguns poucos cliques para você instalar o plugin que desejar.

Para instalar alguns plugins que utilizaremos neste artigo precisaremos primeiramente habilitar a instalação de novos “pacotes” no Sublime Text. Para isso, clique no menu Tools e, em seguida, na opção Install Package Control.

Após habilitado a opção Install Package Control basta pressionar Ctrl + Shift + P no seu teclado e no campo de busca que aparecer digitar “Install Packages” como ilustra a imagem a seguir:

Clique na opção Package Control: Install Plugin e aguarde o Sublime Text apresentar um novo campo de busca para você digitar o nome do plugin que deseja instalar.

Como exemplo neste artigo vamos instalar o plugin Emmet for Sublime Text. Então, digite “Emmet” no campo de busca e, em seguida, clique na primeira opção como ilustra a imagem a seguir:

Observação: É necessário estar conectado na internet para o Sublime Text fazer o download do plugin.

Para instalar novos plugins basta seguir os seguintes passos:

  1. Pressione Ctrl + Shift + P;
  2. Digite “Install Packages”;
  3. Digite o nome do plugin que deseja instalar.

Como já dito anteriormente existem centenas de plugins que otimizam e facilitam o desenvolvimento no Sublime Text. Dentre eles, os que considero mais úteis e recomendo a sua utilização são:

  • All Autocomplete – Funcionalidade de auto completar considerando as palavras presentes nos arquivos que estão abertos.
  • Emmet – Aprimora a codificação de arquivos HTML e CSS simplificando a escrita através de expressões específicas.
  • ColorHighlighter – Quando você clica em um código hexadecimal o plugin preenche o fundo com a cor especificada.
  • ColorPicker – Abre uma paleta de cores quando pressionamos Ctrl + Shift + C.
  • SideBarEnhancements – Ao clicar com o botão direito do mouse nos arquivos o plugin adiciona mais opções  como, por exemplo, renomear, mover, deletar, etc.



Dicas de Utilização do Sublime Text

Para exibir a barra lateral

Clique no menu View, aponte para a Side Bar e clique em Show Side Bar.

Para criar um arquivo HTML5

  1. Clique no menu File e em seguida New File;
  2. Clique no menu File e em seguida Save;
  3. Selecione o local que deseja salvar, digite o nome do arquivo com a extensão .html e clique no botão salvar;
  4. Digite “html:5” e pressione a tecla TAB.

Realizando a sequência acima você obterá a estrutura de uma página HTML como ilustra a imagem a seguir:

Digitação das tags HTML sem o “< >” com auto completar

O Sublime Text oferece um recurso que dispensa a digitação completa das tags HTML. Para codificar, por exemplo, um título (<h1> </h1>) basta digitar h1 e pressionar TAB em seguida.

Para a codificar o código da imagem acima foi digitado apenas:

h1 + TAB
p + TAB 
img + TAB
a + TAB 

Para preencher parágrafos com texto aleatório

Digite: lorem + TAB

Criando estruturas HTML com o Emmet

Através do plugin Emmet é possível criar rapidamente estruturas complexas em HTML como a imagem a seguir:

Para a criação da estrutura de links da imagem acima foi digitado no Sublime: ul>li*6>a + TAB:

Outro exemplo com o Emmet

Digitando “table>tr*4>td*2” e pressionando em seguida tecla TAB o Sublime Text gera automaticamente o código da imagem a seguir:

Para mover uma linha para “cima” ou para “baixo”

Clique sobre a linha de código que deseja mover e pressionada as teclas Ctrl + Shift mova a linha selecionada utilizando a seta para “cima” ou para “baixo”.

Trabalhando com cores em arquivos .css

Com a instalação dos plugins ColorHighlighter e ColorPicker trabalhar com cores nos arquivos CSS fica muito mais fácil.

Pressionando Ctrl + Shift + C você pode selecionar uma cor na janela do ColorPicker e após clicar em “ok” o código hexadecimal desta cor e gerada no seu arquivo CSS. E como o auxílio do ColorHighlighter você sempre consegue visualizar a cor do código hexadecimal, pois o código fica destacado com a cor em questão.

Seleção múltipla

A seleção múltipla permite manipular texto usando mais de um cursor em mais de uma região selecionada, poupando-nos bastante tempo ao eliminar tarefas repetitivas de digitação de código. Para isso basta pressionar a tecla Ctrl e clicar nos locais que deseja escrever simultaneamente.

Seguindo as dicas desse artigo sua produtividade no desenvolvimento de página web com o Sublime Text aumentará consideravelmente.