W Sublime Text, jak skracasz pisanie kodu?

9

Przepraszam, ale nie wiem, jak się nazywa, jeśli został o to poproszony lub do jakiej strony stosu jest najlepiej przystosowany. Widziałem kilka filmów o tym, jak ludzie używają Sublime do tworzenia szybszych tagów i chciałbym nauczyć się, jak to zrobić, jeśli jest jakaś dokumentacja lub co mogę zrobić szybciej w moim kodowaniu.

W kilku filmach widzę ludzi wykonujących takie rzeczy jak:

div.classi utworzy <div class="class"></div>po tab.

sublime-text-2 DᴀʀᴛʜVᴀᴅᴇʀ
źródło
Możesz także tworzyć własne niestandardowe fragmenty; docs.sublimetext.info/en/latest/extensibility/snippets.html
Abdessamad Idrissi
Powyższy link nie jest już ważny. Czy istnieje oficjalny link określający sposób tworzenia własnych niestandardowych fragmentów?
anjanesh

Odpowiedzi:

11

Opisywana funkcja jest częścią Sublime Text 2 po wyjęciu z pudełka. Upewnij się, że twój dokument używa składni HTML ( Zobacz »Składnia» HTML ).

Wpisz foo.bar, naciśnij Tab, a dostaniesz <foo class="bar"></foo>. Jest też foo#bar( idzamiast class). Oba są zaimplementowane w .Packages/HTML/html_completions.py

Daniel Beck
źródło
Czy istnieje dokumentacja na temat tworzenia atagów i czegoś takiego jak litagi? Czy to tylko dla HTML? i +1.
DᴀʀᴛʜVᴀᴅᴇʀ
@Gramps Nie jestem pewien, co masz na myśli, ale zwróć uwagę, że wskazałem skrypt, w którym ta funkcja jest zaimplementowana (wybierz element menu Przeglądaj pakiety…, aby przejść do wspomnianego katalogu). Możesz na przykład rozszerzyć istniejący skrypt o obsługę np. Dodatkowych separatorów. Skrypty Sublime Text 2 są zaimplementowane w Pythonie, oto dokumentacja Pythona , a ta strona zawiera dokumentację specyficzną dla Sublime Text 2.
Daniel Beck
Widziałem, jak ktoś to robi, div#main.containerale Sublime wypluwa mainelement z klasą, containerkiedy próbuję?
taco
7

Kodowanie Emmet / Zen

Emmet to wtyczka, w której piszesz podstawową strukturę w sposób podobny do selektora CSS, a edytor ją rozwija. Możesz znaleźć pakiet na GitHub i zainstalować go za pomocą Menedżera pakietów.


(źródło: smashingmagazine.com )

W tym Smashing Magazine znajduje się artykuł na ten temat . Na przykład,

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

rozwinie się z Tabdo

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

Zawiń zaznaczenie w tagach

Możesz także nacisnąć przycisk, AltShiftWaby utworzyć otwarty znacznik lub zawinąć bieżące zaznaczenie w znacznik (zobacz Edycja »Znacznik» Zawiń bieżące zaznaczenie w znaczniku ).

Domyślnie utworzy:

<p></p>

z wybraną nazwą znacznika, aby można ją zastąpić.

Naciśnięcie Tabspowoduje dalsze przejście do tagu. Lub jeśli naciśniesz Space, możesz utworzyć atrybuty, na przykład:

  • AltShiftW(w systemie Windows / Linux) lub CtrlShiftWOS X
  • A
  • Space
  • Wpisz href="..."więcTab
  • Powoduje, <a href="..."></a>że kursor znajduje się wewnątrz znacznika
slhck
źródło