Esta contribuição está participando do sorteio da Mochila Targus Matrix. Envie seu texto e participe você também, você contribui com outros usuários e ainda pode faturar uma mochila novinha em folha para o seu laptop. Saiba mais sobre como participar.
Sobre o Autor:
Evandro Pastor
QuartoEstudio.com
http://quartoestudio.com/blog
Você conhece o termo snippets?
Um snippet é um bloco de código que é ativado por atalhos de teclado ou por uma sequência de letras. Uso muito esse recurso para criar páginas HTML pois economiza um bocado de tempo, já que muitos códigos são repetidos muitas vezes.
Vou ensinar como trabalhar como trabalhar com snippets usando o Gedit. Pra quem não conhece, o Gedit é um editor de texto que faz parte do Gnome Desktop. Se o Gedit não esteja instalado no seu seu sistema, é só digitar no terminal:
#apt-get install gedit
Os snippets funcionam como um plugin para o Gedit e não vem instalado por padrão. Para instalar esse plugin é só digitar no terminal:
#apt-get install gedit-plugins
Após instalado, abra o Gedit e vá em Editar depois em Preferências. Aberta a janela de preferências vá na aba Plugins. Chegando lá procure pelo plugin Chamado “Trechos”. Ative o plugin. Feche a janela
Para editar o plugin selecione o plugin e clique no botão “Ferramentas” e depois “Configurar Trechos”. Em seguida será mostrado uma janela de Configuração de trechos.
Do lado direito dessa janela estão alguns snippets pré-configurados organizados por tipo de linguagem. Do lado esquerdo da janela teremos um editor de texto e logo a baixo temos a parte de ativação dos snippets compost por tres linhas, mas só iremos trabalhar com duas delas:
Ativador de aba: aqui colocamos o texto que servirá de gatilho para ativar o snippet.
Tecla de atalho: caso queira utilizar uma tecla de atalho para ativar o snippet use essa opção.
Voltando a tela de Trechos, selecione a linguagem HTML. Ao selecionar, você verá uma série de snippets prontos. Alguns deles são com teclas de atalho outros com uma sequencia de letras… Vamos ver um deles: abra o snippet “Heading”. A configuração desse snippet é assim:
${3:$GEDIT_SELECTED_TEXT}
$0
Não se preocupe com essas linhas agora. O que nos interessa é o que está escrito no ativador de aba. No caso desse snippet o ativador é a letra “h”.
Feche o editor.
Usando os snippets:
Para usar os snippets faça o seguinte:
1) abra e salve um documento, nesse caso, um documento html. Exemplo: teste.html
2) no editor digite o nome do snippet e em seguida aperte a tecla TAB. Ao fazer isso o trecho de código aparecerá como mágica no editor de texto.
Para usar os snippets que já estão configurados no Editor de Trecho é só descobrir qual é o gatilho que o ativa.
Criando snippets:
Apesar de existirem muitos snippets prontos, iremos precisar um dia de criar os nossos proprios trechos de código. Vou mostrar como criar um.
Selecione na parte “Trehos” do Editor de Trechos a linguagem HTML, depois clique no botão abaixo chamado “create new snippet”. Digite um nome para o snippet:
“Div de Classe”
Depois vá para o espaço ao lado, cole o codigo abaixo:
${0}
Não se preocupe com o significado disso agora… Feito isso vá na parte Ativação e digite na linha “Ativador de Aba” o seguinte:
classe
Feito isso feche o Gerenciado de Trechos.
Para usar nosso novo snippet abra um novo documento em nosso editor e salve ele com o nome teste2.html.
No editor digite:
classe
E aperte tab. O que ira aparecer é isso:
Agora é só usar tab para percorrer e preencher os campos. Não entendeu? Votando um pouco, vamos explicar aquela linha esquisita:
