Sublime Text IDE: Introdução a melhor IDE para desenvolvimento

Para manter a produtividade no seu dia a dia, o desenvolvedor precisa de um editor de códigos eficiente e, dentre tantos ambientes de desenvolvimento robustos e gratuitos, como o Eclipse, o Sublime Text destaca-se justamente pela simplicidade e facilidade de uso, além de leve. Além disso, ele aceita diversas linguagens de programação e personalizável.

O Sublime foi desenvolvido em Python e foi feito para ser simples. É um editor de texto bastante fácil de usar, mas com muitos recursos e funcionalidades que podem ser adicionadas para complementar seu uso, como veremos durante todo o artigo.

Download e instalação

No site oficial você encontrará downloads para as versões 2 e 3 (vide seção Links), ambas com opções para Windows (portable e .exe), Linux e OS X. A versão do Sublime Text mais atualizada no momento de escrita deste artigo é a 3 e que será utilizada neste artigo.

Caso você tenha a versão 2 instalada na sua máquina, aqui vai alguns bons motivos para instalar a nova versão:

• Melhoria no tempo de arranque (que agora é praticamente imediato) e carregamento de arquivos;
• Melhoria na edição de código HTML, incluindo fechamento de tags e atributos automaticamente;
• Melhoria na Gestão de projetos, incluindo vários workspaces para um único projeto. A versão conta com vários painéis e comandos create e destroy para os painéis;
• Conta agora com o Python 3.3 para os plugins, que carregam o código nativo sem impactar no desempenho do carregamento do Sublime;
• API totalmente thread-safe, com retorno de chamada sendo executado de forma assíncrona;
• Melhoria no desempenho do Replace all.

A sua avaliação gratuita, por enquanto, não possui limite. Isso quer dizer que podemos usar a versão de avaliação por quanto tempo desejar.

A instalação é padrão e não requer qualquer tipo de configuração adicional. Basta seguir a instalação normalmente.

Interface do Sublime Text

Após instalado, a interface padrão do Sublime Text 3 é a mesma da Figura 1.

Figura 1. Interface padrão Sublime Text 3

Repare que no canto inferior direito podemos selecionar a linguagem que desejamos trabalhar. Assim, o autocomplete será adaptado para completar o código de acordo com a linguagem escolhida. Podemos realizar essa mesma configuração através do menu View->Syntax.

Funcionalidades e recursos nativos

Muitas vezes você já deve ter precisado checar códigos em mais de uma aba ao mesmo tempo certo? Ficar alternando entre abas para tentar acompanhar a relação entre códigos é um pouco complicado, principalmente quanto temos vários programas em aberto. Para mudar isso, o editor oferece em View->Layout algumas opções de layout de tela, que dividem a mesma em várias colunas, linhas ou em grid, que permitem ver vários arquivos abertos ao mesmo tempo, como mostra a Figura 2.

Figura 2. Divisão da IDE em colunas

Além do layout da tela, existem alguns outros recursos que auxiliam e facilitam a navegação:

1. Go to anything – Basta apertar CTRL + P para navegar através dos arquivos abertos, como mostra a Figura 3.
   
   Figura 3. Go to anything
2. Command Palette – Bem prático para utilizar comandos do menu principal, contanto que você saiba o que está procurando. Pode ser acessado usando o CTRL + SHIFT + P, como mostra a Figura 4.
   
   Figura 4. Command Palette
3. Word Wrap - este não permite que linhas com textos muito grandes fiquem fora do alcance dos seus olhos. Sempre que uma linha de texto alcançar o espaço final da tela, ela é quebrada para a linha seguinte. Para habilitá-lo basta pressionar Ctrl + Shift + W.
   Para consultar a configuração de quebra de linha atual, você pode usar o seguinte comando:
   

   view.options (). get (''wordWrap'')

   Caso queira desabilitar, use o seguinte comando:
   

   view.options (). set (''wordWrap ", False)

4. Múltiplos seletores – O sublime text tem a capacidade de alterar várias linhas de código ao mesmo tempo com múltiplos seletores. É um dos recursos mais úteis quando se quer editar mais de uma linha ao mesmo tempo. Com a seleção múltipla é possível manipular textos usando mais de um cursor em várias regiões da tela ao mesmo tempo. Para isso, pressione Crtl+# e clique onde deseja selecionar, como mostra a Figura 5.
   
   Figura 5. Seleção em múltiplas linhas
5. Color Scheme – Você pode escolher entre diversos temas de cores já pré-definidos em Preferences->Color Scheme. O que muda basicamente de um tema para o outro é a cor do background e a cor da fonte e da sintaxe.
6. Reindent – O Sublime ainda oferece um recurso que ajuda a organizar o código. Para reindentar o código você deve apertar o CTRL + SHIFT + P e digitar reindent.
7. Sidebar – esta permite que você adicione qualquer pasta ao projeto de maneira rápida.
   Para isso vá até o menu Project->Add folder to project e escolha a pasta e selecione. Abrirá uma barra lateral semelhante à Figura 6.
   
   Figura 6. Adicionando uma pasta de projeto ao sublime (Sidebar)
8. Enter distraction free mode – é o modo sem distrações, que amplia a tela e te deixa livre de distrações de outras aplicações. Você pode usar este recurso pressionando SHIFT +F11.

Configurações

Uma das principais diferenças que desenvolvedores percebem quando utilizam o sublime text é nas configurações de preferência. No sublime todas as configurações padrões são salvas em um arquivo de configuração no formato JSON.

Então todo tipo de configuração padrão do sublime deverá ser feita através do arquivo Preferences.sublime-settings, como podemos ver na Figura 7.

Figura 7. Arquivo de configuração do Sublime text

Através de arquivos de configurações podemos também visualizar todas as configurações de atalhos do nosso editor de texto. Para isso, aperte CTRL SHIFT + P, digite key bindings e escolha a opção default, como mostra a Figura 8.

Figura 8. Arquivo de configurações de atalho padrão

Todos os atalhos disponíveis você encontrará neste arquivo.

Por exemplo, se procurarmos por um atalho de duplicação de linha, o encontraremos com o nome de duplicate lines everemos que seu atalho é CTRL + SHIFT + d, como mostra a Figura 9.

Figura 9. Duplicação de linhas

Da mesma forma que existe um atalho de duplicação, também existe um atalho para junção de linhas, colocando as selecionadas numa única linha. Dessa forma, o que você viu na figura anterior ficará como na Figura 10.

Figura 10. Join lines (junção de linhas)

Outros tipos de configurações padrões você encontrará em Preferences->Settings – User, como mostra a Listagem 1.

Listagem 1. Arquivo de configuração de usuário padrão

  {
    "color_scheme": "Packages/User/Color Highlighter/themes/Monokai.tmTheme",
    "font_size": 9,
    "ignored_packages":
    [
       "Markdown",
       "Vintage"
     ]
  }

Estas são as configurações padrões e além destas, existem mais algumas que podemos adicionar:

• highlight_line – Destaca a linha em que se encontra o cursor;
• line_numbers – Habilita ou desabilita a contagem de linhas;
• tab_completion – O sublime realiza o autocomplete ao pressionar tab;
• gutter – Habilita ou desabilita margem.

Usando o Package Control

O Package Control é o instalador e gerenciador de pacotes do Sublime text, como Color Scheme, Snippets, Auto complete, entre outros.

Para adicioná-lo ao Sublime primeiro o importamos do site oficial (vide seção Links) e copiamos o código de acordo com a versão do Sublime. Em seguida, no Sublime, vá emView>Show Console paraabrir uma linha branca na parte inferior da IDE. Cole ali todo o código copiado do site e pressione Enter, como mostra a Figura 11.

Figura 11. Instalando o Package Control

Concluída a instalação aparecerá a mensagem“Please restart Sublime Text to finish installation”: feche-o e abra novamente.

Caso prefira, você poderá baixar o arquivo manualmente do site oficial e depois importá-lo em Preferences->Browser Packages. Depois é só reiniciar o Sublime.

Através dele podemos instalar outros pacote úteis a vida do desenvolvedor. Existe uma infinidade deles, inclusive os que não foram feitos diretamente para o Sublime. Para instalá-los devemos seguir esses passos:

1. Acesse pelo atalho CTRL+Shift+P o Package Control;
2. Digite o comando install packagemais o nome do pacote;
3. Para remover use o comando remove packageseguido do nome do pacote.

Para instalar você também pode apenas executar o passo 1 e digitar apenas install. Com isso, uma lista de plugins será carregada e lá você pode usar as setas para navegar entre as diversas opções. Quando encontrar o que quer, é só clicar em Enter.

A seguir temos alguns pacotes que são geralmente úteis para qualquer desenvolvedor. Use o nome em negrito no comando de instalação para te-lo no seu editor:

• prefixr- ideal para quem trabalha com CSS, pois ele coloca prefixo no CSS3;
• fetch- traz as últimas bibliotecas da web, como jQuery, Wordpress;
• HTML5 - oferece suporte ao HTML5;
• html atrributes- oferece suporte aos atributo em HTML;
• PHPCS- mantem o padrão no código PHP;
• JSSinifier - compacta um arquivo JavaScript;
• Aligntab- ajuda a organizar os códigos, mantendo a padronização na identação;
• FileDiffs- mostra as diferenças entre arquivos;
• GoToOpenFile- mostra a lista de arquivos que estão abertos no seu editor;
• TrailingSpaces - apaga espaços brancos que ficam no final da linha.

Instalando e removendo Plugins e Snippets (Pacotes)

Agora sim podemos instalar pacotes através do Package Control. Para isso é só apertar CTRL + SHIFT + P mais uma vez, digitar install e selecionar a opção Package Control: Install Package.

Uma lista de opções se abrirá, contendo alguns pacotes de plugins e snippets, como mostra a Figura 12.

Figura 12. Lista de snippets do Package Control

Snippets são pedaços de texto pronto que podem ser reutilizados para tarefas repetitivas, a fim de economizar tempo e esforço. Existem muitos bons plugins para o Sublime.

Para exemplificar vamos começar instalando um plugin que nos permite usar snippets do Bootstrap. Basta abrir a Command Palette, digitar install->install package e depois procurar por bootstrap, como mostra a Figura 13.

Figura 13. Instalando plugin do Bootstrap

Vamos escolher a primeira opção, que é a versão mais recente e compatível com as duas versões do Sublime, como mostra a Figura 14.

Repare que nem todos os listados tem a informação de compatibilidade com ambas as versões, por isso, fique atento se o plugin escolhido é compatível.

Figura 14. Instalação do plugin Bootstrap concluída

Com a nova aba que se abriu contando detalhes da instalação, você saberá que a instalação terminou. Também é possível saber pela parte inferior da tela, no canto esquerdo, onde apareceu Package Bootstrap 3 Snippets sucessfully installed.

Vamos testar o plugin, que nos fornece uma série de códigos prontos do Bootstrap sem que tenhamos que copiar e colar código direto do site.

Digitando bs e apertando CTRL + ESPAÇO abrirá uma lista com praticamente todos os componentes do Bootstrap. Vamos escolher um Slide Caroulsel para testar, como mostra a Figura 15. Em seguida escolha a opção carousel para aparecer a mesma tela da Figura 16.

Figura 15. Selecionando Carousel no Bootstrap

Figura 16. Snippet Carousel do Bootstrap

O que nos aparece é todo o código do slide carousel que foi gerado sem a necessidade de digitar tudo ou copiar e colar código. Isso é útil para qualquer outro componente do Bootstrap, ou até mesmo para criar containeres com linhas (rows) e colunas (cols).

Já para remover qualquer pacote devemos proceder de forma semelhante à instalação: abra a command palett com CTRL + SHIFT + P, digitaremove e selecione a opção Package Control: Remove Package. Com isso o pacote estará removido. Se preferir, você pode resolver ignorá-lo no arquivo de configurações do usuário em Preferences->Settings-user ou digitando na command palett Settings – User.

No nosso caso, abriu um arquivo com o seguinte código em JSON (Listagem 2).

Listagem 2. Ignorando pacotes através do arquivo de configuração

  {
     "color_scheme": "Packages/User/Color Highlighter/themes/Monokai.tmTheme",
     "font_size": 9,
     "ignored_packages":
       [
        "Markdown",
        "Vintage"
      ]
 } 

Basta passar os plugins como parâmetro dentro dos colchetes de ignored_packages.

Criando Snippets

É possível criar seus próprios snippets através da opçãoTools->New snippet.A primeira coisa que devemos saber é que para funcionar corretamente ele deve ser salvo com a extensão .sublime-snippete deve ser salvo em uma pasta específica.

Vamos a um exemplo: selecione a opção New snippetpara abrir uma nova aba com o código XML da Listagem 3.

Listagem 3. Criando um novo snippet

  <snippet>
       <content><![CDATA[
 Hello, ${1:this} is a ${2:snippet}.
 ]]></content>
       <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
       <!-- <tabTrigger>hello</tabTrigger> -->
       <!-- Optional: Set a scope to limit where the snippet will trigger -->
       <!-- <scope>source.python</scope> -->
 </snippet> 

Dentro das tags <content> é onde você criará o conteúdo do snippet, ou seja, o que vai aparecer no retorno sempre que chamarmos este snippet no nosso código.

Então vamos criar um conteúdo simples para este snippet, como mostra a Listagem 4.

Listagem 4. Implementando um snippet

 <snippet>
 <content><![CDATA[
 //Função Devmedia
 function ${1:nome} (${2:argumento}) {
                 ${3:corpo da função}
 }
  ]]></content>
     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
      <!-- <tabTrigger>hello</tabTrigger> -->
      <!-- Optional: Set a scope to limit where the snippet will trigger -->
      <!-- <scope>source.python</scope> -->
</snippet>  

Sempre que chamarmos este snippet, ele nos retornará um comentário logo na primeira linha e em seguida uma função que passar três parâmetros: nome, argumento e o corpo da função.

Com o corpo da função criada, ainda temos que criar a chamada do snippet, que é simples: só devemos criar a tag depois do fechamento da tag .

Além disso vamos criar a tag </scope>, assim limitamos o tipo de arquivo onde nosso snippet deverá aparecer, como mostra a Listagem 5.

Listagem 5. Adicionando o escopo e chamada de ação do snippet

  <tabTrigger> devmedia</tabTrigger>
 <scope> source.php</scope>
  

Com isso, o nosso snippet ficou com o código completo presente na Listagem 6.

Listagem 6. Criando uma função dentro de um snippet

  <snippet>
                 <content><![CDATA[
 //Função Devmedia
 function ${1:nome} (${2:argumento}) {
                 ${3:corpo da função}
 }
 ]]></content>
                 <tabTrigger>devmedia</tabTrigger>
                 <scope>source.php</scope>
 </snippet>
 

Agora é só salvar o arquivo na pasta Sublime text->Packages->User com a extensão correta, como mostra a Figura 17.

Figura 17. Salvando snippet

Para usá-lo basta chamar no código, como mostra a Figura 18. Lembre-se que o definimos como source.php, então só funcionará em arquivos PHP, como mostra a Figura 19.

Figura 18. Usando o snippet criado

Figura 19. Snippet

Com isso podemos criar quantos snippets precisarmos para facilitar o nosso trabalho durante o dia a dia.

Outros Plugins

No site do Package Control você encontra diversos tipo de plugins, até mesmo os para desenvolvimento dos principais CMSs (gerenciadores de conteúdo) como Joomla e Wordpress (Figura 20).

Figura 20. Lista de plugins de Wordpress para sublime text

A exemplo do Bootstrap, temos alguns outros plugins que podem nos auxiliar e personalizar o nosso editor, como:

• Bracket Highliter: bom plugin para quem quer identificar melhor o fechamento e abertura de tags dentro do escopo, pois ele faz uma pequena marcação ao lado do número da linha, identificando as tags;
• · Comment-snippet: é oplugin com snippets de comentários. Basta começar digitar "comm" que o próprio Sublime já dá opção de escolha dos comentários;
• · AutoFilename: útil para requisitar outro arquivo em qualquer diretório, ou seja, este plugin mostra o conteúdo da pasta para adicionar ao código, como mostra a Figura 21.
  
  Figura 21. AutoFilename Plugin
• ColorHighliter: Identifica notações de cores hexadecimais e mostra a cor em tempo real quando clicamos na notação;
• Colorpicker: Muito útil principalmente para desenvolvimento web, pois abre o colorpicker. Basta apertar CTRL + SHIFT + C, como mostra a Figura 22.
  
  Figura 22. Plugin Colorpicker

Como vimos, o Sublime é um ótimo editor de código que nos ajuda a escrever código em várias linguagens. Mas a seguir lhe oferecemos outros bons editores de texto que se assemelham bastante com o Sublime Text que também tem suporte multilinguagem:

• · Notepad++: editor de texto com visual bastante simples, com suporte a várias linguagens de programação e alguns plugins já disponíveis no próprio gerenciador de pacotes. Também possui opção de importar plugins;
• · Atom: IDE Open source desenvolvida pelo Github, altamente customizável e com uma boa quantidade de plugins. Possui integração com o Git e uma interface bastante amigável;
• Brackets: IDE leve e open source, desenvolvida pela Adobe, e que por isso consegue obter um código CSS limpo, direto de um .PSD sem escrever uma linha de código. É uma boa ferramenta e com muitas opções de plugins e configurações.

Mesmo com tantas outras opções no mercado com muitos recursos, o Sublime Text consegue ser a escolha de muitos desenvolvedores por trazer consigo uma forma simples e leve de codificar. Suas configurações padrões já trazem bons recursos para trabalhar. Além disso, conta com uma boa quantidade de plugins que podem ser instalados para auxiliar ainda mais ao desenvolvedor.

Links

Sublime Text
http://www.sublimetext.com/2
http://www.sublimetext.com/3

Package Control
https://packagecontrol.io/installation