No texto sublime, como você atalho para escrever código?

9

Peço desculpas, mas não sei como é chamado, se isso foi solicitado ou para qual site Stack é mais adequado. Eu já 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 rapidamente na minha codificação.

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

div.classe criará <div class="class"></div>depois tab.

sublime-text-2 DᴀʀᴛʜVᴀᴅᴇʀ
fonte
Você também pode criar seus próprios snippets personalizados; docs.sublimetext.info/en/latest/extensibility/snippets.html
Abdessamad Idrissi
O link acima não é mais válido. Existe um link oficial que indique como criar nossos próprios snippets personalizados?
anjanesh

Respostas:

11

O recurso que você descreve faz parte do Sublime Text 2 pronto para uso. Verifique se o documento usa a sintaxe HTML ( Exibir »Sintaxe» HTML ).

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

Daniel Beck
fonte
Existe alguma documentação sobre como criar atags e algo parecido li? Isso é apenas para HTML? e +1.
DᴀᴅᴇʀVᴀᴅᴇʀ 23/01
@ Gramps Não sei ao certo o que você quer dizer, mas observe que eu apontei o script onde esse recurso é implementado (selecione o item de menu Procurar Pacotes ... para ir para o diretório mencionado). Você pode, por exemplo, estender o script existente para suportar, por exemplo, separadores adicionais. Os scripts Sublime Text 2 são implementados no Python, aqui está a documentação do Python , e esta página contém a documentação específica para o Sublime Text 2. #
227 Daniel Daniel
Eu vi alguém fazer, div#main.containermas Sublime cospe um mainelemento com uma classe de containerquando eu tento?
Tc14 /
7

Emmet / Codificação Zen

O Emmet é um plug-in no qual você escreve a estrutura básica de 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.


(fonte: smashingmagazine.com )

Esta Revista Smashing tem um artigo . Por exemplo,

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

expandirá com Tabpara

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

Quebrar seleção em tags

O que você também pode fazer é pressionar AltShiftWpara criar uma marca aberta ou envolver a seleção atual em uma marca (consulte Editar »Marca» Agrupar seleção atual na marca ).

Por padrão, ele criará:

<p></p>

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

Pressionar Tabainda mais você entraria na tag. Ou, se você pressionar Space, poderá criar atributos, por exemplo:

  • AltShiftW(no Windows / Linux) ou CtrlShiftWno OS X
  • A
  • Space
  • Digite href="...", entãoTab
  • Resulta <a href="..."></a>com o cursor posicionado dentro da tag
slhck
fonte