Introdução ao Sublime Text (editor de códigos para web)

Atualmente o Sublime Text é um dos editores de códigos que mais vem ganhando popularidade no mundo do desenvolvimento. Neste post vamos apresentar algumas dicas e truques que você pode executar no sublime text para melhorar sua experiência enquanto programa.

Introdução

O Sublime Text a primeira vista pode parecer bem comum apesar do seu visual padrão chamar bastante a atenção, porém por trás de toda essa simplicidade, se esconde um editor de código super avançado e versátil.

Atualmente o editor se encontra na versão 2.0.2 e existe uma versão BETA 3.0 disponível para download.

O programa conta com uma série de recursos, em sua maioria, configuráveis. Usuários mais experientes podem configurar o programa com parâmetros para minimizar muito de seus pequenos trabalhos, como por exemplo salvar um documento em aberto toda vez trocar de janela no sistema.

Dicas e truques para o Sublime Text 2

Obs.: todas as dicas apresentadas também funcionam na versão beta.

Auto save quando perder o foco do programa

Acostumado a utilizar o crtl+s para salvar arquivo toda vez que modifica alguma informação no código?
Você pode automatizar esse processo com o Sublime Text com esse processo, que é perfeito pra quem trabalha com alteração de estilos e precisa sempre testar cada modificação de código no navegador.

No menu Preferences clique em Settings – User

O programa vai abrir uma janela bem similar a um arquivo CSS:

Sublime Text

Dentro das chaves { }, insira o código:


"save_on_focus_lost": true

Agora toda vez que você alternar da janela do editor para outra janela o editor automaticamente vai salvar seu documento bastando apenas atualizar o navegador para notar o resultados alterados no código.

Colar e indentar

Com a possibilidade de programar as nossas configurações através de linha de comando, o Sublime Text oferece um leque de customização que depende da criatividade e necessidade dos usuários. Nesse exemplo apresentamos como colar e automaticamente indentar o código no editor para evitar ter que indentar o mesmo manualmente toda vez que colarmos um código.

No menu Preferences clique em Key Bindings – User

O programa vai abrir uma janela parecida com a do exemplo acima, provavelmente sem nenhum parâmetro, apenas com as chaves { } declaradas.

Adicione o seguinte código entre as chaves:

{ "keys": ["ctrl+v"], "command": "paste_and_indent" },
{ "keys": ["ctrl+shift+v"], "command": "paste" }

Pronto!
Agora toda vez que você copiar e colar um código no sublime utilizando ctrl+v o programa automaticamente vai indentar o texto.

Personalizando atalhos

Digamos que seu código em uma certa parte está desalinhado e você precisa alinhar porém são muitas linhas de código. O Sublime Text te ajuda indentar esse código porém não existe um atalho no teclado que faça isso, até agora!

No menu Preferences clique em Key Bindings – User

Adicione a seguinte linha de comando, do mesmo modo que o exemplo anterior:


{ "keys": ["super+shift+r"],  "command": "reindent" }

Marcação de alteração de arquivo mais óbvia

O sublime marca com um circulo ao invés do “x” para fechar o arquivo quando ele sofre alguma alteração na sua linha de comando, como na imagem:

Sublime Text example

Vamos tornar essa marcação um pouco mais óbvia.

No menu Preferences clique em Settings – User – adicone uma virgula no final da linha de comando existente e insira o código abaixo:

"highlight_modified_tabs": true

Vamos obter o seguinte resultado:

Sublime Text examplo 2

Essa marcação pode variar de acordo com o tema utilizado no editor, no meu caso estou utilizando o tema Monokai.

Palleta de comandos

O sublime tem um recurso chamado command pallet, que é uma caixa onde você entra com determinado comando para executar determinada ação do programa, no caso quase tudo você pode operar via comando.

Pressionando as teclas Ctrl+Shift+P o programa vai apresentar o seguinte menu:

Sublime Text Command Pallete

Nesse menu, você pode inserir diversos comando que acessam diretamente opções do sistema como por exemplo acessar as preferências, visualizar menu lateral, abrir um novo arquivo, salvar arquivo, praticamente tudo que você faz clicando em algum botão do sistema você pode executar via linha de comando neste menu.

Tente abrir o menu e entrar com o comando: sidebar + ENTER

O programa abre o menu lateral que mostra as pastas de projetos mapeadas, muito mais prático do que procurar a opção no menu pois sabemos o nome dela.
Desenvolvedores mais experientes vão notar que os nomes dos comandos são padrão, então basta tentar localizar as funções baseadas no comando que você tem em mente.

Considerações finais

O Sublime Text é um editor de código incrível que está ganhando cada vez mais adeptos por ser simples, prático, leve e funcional além de ser muito exótico, vale a pena testar mesmo porque o programa é gratuito, o desenvolvedor só pede que se possível contribua com o programa.

Qualquer duvida, encaminhe um comentário.

🙂

  • Thiago

    Olá, já uso há um tempo o editor netBens, queria começar a usar o sublime. Por isso faço a pergunta: existe algum plugin que crie um botão para executar um projeto automaticamente no Sublime, de modo que eu não precise ficar digitando na URL o projeto toda vez que quiser testar uma página?
    Obrigado.

    • Olá Thiago, existe sim, se o que eu entendi for algo como você ter a atualização automática do código no navegador conforme trabalha. É um plugin para o sublime chamado Live Reload, disponível neste link: https://sublime.wbond.net/packages/LiveReload
      Vale a pena começar a usar o Sublime Text, tudo indica que ele é o futuro para IDEs locais, basta vez que a concorrência já está correndo atrás do prejuízo para lançar ferramentas que batam de frente com ele. 🙂

    • Olá Thiago, existe sim, se o que eu entendi for algo como você ter a atualização automática do código no navegador conforme trabalha. É um plugin para o sublime chamado Live Reload, disponível neste link: https://sublime.wbond.net/packages/LiveReload
      Vale a pena começar a usar o Sublime Text, tudo indica que ele é o futuro para IDEs locais, basta vez que a concorrência já está correndo atrás do prejuízo para lançar ferramentas que batam de frente com ele. 🙂

  • Thiago

    Parabéns pelo Post! Continue assim.

    • Muito obrigado Thiago! Qualquer coisa estamos ai! 😉

  • Kethellin Senaa

    como faço para executar um projeto, para ver como estão ficando as alterações feitas?

  • Brunny Augusto

    como faz para identar para esquerda selecionando mais de uma linha?