Faaala galera, como prometido, na verdade maaaais ou menos como prometido, já que era pra ser uma video-aula de Sublime, mas tá valendo. Neste post vou falar da instalação do Sublime, do Package Control e sobre o Emmet, um plugin que quebra árvores *–*, então apertem os cintos que a viagem vai ser turbulenta Zehahahahahaha.
Começa logo BARALHO….
Ok, vamos lá. O negócio é o seguinte: Pra quem não viu meu primeiro post sobre Os melhores Editores para Webdev, clica aí para saber do que estamos falando morô? Mãos a obra.
Instalando o Sublime Text 3
Nós vamos utilizar a versão 3 do Sublime que, apesar de ser versão Beta eu já utilizo a um bom tempo e nunca tive nenhum problema com ela, para fazer download do Sublime clique aqui e faça o donwload de acordo com seu S.O, depois é só instalar normalmente como qualquer outro aplicativo.
O Package Control
Agora começa a parte legal, para que você possa instalar de forma prática qualquer extensão ao Sublime, existe uma ferramenta que agiliza muito este processo, adivinha qual é esta ferramenta???
Nuss você já disse, é o Package Control neah, que cara sem graça….
Isto jovem, o Package Control faz toda a parte chata pra gente, para instalá-lo clique aqui, verifique se a aba ativa está em SUBLIME TEXT 3, copie o código dentro da caixa, abra o Sublime(caso ainda não o tenha feito), pressione Ctrl+` ou no menu View->Show Console, cole o código que você havia copiado e pressione ENTER. Pronto, agora que você instalou o Package Control acredito que deseja saber como utilizá-lo, para abrir o Package Control pressione Ctrl + SHIFT + P e em seguida digite install, você verá que o item marcado é o Package Control: Install Package, agora pressione ENTER e você verá uma lista de extensões para você adicionar ao Sublime(lembrando que para ver a lista você deverá estar conectado a Internet). Neste ponto há um mundo de coisas que você pode instalar no Sublime como: Temas, Plugins, Snippets, etc, etc e etc. Então agora com tudo instalado, que comece a zuera :v
huehuehuehuehuehuehuehuehuehuehue
Emmet
O Sublime possui uma gama imensa de plugins, hoje eu vou falar do Emmet, para instalá-lo, abara o Package Control(Ctrl+SHIFT+P, depois install) e na lista de extensões digite Emmet e instale o Emmet provavelmente a primeira opção, filé do boi, agora com o Emmet instalado vamos ver como ele funciona.
Site oficial do Emmet: Clique aqui
O Antigo ZenCoding, hoje Emmet, é um plugin que gera códigos baseado em pequenos atalhos(snippets) que você digita no Sublime, por exemplo: Em um arquivo HTML digite lorem e em seguida aperte TAB e você terá:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla optio ab delectus nesciunt alias sint velit ea illum unde necessitatibus sit totam labore quisquam corporis, quasi esse, hic libero aliquid.
Neh, agora você já viu que dá pra fazer uns paranauê muito fera com este plugin, então segura essa, digite um dos códigos abaixo em um arquivo HTML em branco e aperte TAB:
!
OU
!>div#wrapper>header.cabecalho>nav#menu>ul>li*5>a[href="#"]{Item $}^^^^+div.content>section*2^+footer>nav>>ul>li*6>a[href="#"]{Item $}
Mas que bruxaria foi essa?
Loko neh? Este é o verdadeiro poder do Emmet, veja abaixo uma mini lista explicando os Caracteres chave dele:
# Cerquilho
O caractere ”#” (cerquilho) determina que a palavra seguinte será o atributo id da tag que vem antes do símbolo, veja o exemplo:
div#div-id
<div id="div-id"></div>
. Ponto
O ponto é a mesma coisa que o cerquilho, porém ele diz que o atributo a seguir vai ser uma class, exemplo:
header.cabecalho
<header class="cabecalho"></header>
* $ - Asterisco e Cifrão
O Asterisco(”*“) funciona como um multiplicador, o que ele faz é multiplicar o elemento que o antecede pelo número que vem depois dele, e o Cifrão(”$“) serve como variável guardando o contador de itens do Asterisco, exemplo:
li{Item $}*5
<li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li>
[] {} Colchetes e Chaves
Eles servem para especificar atributos e conteúdo de um elemento, exemplo:
a[href=”/contato”]{Entre em Contato}
<a href="/contato">Entre em Contato</a>
> Maior que
O caractere ”>” diz que o próximo elemento será filho do elemento que vem antes do símbolo, veja o exemplo:
header.cabecalho>nav
<header class="cabecalho"><nav></nav></header>
+ Sinal de Adição
O caractere ”+” diz que o próximo elemento estará no mesmo nível hierárquico que o elemento que vem antes do símbolo, veja o exemplo:
header+div+footer
<header></header><div></div><footer></footer>
^ Circunflexo
O circunflexo tem a função de subir uma casa na cadeia hierárquica, exemplo:
div>header>nav^footer>nav
<div>
<header>
<nav></nav>
</header>
<footer>
<nav></nav>
</footer>
</div>
Obs: No caso acima, percebe-se que div é pai de header que é pai de nav, porém, como footer não é filho de header precisamos subir o mesmo número de casas que descemos para criar o nav, ou seja, uma, por isso apenas um ^, caso fossemos subir ao nível de div teríamos que escrever dois ^, exemplo:
div>header>nav^^footer>nav ficando assim:
<div><header><nav></nav></header></div><footer><nav></nav></footer>
Bom, por enquanto é só, hoje vou acabar por aqui se não o post ficará gigantesco, porém prometo que assim que tiver um tempo farei uma vídeo-aula mais afundo sobre o Sublime, e se tiverem interesse em saber mais atalhos do Emmet acessem o link da documentação aqui e sejam felizes, espero que tenham gostado e qualquer dúvida não hesitem em postar nos comentários, até.
Já vai tarde, hueheuehuheuhe zuera, valeu vou treinar aqui.
comments powered by Disqus