SUBLIME TEXT o famoso!

 

   O Sublime text é um dos mais famosos IDEs existentes no mundo da programação, apesar de ser pago, a versão gratuita permite-nos utilizar o programa sem restrições.

     Disponível em diversas plataformas como o windows, mac e linux ele tem seus motivos pra ser o querido dos programadores.

     Antes de tudo um editor de texto leve, possui uma interface limpa e fácil de usar. Mas é altamente flexível, podendo se adaptar a diferentes tipos de profissionais. Através de plugins a IDE oferece muitos recursos exclusivos que fazem a programação se tornar mais produtiva.

Ferramentas mais conhecidas

O Sublime Text trás algumas ferramentas padrão que mostram o porquê dessa IDE ser tão usada.

Goto Anything

Talvez essa função seja a principal responsável pelo sucesso do Sublime Text. Com uma simplicidade igual a do Google, através do comando “Ctrl+P” é apresentado um campo de busca muito rápido que busca qualquer conteúdo em qualquer arquivo do projeto à medida em que digitamos o texto.

Plugins

    Uma das coisas mais interessantes do Sublime Text é a capacidade de estender as funcionalidades do editor por meio de plugins.
    Existe plugin pra tudo! Integração com o GIT, snippets para Bootstrap, SFTP, highlight, VI, SASS, LESS, e ótimas ferramentas para refatoração de código.
    Através do Package Control, o usuário pode navegar por uma infinidade de plugins. Além dos muitos plugins já disponíveis, é muito simples criar os próprios plugins, a linguagem utilizada é o Python.

Modo livre de distrações

Quando você precisa de foco, uma ferramenta muito interessante é o Distraction Free Mode. Quando acionado (Menu View/Enter Distraction Free Mode), a IDE fica em tela cheia.

Função Auto-Completar

Todos nós sabemos como é bom usar funções de auto-completar. Essa função aumenta muito a nossa produtividade! Você começa digitando um comando e a IDE abre uma janela com sugestões. Muito útil quando você não lembra exatamente como escreve o comando. Quem não gosta de auto-completar?

Snippets

Snippets são trechos de código prontos que podem ser adicionados no arquivo através de um comando seguido de “Tab“. Por exemplo, se você digitar “lorem” e teclar “Tab” automaticamente é inserido um parágrafo com o famoso texto enchedor de linguiça “Lorem Ipsum”.

Divisão de Tela

Outra característica muito interessante do Sublime Text é a possibilidade de dividir a tela colocando dois (ou mais) arquivos lado a lado. Isso é muito útil para comparar arquivos. Inclusive é possível colocar partes diferentes do mesmo arquivo lado a lado. Outra utilização muito comum entre web designers é colocar o HTML de um lado e o CSS do outro.

Minimap

O Sublime Text apresenta um mini-mapa no lado direito da tela para ter rápido acesso à todas as linhas de seu código, basta deslizá-lo para cima ou para baixo.
Não é uma função nova, mas ajuda muito na hora de trabalhar com seus arquivos.
Você pode exibir ou esconder o mini-mapa através da opção View > Hide/show minimap

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

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.