Rafael Casachi

Configurando um ambiente de desenvolvimento com Sublime Text 3 em 8 passos

Configurando um ambiente de desenvolvimento com Sublime Text 3 em 8 passos
24 de agosto de 2016 15:57 | 0 Comentários

Sublime Text é um editor de texto sofisticado e simples que ficou famoso entre usuários e desenvolvedores Web. Neste tutorial, irei ensinar como configurar um ambiente de desenvolvimento com esta ótima ferramenta.

1 – Download do Instalador

- Acesse https://www.sublimetext.com/3
- Clique na versão do seu sistema e inicie o download:

2 – Instale o Aplicativo

- Execute o instalador.
- Clique em Next.
- Selecione a pasta onde será instalado o Sublime (recomendado deixar a pasta padrão) e clique em Next
- Na próxima etapa, selecione a checkbox “Add to explorer context menu”, para adicionar um item de menu quando você clicar com o botão direito do mouse sobre um arquivo. Clique em Next.
- Clique em Install e aguarde a instalação.
- Clique em Finish.

3 – Instalando o Sublime Package Control

- O Sublime Package Control permite instalar os temas e plugins para o editor. Para ter mais informações acesse o site https://packagecontrol.io/.
- Abra o Sublime Text 3.
- Abra o console (digitando Ctrl+’ ou View > Show Console).

- Digite o seguinte código:

import urllib.request,os,hashlib; 
h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; 
pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); 
urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); 
by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); 
dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Este código cria a pasta Installed Packages para você (se necessário), e então baixa o pacote Control.sublime-package dentro da pasta criada.

*Caso o código acima estiver gerando algum erro, acesse diretamente o website:https://packagecontrol.io/, clique em Install Now e copie o código apresentado.
- Reinicie o Sublime Text 3.

4 – Instalando Material Theme

- Vamos falar a verdade... a maior vantagem de usar uma IDE é personalizar conforme o seu gosto. Então para isso utilizaremos o pacote de temas do Material Theme (http://equinusocio.github.io/material-theme/).
- Vamos instalar o Material Theme através do Package Control, para isso Pressione Ctrl + Shift + p.
- Digite “install package” e tecle enter.
- Aguarde carregar os repositórios.
- Procure por Material Theme.
- Aguarde a instalação do pacote.
- Para ativar o tema: Clique em Preferences > Setting – User
- Adicione as seguintes linhas:

"theme": "Material-Theme-Darker.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",


- Adicione também algumas linhas de configuração opcional:

"overlay_scroll_bars": "enabled",
"line_padding_top": 3,
"line_padding_bottom": 3,
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
"indent_guide_options": [ "draw_normal", "draw_active" ], // Highlight active indent
"font_options": [ "gray_antialias" ], // For retina Mac

5 – Trabalha com Git? Vamos configurar no Sublime Text

- Vamos instalar o GitGutter que permite indicar a área foi modificada, inserida ou deletada.
- Via Sublime Control: Pressione Ctrl + Shift + p.
- Digite “install package” e tecle enter.
- Aguarde carregar os repositórios.
- Procure por GitGlutter
- Aguarde a instalação do pacote e pronto.
- Agora, vamos instalar o Sublime Text Git, para poder controlar os repositórios.
- Via Sublime Control: Pressione Ctrl + Shift + p.
- Digite “install package” e tecle enter.
- Aguarde carregar os repositórios.
- Procure por Git
- Aguarde a instalação do pacote e pronto.

6 – Personalizando o acesso as pastas e outros arquivos

- Para não precisar ficar mais procurando em várias pastas qual o arquivo necessário para incluir no seu código, usaremos o AutoFileName.
- Via Sublime Control (Ctrl+Shift+p), instale o pacote AutoFileName.
- Se você quiser deixar ainda mais fácil a utilização, poderá adicionar as linhas abaixo ao Preferences > Setting – User. (Caso não deseje, poderá acessar os arquivos clicando em Ctrl+Space):

"auto_complete_triggers":
[
 {
  "characters": "<",
  "selector": "text.html"
 },
 {
  "characters": "/",
  "selector": "string.quoted.double.html,string.quoted.single.html, source.css"
 }
]

- Para que o Sublime Text possa encontrar métodos ou outros itens em outros arquivos, você pode installar o plugin Sublime All Autocomplete.
- Via Sublime Control (Ctrl+Shift+p), instale o pacote All AutoComplete. 

7 – Fanático por Snippets? Aqui vai dois ótimos:

- Ótimo snippet para web developers é o Emmet (http://emmet.io/), via Sublime Control (Ctrl+Shift+p), instale o pacote Emmet.
- Reinicie o Sublime Text.
- Cansado de fazer documentação na mão, o plugin DocBlockr vai cuidar disso para você. Para instalar, acesse via Sublime Control (Ctrl+Shift+p), instale o pacote DocBlockr.

8 – Cansado de decorar os códigos das cores?

- ColorPicker irá ajudar a selecionar mais facilmente as cores.
- Instalando via Sublime Control (Ctrl+Shift+p), instale o pacote ColorPicker.
- Para buscar uma cor, apenas pressione Ctrl+Shift+C:

Conclusão

Pessoal, existem muitos outros plugins, mas esses são os básicos para facilitar a vida de qualquer programador. Abraços e até a próxima.

Não seja chato, deixe seu comentário:

Veja outros comentários:

Ninguém comentou ainda. Corra e seja o primeiro.