Go to English Blog

Configurando o Sublime Text 2

Leia em 8 minutos

Sublime Text 2 Depois de quase 6 anos usando o Textmate, chegou a hora de trocar de editor de textos. Embora o Textmate 2 esteja evoluindo aos poucos, eu achei a nova interface horrenda, deixando de lado toda a simplicidade da primeira versão.

Talvez por isso eu tenha ficado no TM1, mesmo com todos os seus problemas, dentre eles vários snippets que simplesmente não funcionavam com o Ruby 1.9, mesmo eu tendo atualizado tudo para as últimas versões, erros de encoding e outros bugs bizarros.

Estes problemas começaram a me atrapalhar ao ponto de querer um novo editor. A alternativa mais óbvia era o Sublime Text 2, que eu já tinha testado, mas que tinha algumas coisas que me irritavam (sidebar na esquerda, bug com quotes e layout de teclado US International,…). Há alguns dias dei mais uma chance e finalmente me decidi por trocar de editor.

Neste artigo você verá como configurei o Sublime Text 2, com alguns plugins e dicas.

Command Palette

O Sublime Text 2 possui o Command Palette, que permite alternar entre sintaxes, executar comandos e snippets, dentre outras tarefas. Ele é o seu melhor amigo, e seu atalho, ⌘+⇧+P, deve estar na ponta dos dedos.

Sublime Text 2 - Command Palette

Instalando plugins

O Sublime Text 2 precisa de alguns plugins que considero essenciais. Primeiro, instale o Package Control, um gerenciador de plugins com suporte ao Github e Bitbucket, além de canais personalizados de instalação.

Depois que você fizer a instalação, pode instalar alguns plugins. Execute a Command Palette e digite “install” para abrir o Package Control. Veja a lista dos plugins que instalei:

Definindo o $PATH

Como uso instalações personalizadas de Node.js e Ruby em caminhos nem sempre definidos pelas extensões, tive que criar um arquivo que fizesse essa definição por mim.

Basta criar um arquivo no diretório $HOME/Library/Application Support/Sublime Text 2/Packages com o conteúdo de sua variável $PATH, como no exemplo abaixo:

import os

os.environ["PATH"] = "./bin:/Users/fnando/local/bin:/Users/fnando/local/node/current/bin/:/Users/fnando/local/ruby/gems/bin:/usr/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
print "PATH=" + os.environ["PATH"]

Esse arquivo é carregado pelo Sublime Text 2, que sobrescreve a definição padrão.

Tema

Faz algum tempo que venho usando um tema claro. Tirando o bla-bla-bla de todo mundo que diz que tema claro fere os olhos (meh), tenho gostado bastante.

No Textmate eu usava o tema Espresso tutti colori, que também está disponível no Sublime Text 2. Você precisará do tema Soda e de uma configuração para definir o esquema de cores.

Primeiro, faça o clone do repositório.

cd ~/Library/Application\ Support/Sublime\ Text\ 2/Packages
git clone https://github.com/buymeasoda/soda-theme.git "Theme - Soda"

Na configurações do usuário (cmd+,), basta adicionar a configuração abaixo:

{
  "theme": "Soda Light.sublime-theme",
  "color_scheme": "Packages/Color Scheme - User/Espresso Soda.tmTheme"
}

Se tudo deu certo, você terá um editor como este:

Sublime Text 2 - Soda Theme

Configurações do editor

O Sublime Text 2 é um editor que permite configurar quase tudo. Você pode explorar as opções padrão usadas pelo editor acessando o menu “Sublime Text 2 > Preferences > Settings - Default”. Todas estas opções podem ser personalizadas através do menu “Settings - User”. Veja as opções que decidi usar:

Configuração de atalhos

Uma das grandes vantagens do Sublime Text 2 em relação ao Textmate é a facilidade de se configurar atalhos de teclado. As definições originais podem ser vistas no menu “Sublime Text 2 > Preferences > Key Bindings - Default”. Veja quais são as configurações que estou usando:

Lembra daquele bug que eu tinha falado sobre aspas e o layout de teclado US International? Uma maneira que consegui resolver este problema foi definindo um atalho de teclado, ⌃+', que pega o texto selecionado e coloca entre aspas. Este atalho já existia, mas definia apóstrofos. Como prefiro aspas, redefini como no exemplo abaixo:

{"keys": ["'"], "command": "insert_snippet", "args": {"contents": "\"${0:$SELECTION}\""}, "context":
  [
    {"key": "setting.auto_match_enabled", "operator": "equal", "operand": true},
    {"key": "selection_empty", "operator": "equal", "operand": false, "match_all": true}
  ]
}

Outro atalho que defini foi para inserir tags ERB como no Textmate:

{"keys": ["ctrl+shift+."], "command": "erb", "context":
  [
    {"key": "selector", "operator": "equal", "operand": "text.html.ruby, source.yaml, source.css, source.scss, source.js"}
  ]
}

Aprendendo atalhos de teclado

Uma das vantagens de se usar um editor como o Sublime Text 2 é você pode fazer muita coisa à partir de atalhos de teclado e snippets. Mas se você não aprender estes atalhos e snippets, perderá grande parte da brincadeira e, acredite, deixará de ser produtivo. Quem me conhece sabe que gosto de aprender o editor de cabo a rabo (e é por isso que não fico pulando de um editor para outro toda hora).

Enquanto decidia se ia usar ou não o Sublime Text 2, fiz uma lista de atalhos que achei interessante. No fim das contas, criei um cheatsheet que contém todos os atalhos que você deve saber de cabeça. Aprenda-os! Você não irá se arrepender.

Sublime Text 2 - Cheatsheet

Faça o download do cheatsheet agora!

Abaixo você pode ver os atalhos interessantes que você deve conhecer.

Exibir/executar completions

Completion é uma das coisas que você não liga muito, mas quando começa a usar, ajuda um pouco. Para exibir uma lista das completions disponíveis, pressione ⌃+space.

Sublime Text 2 - Completions

Para completar palavras presentes no arquivo, você pode simplesmente pressionar ⇥.

Exibir/esconder sidebar

Alguns comandos do Sublime Text 2 precisam de um combo de teclas. É o caso da sidebar. Para alternar entre exibir/esconder a sidebar, pressione as teclas ⌘+K e logo depois ⌘+B.

Normalmente escondo a sidebar quando estou no modo split.

Goto line

Para ir para uma linha específica, basta pressionar ⌃+G.

Sublime Text 2 - Goto line

Goto symbol

Para ir para a definição de um método, classe, ou módulo (na verdade, a definição de definição varia dependendo do tipo de arquivo que você está editando), use o atalho ⌘+R.

Sublime Text 2 - Goto symbol

Goto anything

Para navegar rapidamente entre os arquivos do seu projeto, utilize o atalho ⌘+P. Mas diferente do Textmate, no Sublime Text 2 a busca é feita muito rapidamente, além de o arquivo selecionado ser exibido.

Sublime Text 2 - Goto anything

Split

Uma das funcionalidades do Sublime Text 2 que não existia no Textmate é o split. Você pode criar seus próprios layouts ou usar uma extensão chamada SplitScreen, que permite definir proporções. Se você não quer tanta flexibilidade, pode usar os layouts que já vem por padrão.

Para fazer o split em duas colunas, use o atalho ⌘+⌥+2. Então, para mover arquivos entre os dois panels, utilize os atalhos ⌃+⇧+1 ou ⌃+⇧+2.

Sublime Text 2 - Split 2 columns

Para fazer o split em duas linhas, use o atalho ⌘+⌥+⇧+2.

Sublime Text 2 - Split 2 rows

Para voltar ao layout original, use o atalho ⌘+⌥+1.

Commandline

Se você você usava o Textmate, deve estar se perguntando se existe um substituto para o comando mate. Sim, existe! Mas você precisará criar o link simbólico manualmente.

Abra o terminal e digite o comando abaixo:

ln -s "/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl" /Users/fnando/local/bin/

Lembre-se de alterar o diretório de destino. Para saber quais diretórios são procurados, execute echo $PATH. Escolha um desses diretórios como destino.

Configurando o Alfred

Eu uso o Alfred para tudo, inclusive abrir diretórios direto no Sublime Text 2. Para facilitar esta tarefa, nós iremos criar um script que permite abrir o projeto sem ter que ir até a opção “Open with…”.

Na aba “Extensions”, crie o script abaixo:

Sublime Text 2 - Alfred Script

Agora, basta iniciar o Alfred, encontrar o diretório que você quer abrir e digitar subl.

Sublime Text 2 - Alfred Script

Executando testes no Vagrant

Uma das coisas que sempre me perguntam sobre usar o Vagrant como ambiente de desenvolvimento é como rodar testes direto de seu editor nesta máquina virtual. A resposta simples é que você não consegue.

A resposta mais complicada é que dá para criar builders personalizados que irão executar comandos diretamente na máquina virtual.

Minha primeira tentativa foi conectar com SSH e executar o comando lá. Infelizmente, esta abordagem adiciona 5 segundos no tempo total de execução. A outra maneira foi executar comandos diretamente na máquina virtual usando a command-line do VirtualBox, sem ter nenhuma penalização com a do SSH.

Note que as instruções à seguir se aplicam a uma configuração como a minha, que tem as seguintes características:

Para configurar o Vagrant, você pode fazer algo como o snippet abaixo:

Vagrant::Config.run do |config|
  config.vm.box = "hellobits"
  config.vm.network :hostonly, "192.168.33.2"
  config.vm.share_folder "v-root", "/Users/fnando/Projects", ".", :nfs => true
end

Depois, você precisará criar um arquivo chamado vagrant-run. Este arquivo deve estar em seu $PATH e ser executável.

#!/usr/bin/env ruby
require "json"

VAGRANTFILE = File.expand_path("~/Projects/.vagrant")
USE_BUNDLER = false

def find_working_dir(file)
  working_dir = File.dirname(file)

  while true
    exists = ["spec", "test", "lib", "Gemfile", "node_modules"].find do |dir|
      File.exist?("#{working_dir}/#{dir}") && working_dir !~ %r[/(spec|test)/]
    end

    return working_dir if exists
    return if working_dir == "/"

    working_dir = File.dirname(working_dir)
  end
end

if ARGV.size == 2
  command, file = *ARGV
else
  fail "Invalid builder parameters"
end

working_dir = find_working_dir(file)

if USE_BUNDLER && working_dir && File.exist?("#{working_dir}/Gemfile")
  bundle_exec = "bundle exec"
end

full_command = ""
full_command << "cd '#{working_dir}' && " if working_dir
full_command << "#{bundle_exec} #{command} '#{file}'"

vm_id = JSON.load(File.read(VAGRANTFILE))["active"]["default"]

system <<-SH
  VBoxManage guestcontrol #{vm_id} \
    execute --image /bin/sh \
    --username vagrant --password 'vagrant' \
    --environment 'HOME=/home/vagrant PATH=./bin:/home/vagrant/local/bin:/home/vagrant/local/ruby/gems/bin:/usr/local/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin GEM_PATH=/home/vagrant/local/ruby/gems GEM_HOME=/home/vagrant/local/ruby/gems' \
    --wait-stdout --wait-stderr --wait-exit \
    -- -c "#{full_command}"
SH

Finalmente, você precisará criar os builders personalizados. Isso pode ser feito através do menu “Tools > Build System > New Build System”. Eu criei três builders para executar testes do RSpec, arquivos Ruby em geral e scripts JavaScript com Node.js, mas você pode criar quantos builders quiser. Basta usar uma configuração como esta:

{
  "cmd": ["vagrant-run", "rspec", "$file"],
  "selector": "source.ruby.rspec"
}

Mude o comando para o que você quiser. Se você não quiser sobrescrever os builders originais, pode criar builders apenas para o projeto. Para saber mais como fazer isso, veja a documentação do Sublime Text 2.

Finalizando

No geral, estou bastante contente com o Sublime Text 2. Às vezes me pego executando atalhos do Textmate que, claro, nem sempre funcionam, mas não vai demorar muito até eu me acostumar com os novos atalhos.

Eu comprei a licença do Sublime Text 2, que custa 59USD. Embora você possa usar sem ter que pagar, faça a sua parte e compre uma licença. É uma maneira de mostrar ao desenvolvedor que você aprecia o seu trabalho.

Se você quiser ver minhas configurações, subi meu diretório de configurações no Github: https://github.com/fnando/sublime-text-2.

Updates:

Leia também:
Criando seu próprio encurtador de URLs
Fazendo os seus testes executarem mais rápido