Em Sublime Text, como você corta o código de escrita?

Question

Minhas desculpas, mas não sei o que é chamado, se isso foi solicitado ou qual site do Stack é mais adequado. Eu vi vários vídeos sobre como as pessoas usam o Sublime para criar tags mais rápidas e gostaria de aprender a maneira correta de fazer isso se houver alguma documentação ou o que eu posso fazer mais rápido na minha codificação.

Em vários vídeos, vejo pessoas fazendo coisas como:

div.class e criará <div class="class"></div> após tab .

    

Answer 1

O recurso que você descreve faz parte do Sublime Text 2 fora da caixa. Certifique-se de que seu documento usa a sintaxe HTML ( Visualizar »Sintaxe» HTML ).

Digite foo.bar , pressione Tab e você receberá <foo class="bar"></foo> . Há também foo#bar (para id em vez de class ). Ambos são implementados em Packages /HTML/html_completions.py .

    

Answer 2

Emmet / Zen-Coding

Emmet é um plugin onde você escreve a estrutura básica de uma maneira semelhante ao seletor de CSS e faz com que o editor a expanda. Você pode encontrar o pacote no GitHub e instalá-lo através do gerenciador de pacotes.

EstarevistaSmashingtem um artigo sobre isso . Por exemplo,

(.foo>h1)+(.bar>h2)

expandirá com o Tab para

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

Agrupe a seleção em tags

O que você também pode fazer é pressionar Alt Deslocar W para criar uma tag aberta ou agrupar a seleção atual em uma tag (ver < em> Editar »Tag» Enrole a Seleção Atual em Tag ).

Por padrão, ele criará:

<p></p>

com o nome da tag selecionado para que você possa sobrescrevê-lo.

Pressionar a tecla Tab também o colocaria dentro da tag. Ou, se você pressionar Espaço , poderá criar atributos, por exemplo:

• Alt Deslocamento W (no Windows / Linux) ou Ctrl Deslocamento W no OS X
• A
• Espaço
• Digite href="..." e, em seguida, a guia
• Resultados em <a href="..."></a> com o cursor posicionado dentro da tag