Instalação e Configuração do Sublime Text para Desenvolvimento WEB

Instalação e Configuração do Sublime Text para Desenvolvimento WEB

sublime-text-tetranet

Algumas pessoas que estão começando com o desenvolvimento web ou estão saindo da faculdade, geralmente acham que para desenvolver uma aplicação web é necessário uma IDE como o Zend Studio, Eclipse ou Netbeans. Bom as coisas são um pouco diferentes, pois muitas vezes as grandes IDE's (grandes elefantes) mais atrapalham do que ajudam. As IDEs hoje em dia oferecem suporte em praticamente todas as fases do processo de desenvolvimento de software. Usualmente as IDE's oferecem ferramentas para controle de projetos, controle de versões, acesso remoto, gerência de banco de dados entre uma infinidade de outros recursos.

Às vezes você não precisa disso tudo consumindo recursos de processamento e memória do seu computador. Muitas vezes uma grande variedade de ferramentas disponíveis não significa que são as melhores e este é o principal ponto. Um exemplo é o controle de versões, alguns desenvolvedores acham que é mais produtivo gerenciar tudo através de uma IDE e esquecem a boa e velha linha de comando. Experimente sincronizar seu projeto em uma IDE e depois faça o mesmo em modo texto para ver a velocidade impressionante a sincronização acontece. As IDE's podem ser o caminho mais curto para um desenvolvedor que está começando mas infelizmente eles podem criar maus hábitos e no pior dos casos ficar dependentes da ferramenta, este sem dúvidas é algo realmente preocupante.

Desenvolvedores sênior e com muitos anos na área preferem ferramentas simples, sendo que muitos utilizam o bom e velho VI do Linux, uma ferramenta poderosa para quem sabe utilizar. O motivo é claro, uma ferramenta robusta, rápida e que não nos deixa na mão quando mais precisamos. Para quem não está acostumado muito com o VI e não deseja utilizar os elefantes das IDE's existem soluções excelentes como é o caso do Sublime: uma ferramenta robusta, rápida, inteligente, enxuta, multi-plataforma (Linux, MacOS e para os sofredores.... Windows) e que supre as necessidades de um desenvolvedor. O Sublime Text possui atualmente 3 versões:

  • Sublime Text.
  • Sublime Text 2 (Atual).
  • Sublime Text 3 (Beta).

Para quem trabalha com Web e gerencia muitos projetos o Sublime Text é a melhor opção. Apensar da aparente simplicidade o Sublime é sofisticado e possui recursos que até mesmo as grandes IDE's não possuem. Antes de tudo é necessário salientar que o Sublime é pago, para ser mais exato custa 70 dólares, um valor quase que simbólico e encorajo a todos em comprar a licença para ajudar o projeto e também para ter um software legalizado. Para um desenvolvedor web nada mais óbvio do que investir em boas ferramentas. Caso você queira testar  sem precisar investir não há problemas, pois você pode baixar no site a versão demo. A versão demo do Sublime não possui limitação de uso por período e nem deixa o usuário enjaulado: você pode utilizar tudo do Sublime Text pago, a única diferente é que fica aparecendo uma mensagem que seu software não é registrado. Caso você não se sente confortável com isso, a dica aqui é para utilizar o TextMate um editor parecido com o Sublime só que 100% gratuito sendo que está disponível somente para o MacOS. O TextMate não será abordado neste artigo.

Algo interessante no Sublime é que ele salva o estado atual das telas abertas. Vamos supor que você fecha o Sublime. Quando você abrir novamente ele vai abrir todas as abas que estavam sendo utilizadas assim como deixar o cursor na linha que você estava editando.

Instalação do Sublime Text

A instalação do Sublime tanto no MacOS como no Windows não existe muitos  segredos. Primeiro você deve baixar o Sublime de acordo com o seu sistema operacional aqui. No MacOS como é de praxe você tem que passar o sublime para a pasta de Aplicações para ser instalado. No Windows é só executar o .exe para executar o instalador do tipo next, next, finish. Para quem utiliza o Linux precisa atentar para alguns pontos: caso você queira instalar o sublime em sua pasta home de usuários o processo é rápido e simples. No entanto, se você deseja instalar em uma participação de sistemas como por exemplo o /opt você precisa dos privilégios de super usuário. Segue as dicas abaixo para usuários Linux:

[bash] # Descompactar os arquivos do sublime tar xf Sublime\ Text\ 2.0.1\ x64.tar.bz2 # Mover os arquivos para a partição /opt sudo mv Sublime\ Text\ 2 /opt/ # Criando um atalho para chamar o sublime em modo texto sudo ln -s /opt/Sublime\ Text\ 2/sublime_text /usr/bin/sublime # Sugiro criar mais um atalho para executar o sublime digitando apenas subl sudo ln -s /opt/Sublime\ Text\ 2/sublime_text /usr/bin/subl [/bash] No meu caso eu instalei o Sublime na pasta home do meu usuário no Linux. Para o comando subl funcionar perfeitamente através da linha de comando preparei um pequeno script com o conteúdo abaixo. O crédito deste script vai para o Jeena: [bash] #!/bin/sh nohup sublime-text-2 $1 >/dev/null 2>&1 & [/bash] Salve este script com o nome: subl.sh e depois execute o seguinte comando como root: [bash] ln -s /home/NOME_DO_SEU_USUÁRIO/bin/sublime-text-2/subl.sh /usr/bin/subl [/bash] Pronto!

Caso você utilize o KDE ou algum outro gerenciador de janelas como o Unity do Ubuntu será necessário criar um ícone na sua área de trabalho, caso você desejar. No KDE a forma simples é dar com o botão direito e criar um "atalho para aplicativo" no diálogo que abrir você coloca o comando sublime ou subl ou ainda pode apontar para o caminho absoluto de onde está o Sublime. Depois disso você coloca um ícone bem bonito abaixo tem uma galeria, clique no ícone para instalar:

[gallery ids="895,896,897,898,899,900,901,902"] Para utilizar o comando subl no MacOS existe solução também! Partindo do pressuposto que você instalou o Sublime no diretório padrão de aplicações do Mac e que você tenha um diretório bin na sua pasta de usuário, digite o seguinte comando: [bash] ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" ~/bin/subl [/bash] Para definir o Sublime como editor padrão em linha de comando digite o seguinte: [bash] export EDITOR='subl -w' [/bash] Caso você enfrente algum  tipo de problemas para configurar o comando subl no MacOS sugiro conferir as dicas neste link e também neste aqui.

Configuração e Preparação do Sublime Text para o Desenvolvimento WEB

Agora começa a parte mais divertida! Vou dar algumas dicas dos principais plugins que utilizo no Sublime Text, ou seja, coisas úteis para o dia a dia sem frescura. A ferramenta principal que você precisa conhecer no Sublime é o console, pois é neste lugar que você gerencia o Sublime. Para abrir o console você pode ir em: View -> Show Console. Mas o bom mesmo é ir através do atalho do teclado para isso utilize Control + ' (este é o sinal da aspas simples a dica vale tanto para windows, MacOS e Linux). Caso você utilize o KDE atenção, pois este atalho já está configurado para outra coisa, assim é necessário mapear outro atalho para abrir o console. Para isso vá em preferences -> key bindings - default e procure por console esta linha:

[text] { "keys": ["ctrl+'"], "command": "show_panel", "args": {"panel": "console", "toggle": true} }, [/text] troque por ou alguma outra combinação do teclado que você gostar: [text] { "keys": ["ctrl+'"], "command": "show_panel", "args": {"panel": "console", "toggle": true} }, [/text]

Instalação do Package Control

O Package Control é o lugar certo para instalar componentes no Sublime só que ele não vem instalado por padrão. O processo de instalação é simples, você deve abrir o console  e executar o seguinte comando:

[text] import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation') [/text] Depois de executar o comando acima feche abra novamente o Sublime. A versão oficial do comando acima ou para o Sublime Text 3 pode ser encontrada aqui.

Instalação de Pacotes Adicionais

Depois de instalar o Package Control, todos os outros pacotes podem ser instalados através do Package Control. Algumas exceções são pacotes feitos para outros editores como o TextMate. Para abrir o Package Control você pode ir em Preferences -> Package Control mas o correto mesmo é entrar com o atalho no teclado: ctrl+shift+p (Win, Linux) ou cmd+shift+p (OS X). No menu que abrir você pode digitar as seguintes opções:

  • Install Package - para instalar um novo pacote / plugin.
  • Add Repository - para adicionar uma nova fonte de repositório.
  • Remove Package - para remover um pacote já instalado.

Para outros comandos úteis consulte a documentação oficial do Package Control. Agora vamos instalar os pacotes de suporte especialmente úteis para o desenvolvimento WEB, como a lista é grande vou colocar o nome do pacote com um breve comentário. Você deve instalar um pacote de cada vez, abrindo o Package Control, selecionando a opção Install Package e digitando cada nome da lista abaixo:

  • SideBarEnhancements - O sidebar do Sublime é simples, com este pacote você libera uma infinidade de opções como: abrir, apagar, renomear, copiar, colar, procurar em arquivo, move, atualizar, etc.
  • prefixr - Este plugin é super útil para colocar prefixo no CSS3,  para isso vá em edit -> prefixr.
  • fetch - Este pacote é útil para trazer as últimas bibliotecas da Web como JQuery etc. Veja as dicas aqui.
  • JSMinifier - Este pacote serve para você compactar um arquivo javascript.
  • Jquery Snippet - Este é um pacote de suporte que traz pequenos exemplos de códigos do Jquery.
  • twitter bootstrap snippets - Este é um pacote de suporte que traz pequenos exemplos de códigos do Twitter Bootstrap.
  • OpenFolder - Este pacote adiciona a possibildade de abrir uma pasta a partir do sidebar, você dá com o botão direito em cima da pasta escolhe Open  Folder e a pasta é aberta.
  • HTML5 - Suporte ao HTML5.
  • html attibutes - Suporte para os atributos em HTML para completar de maneira automática.
  • Html snipppets - Este traz pequenos exemplos de HTML.
  • brackethighlighter - Este é para destacar a abertura e fechamento de tags, chaves, parênteses, etc.
  • ColorPicker - Este é bem legal, abre uma paleta de cores. No linux e windows para utilizar pressione ctrl+shift+c no MacOS cmd+shift+c.
  • GoToCSSDeclaration - No seu arquivo HTML tem o nome das classes CSS, com este pacote você aperta o comando e ele abre na tela no local correto o arquivo CSS correspondente a classe.
  • DocBlockr - Adiciona blocos de comentários estilo PHP DOC você pode usar em arquivos javascript e css além do próprio PHP.
  • jslint  - Controle de qualidade de código para o javascript.
  • sublime linter - Pacote similar ao JSLint mas para o PHP. Inline error para o PHP.
  • PHPCS - para manter o padrão no código PHP.

Instalação de Outros Pacotes

Existem outros pacotes interessantes que merecem um artigo específico, caso você tiver pressa pode procurar por Zen Coding o antigo Emmet. Você pode instalar ainda o SublimeCodeIntel que deve ser feito de  forma "manual", você vai clonar o projeto com este comando dentro da pasta de pacotes do sublime:

git clone git://github.com/SublimeCodeIntel/SublimeCodeIntel.git
Depois você deve ir no gerenciador de pacotes do Sublime, procure por SublimeCodeIntel e isntale. Este pacote possui muitas funcionalidades como por exemplo ele pode indexar todo o seu projeto como os métodos e fornecer um completador automático.

Última Dica

Você pode dar uma tunada no completador de códigos do Sublime. Para isso você pode reprogramar a tecla para completar nomes de variáveis, funções entre outros, a exemplo da linha de comandos do Linux. Para isso você deve ir em Preferences -> Settings - Default. No arquivo de opções que abrir você vai procurar por "auto_complete_commit_on_tab" e "auto_complete_with_fields" e vai passar os dois para "true". Salve e pronto.

Finalmente caso você não gostar do esquema de cores, do fundo preto etc, você pode escolher outro em indo em Preferences -> Color Scheme. Além dos esquemas de cores disponíveis você pode baixar outros e instalar.

Nos próximos artigos eu vou dar mais dicas sobre o Sublime fique ligado. Caso você tenha alguma dúvida deixe um comentário.

  • Victor Magalhaes

    Muito bom!
    Guardei até nos favoritos 🙂

  • Fernando Savio

    Muito bom!
    Só tenho uma correção. No artigo está escrito para procurar por “Zen Coding” o antigo “Emmet” quando é justamente o contrário. O nome atual é “Emmet”.
    http://docs.emmet.io/

    Parabéns, pelo artigo.

  • Gabriel Madeira

    Continuo perdido nesse quesito. Tenho o Sublime 3 já instalei os pacotes pelo Package Control mas nao sei como acessar os plug-ins. Exe: instalei um plug-in para verificar a sintaxe do Ruby ao salvar ele consta lá mas nao funciona. Nao sei o que tenho que configurar para fazer esses plugins funcionarem. Alguem pode me dar uma luz ??

  • Miguel Lopes

    Muito bom parabéns sou desenvolvedor web estou a utilizar o sublime e estou a gostar se quiserem conhecer o meu trabalho visitem imagingsitesworldwide.com

  • Rafael

    Muito bom, me salvou hehe

  • Henrique Lopes

    Instalei aqui mas travei na hora de instalar os pacotes adicionais, alguém pode me dar um help? Vlw

  • Adilson Calixto Dos Santos

    Amigão show de bola esse tutorial seu. Bem elaborado.

  • João Sérgio Pero Motta

    Uma perguntinha…como ter a opção de escolher o navegador para testar a edição?