30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Web Design
  2. Sublime Text
Webdesign

Atalhos Uteis Para Otimizar seu Workflow no Sublime Text 3

by
Difficulty:BeginnerLength:ShortLanguages:

Portuguese (Português) translation by thierry rene matos (you can also view the original English article)

O Sublime Text 3 possui vários atalhos para programadores modernos. Vamos dar uma olhada nos principais comandos que eu acho que podem ajudar a otimizar seu workflow. Vamos aprender a utilizar atalhos básicos, trabalhar com projetos e manipular abas sem sequer utilizar o mouse.

Trabalhando com Projetos (projects)

Conheço várias pessoas que não utilizam esse ótimo recurso. Qual seria o processo atuando em um projeto? Talvez algo parecido com:

  1. Abrir o Sublime Text
  2. Opção abrir do menu
  3. Procurar o projeto
  4. Arrastar a pasta para o editor
  5. Procurar os arquivos, abrir, e então
  6. Começar a desenvolver.

Digamos que você trabalhou ontem a tarde em um arquivo e deseja retomar o trabalho de onde parou. O workflow que mencionei não é nem um pouco eficiente, então deixe-me apresentar este recurso do Sublime Text, que fica na barra do menu:

Criando seu primeiro Projeto

Cada projeto tem seu próprio arquivo de configuração, então antes de começar precisamos de um lugar para salvar os arquivos. Comece criando uma pasta, do jeito que você está acostumado a fazer, de nome sublime-projects (por exemplo).

Após, inicie um novo projeto, como de costume, criando um novo arquivo ou pasta no Sublime. Agora, vá até a opção do menu Project > Save Project As... aponte a pasta que criamos, no caso a pasta sublime-projects, de ao seu projeto um nome e salve.

Solicitar lista de projetos salvos

Para acessar uma lista com todos os projetos anteriores utilize o atalho CMD-CTRL-P. Escreva no campo de busca para filtrar a lista, de acordo com o nome do projeto, pressione enter na opção do projeto e imediatamente a pasta do projeto com arquivos é apresentada na sidebar do Sublime.

Você vai se deparar com seu projeto aberto, com as abas e os arquivos que você estava editando na ultima vez que atuou no projeto.

Atuar em diferentes projetos fica mais fácil dessa maneira.

Procurando arquivos dentro de projetos

Creio que esse recurso seja o que mais salva tempo no Sublime. Escrever é melhor que clicar quando se trata de procurar arquivos, então, com o projeto aberto, pressione CMD-P e comece a escrever!

Manipulando Tabs

As Tabs são uma maneira bem interessante de ter uma visão do estado do projeto. Muitas das vezes você vai utilizar uma tab para arquivos HTML, outra para CSS e as vezes uma para JavaScript. Com esse atalho é possível criar tabs mais rápido:

  • CMD-2 - adiciona duas tabs
  • CMD-3 - adiciona três tabs
  • CMD-4 - adiciona quatro tabs

Agora vamos navegar entre essas tabs:

  • CMD-ALT-ESQUERDA - avança uma tab
  • CMD-ALT-DIREITA - volta uma tab

Seleção

Não sou um fã de seleção com mouse - é muito complicado e lento. Por exemplo, comece do inicio de uma palavra, agora segure a tecla do mouse e solte após selecionar toda a palavra. A maioria das vezes você não tem a seleção que deseja. Utilize os seguintes atalhos e não se fruste!

Encontre todas as palavras declarada na seleção

Uma por uma:

Selecione qualquer palavra, e encontre palavras iguais pressionando CMD-D.

Todas de uma só vez:

Denovo, selecione uma palavra, e agora pressione CMD-CTRL-G para encontrar todas as palavras iguais no texto.

Selecionar linha por linha

Aqui selecionamos uma linha inteira, e podemos selecionar as próximas linhas, completas, pressionando o comando CMD-L.

Selecionar todos os derivados/filhos

Clique em um elemento que tenha derivados. Depois, pressione CMD-SHIFT-J e todos os elementos derivados são selecionados.

Outros formas de ganhar tempo

Mais atalhos que eu utilizo para otimizar o meu trabalho.

Ir direto a uma função

Para pesquisar uma função no arquivo em questão pressione o comando CMD-R e entre com o termo referente a função no campo de pesquisa para encontra-la no documento.

Copiar toda linha

Clique na linha que você deseja copiar e pressione o comando CMD-SHIFT-D. Agora você tem uma linha duplicada, idêntica, logo em seguida.

Trocar linhas

Pressione CMD-CTRL-↓ ou CMD-CTRL-↑ para trocar a posição de uma linha, para cima ou para baixo.

Fechando tags

Digamos que você declarou uma tag <span> e não quer fecha-la manualmente, então basta pressionar o comando CMD-ALT-.. Outro método é escrever o nome da tag, sem abrir nem fechar a tag, e pressionar a tecla TAB.

Ativar ou desativar a Sidebar/barra lateral

O Sublime Text também tem um atalho para ativar ou desativar a sidebar. Pressione os comandos CMD-K-B para alternar entre os controles.

Multiplos cliques de ação

Cria vários cliques

Você precisa de mais de um clique na tela para executar a mesma ação? Então segure a tecla CMD e clique no outro local que você precisa selecionar. Você pode repetir o processo e gerar quantas seleções desejar.

Arraste para criar vários cliques na tela

Para a primeira técnica você precisa clicar em todos lugar onde você deseja selecionar. Então identificamos a necessidade de selecionar outro elemento alinhado verticalmente. Não clique em cada um separadamente, ao invés disso pressione ALT e então, com o botão direito do mouse pressionador, selecione movendo o cursor para cima ou para baixo.

Plugin para escritores: Markdown Preview

Pessoalmente, eu utilizo Markdown no Sublime Text, mas para começar não temos nem um preview do documento. Eis que surge uma solução, chamada Markdown Preview.

Para instalar, vá até seu editor, o Sublime Text no caso, pressione as teclas CMD-SHIFT-P para abrir o gerenciador de pacotes Package Control: Install Package, e então procure por Markdown Preview e pressione enter para instalar.

Agora, abra seu arquivo Markdown, execute o comando CMD-SHIFT-P novamente e procure por Markdown - Você deve encontrar um item chamado Markdown Preview: Preview in Browser. Clique nesta opção e seu principal navegador vai abrir uma janela com o preview do arquivo markdown.

Plugins indispensáveis: Hayaku

Esse plugin te ajuda a escrever CSS mais rápido e adiciona alguns recursos de auxílio. O Hayaku pode ser comparado ao Emmet, com mais recursos especialmente para propriedades CSS.

Abreviação de valores CSS

Aqui temos alguns exemplos de abreviação de valores e propriedades criados com o Hayaku (pressione TAB para executar cada um):

  • por position: relative;
  • mt10 margin-top: 10px;
  • cF color: #FFF;
  • brr background-repeat: repeat;
  • tdn text-decoration: none;

Aumente & diminua os valores com o teclado

É impossível utilizar o teclado para aumentar ou diminuir valores numéricos. Para tal, coloque o cursor do mouse em um número e utilize os seguintes atalhos.

  • Aumente ou diminua os valores entre 0.1: ALT-CTRL-↑ ou ALT-CTRL-↓
  • Aumente ou diminua os valores entre 1: ALT-↑ ou ALT-↓
  • Aumente ou diminua os valores entre 10: ALT-SHIFT-↑ ou ALT-SHIFT-↓

Considerações finais

Todos deveriam aprender a utilizar os atalhos das aplicações que utilizam! Se você ja se frustou alguma vez de tanto repetir as mesmas tarefas, procure formas para otimizar seu trabalho. Se encontrar alguma solução, dedique tempo para estudar a sua viabilidade; o retorno será muito gratificante.

Quais são os seus atalhos preferidos do Sublime Text 3? Quais você utiliza diariamente?

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.