Open in app

Sign in

Write

Sign in

Configurando o Sublime Text 3 para Desenvolvimento Web

Rafael Casachi
4 min readJul 10, 2019

Nesse tutorial, vou escrever uma nova versão do artigo escrito anteriormente aqui no medium para atualizar alguns plugins interessantes para turbinar o seu Sublime.

THE Sublime! rsrs

Baixando e instalando o editor

Se você não viu aqui, vai um resumão e uma atualização de como instalar esse top editor. Acesse o site https://www.sublimetext.com/3 e ali você vai ter a instrução básica para instalar o Sublime no seu sistema operacional.

Após a instalação do seu novo editor, o próximo passo é instalar o seu novo amiguinho que vai ajudar a baixar os pacotes para personalizar o Sublime, o Sublime Package Control. Diferente do trabalho que dava anteriormente, para instalá-lo atualmente, simplesmente:

  • Tools > Install Package Controll…

Depois disso, você consegue instalar qualquer pacote do https://packagecontrol.io/ apenas teclado o atalho Ctrl+Shift+P > Install Package > Digitando o nome do pacote.

Personalizando o seu sublime

Tendo o Sublime Package Control instalado, personalizar o Sublime Text é fácil. Existem vários temas disponíveis. Diferente do que usamos no artigo anterior (Material Theme), vamos utilizar o AYU como tema.

  • Ctrl+Shift+P > Install Package > ayu
  • Para ativá-lo: Ctrl + Shift + P > ayu: Activate Theme
  • Escolha entre os temas Light, Mirage ou Dark

AYU possui integração com A File Icon para personalização dos ícones dos arquivos, para instalá-lo basta:

  • Ctrl+Shift+P > Install Package > A File Icon
  • Para personalizar, clique em: Preferences > Package Settings… > A File Icon
Sublime bonitão

Dificuldade com pastas e arquivos novos?

Seus problemas com arquivos novos acabaram, AdvancedNewFile é o plugin para você:

  • Ctrl+Shift+P > Install Package > AdvancedNewFile
  • Por padrão, tecla Windows+Alt+N mostra uma caixa de texto no qual você pode digitar o arquivo ou pasta a ser criado. Exemplo: app/Http/Repositories/User.php
  • Para personalizar a tecla de atalho, vá em Preferences > Package Settings > AdvancedNewFile > Key Bindings - User
  • Adicione o código:

[
{ “keys”: [“ctrl+alt+n”], “command”: “advanced_new_file_new”},
]

Onde ctrl+alt+n é seu novo atalho.

Outro plugin é o All AutoComplete, ele realiza o autocomplete de arquivos abertos dentro do código, precisar ficar mais procurando em várias pastas qual o arquivo necessário para incluir no seu código.

  • Ctrl+Shift+P > Install Package > All AutoComplete

Vamos melhorar o editor?

Cansado de procurar pelo início e fim de parênteses, colchetes e chaves? Aqui vai um plugin para te ajudar: o BracketHighlighter.

  • Ctrl+Shift+P > Install Package > BracketHighlighter
  • Para customizar esse plugin, aqui lista de possíveis configurações.

Quer visualizar as cores de forma mais fácil, aqui vai dois plugins para te ajudar: Color Highlight e o ColorPicker:

  • Ctrl+Shift+P > Install Package > Color Highlight
  • Para configurar, clique em Preferences > Package Settings.. > Color Highlight Setting. Uma dica de configuração é:

{
“user”: {
“gutter_icon”: “square”,
“highlight_values”: false,
}
}

  • Ctrl+Shift+P > Install Package > ColorPicker
  • Para usar o picker, basta apenas pressionar Ctrl+Shift+C.
  • Aqui vai uma configuração que gosto de usar, acesse Preferences > Package Settings.. > ColorPicker > Settings — User:

{
“color_upper_case”: false,
“win_use_new_picker”: true
}

O SideBarEnhancements é um adicional muito útil ao Sublime, com ele você inclui diversas funções na barra de arquivos, além de alguns atalhos do teclado:

  • Ctrl+Shift+P > Install Package > SideBarEnhancements

A inteligência do CodeIntel no Sublime Text facilita nossa vida de desenvolvedor com autocomplete inteligente, navegar entre símbolos e definições (mesmo para outros arquivos), entre outras facilidades:

  • Ctrl+Shift+P > Install Package > SublimeCodeIntel
  • Reinicie o Sublime
  • Configurações que eu recomendo, Preferences > Package Settings... > SublimeCodeIntel > Settings — User:

{
“codeintel_selected_catalogs”: [
“jQuery”, “HTML5”, “Mozilla Toolkit”, “PECL”
],
}

  • Reinicie o Sublime
  • Para usar, Alt+Clique do Botão Direito do Mouse = vai para a definição; Ctrl+Shift+Espaço = ativa manualmente o popup.

SublimeLinter é outra boa opção para ajudar o desenvolvedor:

E o Git? Vamos configurar no Sublime

Vamos instalar o GitGutter que permite indicar a área foi modificada, inserida ou deletada e o Sublime Text Git, para poder controlar os repositórios.

  • Ctrl+Shift+P > Install Package > GitGutter
  • Ctrl+Shift+P > Install Package > Git

E o Terminal? Tem também!

Para auxiliar em comandos via terminal, vamos instalar dois plugins: Shell Exec e Terminal.

  • Ctrl+Shift+P > Install Package > Shell Exec
  • Para os atalhos não darem conflito, acesse Preferences > Key Bindings e inclua a linha:

{ “keys”: [“ctrl+shift+;”], “command”: “shell_exec_open”}

  • Reinicie o Sublime
  • Ctrl+Shift+P > Install Package > Terminal

Ok, louco por snippets? Ai vai uma coleção útil!

HTML:

CSS:

Javascript:

Typescript:

Angular:

Vue:

ReactJS:

Laravel:

Wordpress:

—

Mais algum plugin? Adicione nos comentários.

Mais artigos do #DevArmy acesse aqui.

Sobre o autor: Rafael Casachi

Sublime Text
Plugin
Snippet
Sublime
Web

--

--

Rafael Casachi

Written by Rafael Casachi

25 Followers

Brazilian, fullstack developer, scorpio and supporter of Santos FC. I am passionate about adventure travel, software development and sports.

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams