Kamis, 20 April 2017

Tutorial Sublime Text 3 – #9 Snippet

      Assalamualaikum Wr. Wb ... Hai – hai man-teman sahabat lupacode, selamat datang kembali diblog lupacode – Tutorial Pemrograman Dalam pembahasan meteri kemarin kita telah belajar mengenai sublime text, dan pada materi sebelumnya kita telah membahas mengenai Tutorial Sublime Text 3 – #8 Package Control bagi sahabat lupacode yang kebetulan baru saja mampir ke dalam blog ini, silahkan dipelajari dulu materi – materi yang sebelumnya dari pembahasan yang pertama. Karna didalam setiap materi pembahasan disini itu saling berhubungan antara materi sebelumnya dan materi selanjutnya. Atau sahabat dan teman – teman lupacode dapat langsung menuju pada halaman Daftar Isi disana seluruh pembahasan dari mulai materi yang pertama sampai dengan materi yang saat ini kita bahas tersedia disana.

Lupacode - Tutorial Sublime text Snippet

       Pada pembahasan meteri – materi sebelumnya kita telah membahas mengenai bagaimana cara menggunakan snippet pada sublime text ini, lalu kita juga sudah tau cara mengisntal snippet ini menggunakan package control.
       Dalam pembahasan materi kali ini kita akan membahas mengenai bagaimana caranya kalau kita ingin membuat sendiri snippet didalam kode kita. Contohnya begini, saya mempunyai sebuah file html dan saya kasih nama index.html

Lupacode - Tutorial Sublime text Snippet 1

     Ceritanya didalam tag <body> saya ingin membuat form, yang sederhana saja login form misalnya, yang pertama saya buat dulu tag form nya <form> </form> kemudian setelah itu saya membuat tag label dan input seperti ini misalnya

<form>
          <label for="nama">Nama:</label>
          <input type="text" name="nama " id="nama">
</form>

        Intinya jika saya ingin membuat sebuah form inputan maka didalam nya saya harus membuat tag <label> lalu tag <input> dan itu berlaku hanya untuk 1 satu inputan, jika saya ingin membuat inputan untuk password maka saya harus membuat tag <label> dengan <input> lagi begitu seterusnya, bagaimana jika inputannya lumayan cukup banyak, cukup memakan waktu juga.
      Nah ini kayanya lebih bagus kalau pakai snippet, jadi pengennya ketika saya ketikan sesuatu misalnya saya ketik formel lalu saya tekan tab maka otomatis dibuatkan <label> dan <input> nah bagaimana caranya ?
      Yang pertama kalian masuk kedalam menu Tools -> New Snippet nanti kalian akan dibuka kan sebuah template nama sublime text nya seperti ini

Lupacode - Tutorial Sublime text Snippet 2

Kalian ga usah bingung dulu melihat syntax diatas, yang perlu kalian perhatikan hanya beberapa bagian saja, yang pertama adalah content nya, baris ini saja

Lupacode - Tutorial Sublime text Snippet 3

Kita tidak perlu ganti atas dan bawahnya, jadi ini adalah kontenya script yang akan muncul ketika kalian tuliskan sesuatu kemudian kalian tekan tab. Lalu yang kedua yang perlu perhatikan adalah tab trigger

Lupacode - Tutorial Sublime text Snippet 4

Nah ini adalah text apa yang ingin kalian ketikan sebagai trigger untuk memunculkan konten yang diatas tadi. Lalu yang ketiga ada scope

Lupacode - Tutorial Sublime text Snippet 5

Nah kalau scope ini untuk mengatur dalam syntax apa saja kita akan memunculkan nya. Nanti kita praktekan juga agar tidak bingung

        Yang pertama misalnya saya ingin membuat sebuah konten seperti ini :
Admin Lupacode.net
Jadi ketika saya ketikan admin lalu saya tekan tab maka secara otomatis akan dibuatkan  konten diatas “Admin Lupacode.net” seperti itu ceritanya. Lalu untuk menuliskan admin nya dimana ? kita tulis admin didalam trigger, kita hilangkan dulu tanda komentar nya, kemudian kita ganti sehingga menjadi seperti ini

<tabtrigger> admin </tabtrigger>

Selanjutnya kita simpan terlebih dahulu file nya dengan cara CTRL + S atau bisa juga masuk ke menu file -> save maka secara otomatis kalian akan disuruh menyimpan file nya di folder ini

Lupacode - Tutorial Sublime text Snippet 6

        Janga diganti – ganti biarkan saja disitu letak penyimpanan nya, lalu kiata kasih nama file nya dan ini harus spesifik. Nama file nya biasakan sesuai dengan nama tab trigger nya, kalau tadi saya buatnya admin, maka saya akan simpan filenya dengan admin lalu extensi filenya yaitu .sublime-snippet nah ini ga boleh salah untuk extensi file nya. Jadi nama snippetnya adalah admin.sublime-snippet lalu kemudian klik save
      Kalau sudah di save Sekarang kita bisa pakai, sekarang saya coba tulis admin kemudian saya tekan tab maka otomatis saya dibuatkan Admin Lupacode.net
Didalam snippet nya sublime text ini kita juga bisa menambahkan tab stop, jadi tab stop itu adalah ketika saya mengetikan admin kemudian saya tekan tab maka kursornya tidak berada di akhir konten, melainkan saya ingin kursor nya berada ditengah nama, agar saya mudah untuk melakukan perbaikan
      Kembali kedalam snippet nya kemudian kita kembali ke dalam conten yang sudah kita buat, Admin Lupacode.net saya ingin ketika saya ketikan tab maka kursornya berada ditengah atatu setelah kata admin, maka kita harus tambahkan $ lalu urutannya. Contoh jadi seperti ini

Admin $1Lupacode.net

    Jangan khawatir $1nya tdak akan muncul sebagai konten melainkan itu hanya sebuah kode agar kursornya berada disitu ketika kita ketikan tab. Nah jika sekarang saya tulis admin kemudian saya tekan tab maka otomatis kursornya berada disitu.
     Nah jadi itu untuk penggunaan tag stop nya, sekarang kita kembali ke form tadi. Ceritanya saya ingin ketika saya ketikan formel kemudian saya tekan tab maka otomatis akan dibuatkan script nya. Caranya adalah kita buat lagi snippet nya, masuk ke menu Tools -> New Snippet
       Kemudian pada tab triggernya saya ganti menjadi
<tabtrigger> formel </tabtrigger>
Dan saya kasih syntax untuk konten nya adalah seperti ini

Lupacode - Tutorial Sublime text Snippet 7

       Kemudian saya save dengan nama formel.sublime-snippet kemudian saya klik save. Selanjutnya saya akan coba ketikan formel kemudian saya tekan tab, maka hasilnya sudah langusng dibuatkan sesuai dengan yang kita buat tadi. Dan ini sangat membantu sekali bagi saya, jadi ketika saya ingin membuat inputan untuk nama, maka saya hanya perlu ketikan formel lalu tekan tab, kemudian saya ingin membuat untuk password, saya tulis lagi formel kemudian tekan tab dan begitu seterusnya.
       Lalu sekarang saya ganti scope nya agar hanya bisa berlaku untuk syntax html saja, kalau ingin merubah scope nya kita hanya perlu menghapus source.phyton nya kemudian kita ubah menjadi text.html seperti ini

Lupacode - Tutorial Sublime text Snippet 8

      Sebetulnya masih banyak lagi yang dapat kita lakukan di dalam sublime text 3 ini, jadi silahkan kalian pelajari sendiri kembangkan sendiri terus berlatih dan biasakan dipakai jika sedang berlatih ngodng maka saya yakin kalian akan terbiasa untuk ini
       Baiklah waktu sudah sangat malam sekali, dan saya rasa pembahasan mengenai snippet nya saya cukupkan sampai disini dulu, dan kita akan melanjutkan kedalam pembahasan materi selanjutnya dan masih di dalam pembahasan sublime text 3 ini. Semoga apa yang saya tulis didalam blog ini dapat menambah ilmu serta wawasan sahabat semua, baiklah selanjutnya kita masuk kedalam materi 
Tutorial Sublime Text 3 – #10 Emmet ( Bagian 1 )

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon