O Sublime Text é um dos editores de texto mais populares da actualidade e por boa razão – é verdadeiramente fantástico!

Está disponível para os 3 principais sistemas operativos (OSX, Windows e Linux) e apesar de ser pago, a versão gratuita permite-nos utilizar o programa sem restrições (tudo o que teremos é um pequeno pop-up a surgir a cada 20 ou 30 saves para nos lembrar que a versão paga existe).

Um dos principais factores que contribuem para esta popularidade é o vasto conjunto de packages (extensões para o programa, ou plugins) que podemos instalar. Existem centenas de packages para este editor de texto, mas neste artigo tenciono focar-me nos 10 que utilizo com maior frequência, seja para escrever artigos ou para Web Development.

NOTA: O Sublime Text está oficialmente na versão 2, mas há já vários meses que utilizo a versão 3. Apesar de ainda estar em beta, está perfeitamente estável e é esta a versão que recomendo. Todos os packages que indico neste artigo funcionam com a versão 3, mas devem também funcionar com a versão 2, se necessário.

Como instalar packages no Sublime Text

Antes de avançar, uma nota sobre como instalar packages no Sublime. A melhor forma de o fazer é sempre através do Package Control, que é uma espécie de download manager interno do Sublime.

O mesmo pode ser instalado através da consola, indo a View-Show Console.

Lá, devemos inserir o código presente neste site, que dependerá da versão do Sublime instalada.

Com o Package Control instalado, devemos depois executá-lo indo a Tools-Command Palette e escrever “install” – o primeiro resultado deverá ser Package Control: Install Package, que é a opção desejada.

A partir daí é muito fácil: basta escrever o nome da extensão que procuramos e o Package Control descarregará e instalará o package por nós.

O programa é super leve, portanto não tenhas medo de instalar os packages que desejares. Vamos lá então “artilhar” o nosso Sublime!

Packages para Blogging

Todos os meus artigos são escritos no Sublime Text e para este propósito só recorro a 2 extensões. Outra funcionalidade que adoro, mas que vem já de origem no Sublime, é o Distraction Free Mode (View-Distraction Free Mode) que coloca o Sublime em full-screen, exibindo apenas o que escrevemos.

Markdown Editing

Se escreves em Markdown (e se ainda não o fazes, realmente devias), ficarás contente em saber que existe um excelente package para formatar o texto.

O Markdown Editing detecta ficheiros .md e mudará o fundo do teu editor de texto para cinzento claro, aplicando depois a devida formatação (negrito, itálico, títulos, etc) para que vejas uma versão mais aproximada do resultado final do teu artigo.

Word Count

Às vezes é importante termos uma ideia de quantas palavras já escrevemos. O Sublime dá-nos bastante informação, mas só terás acesso ao número de palavras se instalares este package.

O número de palavras ficará disponível em baixo, na status bar.

Packages para Web Development

O Sublime Text é um dos editores de texto preferidos dos programadores e depois de veres o que estes packages podem fazer por ti, vais perceber o porquê.

A maior parte destas extensões valem a pena mesmo se ainda estiveres a dar os primeiros passos em HTML e CSS.

Autoprefixer

Se estiveres a utilizar algumas funcionalidades mais avançadas do CSS3, é quase inevitável que tenhas de adicionar alguns vendor prefixes para garantir o seu devido funcionamento na maioria dos browsers.

Mas é uma chatice escrever o mesmo código várias vezes, para não falar do trabalho que é ter de saber quais são os elementos que necessitam dos já mencionados vendor prefixes, certo?

É aqui que entra o Autoprefixer – depois de instalado, só tens de lançar a Command Palette (Tools-Command Palette) e escrever Autoprefix CSS, que todos os prefixos necessários serão imediatamente escritos por ti.

Browser Refresh

Em Web Development, é frequente teres de gravar as tuas alterações no Sublime, voltar para o browser e fazer um refresh. Uma tarefa algo monótona, se pensares no número de vezes que isso acontece por dia.

Há outras formas de contornar esse problema, mas no Sublime, o Browser Refresh faz esse trabalho por ti. Se já tiveres a tua página aberta no browser, podes configurar um atalho para o teu teclado (o chamado key binding) que fará com que esta extensão grave o teu projecto, passe para o browser e de imediato o refresque sem teres de fazer nada.

Podes ver como configurar este package no ponto 2 desta página – podes mudar o atalho do teclado (o atalho predefinido é o command/control+shift+r) e o browser (que por predefinição é o Chrome).

Color Highlighter

Se trabalhas muito com cores, vais adorar esta extensão!

O Color Highlighter vai sublinhar o teu código com a cor respectiva, permitindo-te assim identificar com facilidade qual a cor que estás a usar. Assim, vais poder confirmar se #0099ff é realmente aquele azul em que estavas a pensar.

Mas o Color Highlighter não funciona apenas com valores hexadecimais; para além de suportar todos os formatos de cor de CSS, também suporta variáveis SASS, por exemplo, e se utilizarmos um valor RBGA com transparência, a cor apresentada já terá isso em conta.

Nesta imagem podes ver como este package é versátil!

Por fim, este plugin conta ainda com um color picker, para a eventualidade de querermos rapidamente alterar a cor. Basta colocar o cursor na cor a ser alterada e, ao clicarmos no lado direito do rato, teremos no menu de contexto a opção Choose color, que lançará o picker.

Emmet

O Emmet é algo que recomendo fortemente se trabalhares muito com HTML e CSS. É daquelas ferramentes essenciais para quem gosta, como eu, de escrever depressa.

Pode levar algum tempo a decorar os comandos, mas verás grandes ganhos de produtividade se o começares a utilizar aos poucos.

Podes testemunhar o potencial do Emmet se vires o vídeo de demonstração presente no site oficial. Depois disso, a melhor forma de aprenderes a utilizar o Emmet é consultares a documentação.

Em HTML é possível que leves mais tempo a conhecer todo o seu poder, mas em CSS é praticamente imediato: assim que começares a escrever código (mesmo que com erros) ele adivinhará quase sempre o que querias escrever, facilitando-te bastante o trabalho.

O Emmet existe, enquanto plugin, para os principais editores de texto, não sendo o Sublime uma excepção.

GitGutter

Se trabalhas com Git, este é um óptimo package para verificares rapidamente quais as linhas em que houve alterações no ficheiro desde o teu último commit.

As cores nas linhas informam-te quando existiu alguma adição, edição ou remoção de conteúdo.

HTMLBeautify

Se gostas de ver o teu código bonito e devidamente indentado, parabéns! Estás a seguir uma das maiores boas práticas da programação.

O problema é quando já tens tantas <div>s que nem sabes por onde começar. Se te sentires perdido, dá uma chance a este package do Sublime – o mais provável é ele fazer um trabalho brilhante por ti!

Basta ires a Edit-Beautify HTML e o teu código ficará perfeitamente legível, como que por magia! Repara no “antes e depois” deste exemplo, que coloquei aqui em GIF.

SideBarEnhancements

A barra lateral do Sublime Text é um dos pontos fracos do programa e algo que deveria ser melhorado. Felizmente, já alguém tratou disso, adicionando várias funcionalidades críticas ao menu de contexto.

O SideBarEnhancements vai-te facilitar o trabalho de criar pastas, abrir ficheiros no Finder ou outras apps e, sobretudo, ajudar-te na pesquisa.

Estas são todas as opções que o SideBarEnhancements te oferece:

SublimeLinter

O syntax highlighting ajuda imenso os programadores, mas às vezes é preciso um pouco mais… não seria bom saber se o nosso programa está bem escrito sem ter de o correr e ver as mensagens de erro?

Bom, é aqui que entram os Linters!

Os Linters estão disponíveis para variadíssimas linguagens (JavaScript, Ruby, PHP, Python…) e vão-te alertar quando algo vai gerar um erro – como a ausência de um ; ou de um end no teu código.

Neste exemplo, repara naquela bola vermelha. Ela está lá porque falta uma vírgula depois de controller: 'MainCtrl' .

Para utilizares os Linters, deves não só instalar o SublimeLinter, como o plugin da linguagem respectiva – que geralmente estará disponível aqui.

Da primeira vez poderás ter de perder algum tempo até configurar devidamente o Linter, mas acredita que é tempo bem gasto! Vais passar a programar muito menos às escuras e vai ser a extensão que mais tempo te poupará daqui por diante.

Como sincronizar os nossos packages e definições entre vários computadores

É normal que queiras ter todos os packages instalados nos teus computadores, como acontece por exemplo com as extensões do Chrome.

Para tal, o melhor será fazeres backup da pasta Packages/User, seja para um serviço como o Dropbox, ou para o Github.

Este artigo poderá ser útil para ti se tiveres dificuldades no processo.

Conclusão

E pronto, ficaste a conhecer algumas das minhas principais armas secretas do Sublime. Existem muitas mais, como podes ver aqui, para além de inúmeros temas, que dão vida ao teu editor de texto (o tema que utilizo actualmente é o Materialize, já agora)!

Escapou-me alguma? Quais são as tuas extensões preferidas do Sublime?