Cara Membuat Snippet Pada Sublime Text

Cara Membuat Snippet Pada Sublime Text - Snippet adalah bentuk kata singkat yang fungsinya untuk memanggil sebuah baris kode program tertentu, biasanya baris kode program yang sering dipakai. Contoh ketika kita ketik “!” , maka akan muncul struktur HTML.

Sekarang kita akan belajar membuat dan menggunakan snippet pada sublime text. Untuk membuat snippet pada sublime text cukup mudah, berikut langkah-langkahnya:

1.Cari menu tools

2.Pilih developer

3.Pilih new snippet

4.Kemudian sublime text akan membukakan sebuah template yang isinya sebagai berikut :

<snippet>
	<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
	<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
	<!-- <tabTrigger>hello</tabTrigger> -->
	<!-- Optional: Set a scope to limit where the snippet will trigger -->
	<!-- <scope>source.python</scope> -->
</snippet>

Setelah template snippet muncul, kita bisa membuat sebuah snippet yang kita inginkan. Untuk membuat snippet, saya akan bagi menjadi 3 cara dari cara sederhana sampai yang paling kompleks. Untuk pembuatan snippet ini, kita akan memanipulasi baris kode ke-3, yaitu isi dari tag <content>. Jangan lupa untuk mengaktifkan tag <tabTrigger>. Ok, sekarang kita mulai satu persatu.

1. Membuat Snippet Sederhana

Kita akan membuat contoh snippet sederhana untuk membantu menuliskan teks sederhana berikut:

Hello, This Is Snippet

Berikut langkahnya:

● Hapus teks asli yang berada pada tag <content> pada baris ke-3. Kemudian gantikan dengan teks di atas:

Hello, This Is Snippet

● Aktifkan tag <tabTrigger> pada baris ke-6. Caranya kita bisa dengan memblok baris tersebut, atau menempatkan posisi kursor di sembarang tempat pada baris tersebut, kemudian tekan tombol Ctrl + / , atau kita bisa hapus tanda <!-- dan  --> secara manual. Tab trigger ini berfungsi, ketika kita mengetikkan satu path kata, maka akan muncul isi snippet yang kita inginkan.

● Ganti isi tag <tabTrigger> sesederhana mungkin dan mudah diingat. Sebagai contoh untuk snippet di atas, kita bisa pakai tab trigger hello.

● Simpan snippet tersebut. Sublime text akan langsung mengarahkan penyimpanannya pada setting user. Jangan dirubah lokasinya, biarkan apa adanya. Untuk nama snippet usahakan harus selalu sama dengan isi tag <tabTrigger>, kemudian ikuti dengan ekstensi file-nya, yaitu: .sublime-snippet . Lalu untuk bagian as type, biarkan menjadi All Files (*.*). Dalam kasus ini, kita bisa beri nama hello.sublime-snippet .

● Simpan.

● Silakan cek hasilnya di file kita. Coba panggil snippetnya sesuai dengan nama yang berada pada isi tag <tabTrigger>, kemudian tekan tab.

Note:

Untuk baris kode ke-8, yaitu tag <scope>. Berfungsi untuk membatasi penggunaan snippet tersebut dalam bahasa pemprograman tertentu. Karena setiap bahasa pemprograman pasti memiliki kode-kode yang berbeda. Jadi setiap snippet tidak bisa digunakan pada semua bahasa pemprograman, kecuali tag <scope> ini tidak diaktifkan, seperti contoh diatas. maka snippet tersebut akan berlaku di semua bahasa.

Untuk mengaktifkan tag <scope> ini. Caranya kita bisa dengan memblok baris tersebut, kemudian tekan tombol Ctrl + / , atau kita bisa hapus tanda <!-- dan  --> secara manual. Selanjutnya tinggal ganti lingkup bahasa yang kita inginkan. Untuk lingkup HTML, silakan ganti source.python dengan text.html . Sedangkan untuk PHP ganti dengan text.html . Lalu kalau kita ingin menggunakan Javascript, bisa ganti dengan text.javascript .

2. Membuat Snippet Dengan Tab Stop

Untuk memberikan tab stop kita hanya tinggal menambahkan tanda $ diikuti dengan urutan stop/pemberhentian. Caranya sama seperti di atas, hanya kita tambahkan saja perintah pemberhentiannya. Lihat contoh isi setting tag <content> berikut:

Hello, $2This Is $1Snippet

Maka dengan isi tag <content> seperti itu, tag stop akan berlaku pertama kali di kata Snippet, kemudian tab yang kedua akan berlaku di kata This.

3. Membuat Snippet Dengan Tab Stop & Editing

Kali ini akan kita akan buat isi snippet yang sedikit rumit untuk membuat suatu struktur pembentukan form sebagai berikut:

<label for="elemen">Elemen :</label>
<input id="elemen" name="elemen" type="text" />

Berikut langkah-langkahnya:

● Hapus teks asli yang berada pada tag <content> pada baris ke-3. Kemudian gantikan dengan teks di atas:

<label for="elemen">Elemen :</label>
<input id="elemen" name="elemen" type="text" />

● Aktifkan tag <tabTrigger> pada baris ke-6. Caranya kita bisa dengan memblok baris tersebut, atau menempatkan posisi kursor di sembarang tempat pada baris tersebut, kemudian tekan tombol Ctrl + / , atau kita bisa hapus tanda <!-- dan  --> secara manual.

● Ganti isi tag <tabTrigger> sesederhana mungkin dan mudah diingat. Sebagai contoh untuk snippet di atas, kita bisa pakai tab trigger formel.

● Ganti isi tag <scope> dengan text.html . agar snippet tersebut hanya berlaku pada bahasa mark-up HTML saja (optional).

● Berikan Tab Stop dengan menambahkan tanda $ diikuti dengan urutannya (optional). Lihat contoh penulisan tab stop berikut:

<label for="#4elemen">$5Elemen :</label>
<input type="$1text" name="$2elemen" id="$3elemen">

● Selain opsi tab stop di atas, kita bisa tambahkan agar bisa melakukan editing pada nilai default yang ada pada isi snippet tersebut (optional). Caranya, kita cukup tambahkan tanda buka kurung kurawal ( { ) setelah tanda $ diikuti urutannya ( angka ) dan tanda titik dua ( : ). Terakhir tutup akhir path kata atau nilai default yang akan jadi target editing dengan tanda buka kurung kurawal ( } ). Lihat contoh penulisan dalam tag <content> snippetnya:

<label for="${2:elemen}">${2:Elemen} :</label>
<input type="${1:text}" name="${2:elemen}" id="${2:elemen}">

● Simpan snippet tersebut. Sublime text akan langsung mengarahkan penyimpanannya pada setting user. Jangan dirubah lokasinya, biarkan apa adanya. Untuk nama snippet usahakan harus selalu sama dengan isi tag <tabTrigger>, kemudian ikuti dengan ekstensi file-nya, yaitu: .sublime-snippet . Lalu untuk bagian as type, biarkan menjadi All Files (*.*).  Dalam kasus ini, kita bisa beri nama formel.sublime-snippet .

● Simpan.

● Silakan cek hasilnya di file kita. Coba panggil snippetnya sesuai dengan nama yang berada pada isi tag <tabTrigger>, kemudian tekan tab.

4. Membuat Snippet Dengan Escape Character Back Slash ( \ )

Untuk tanda $ sebagai perintah tab stop tidak akan berfungsi ketika nilai default sebuah path kata yang berdampingan dengan tab stop adalah karakter dollar ( $ ) juga. Karena itu kita perlu menambahkan escape character back slash ( \ ) pada karakter $ yang posisinya berdampingan dengan tab stop. Sebagai contoh ketika kita ingin mencetak isi dari variabel dalam bahasa pemprograman PHP, maka kita akan menuliskan kode program berikut:

<?php echo $nama; ?>

Atau di PHP 5 kita bisa mengganti karakter php echo menjadi tanda sama dengan ( = ), seperti berikut:

<?= $nama; ?>

Maka untuk menuliskan isi tag <content> pada template snippet-nya, agar snippet bisa berfungsi, kita menuliskan baris kode berikut:

<?= \$$1nama; ?>

Penjelasan mengenai apa itu snippet, bagaimana membuat dan menggunakannya sekian dulu. Semoga artikel ini bisa bermanfaat buat teman-teman yang sedang belajar memulai web design.

Happy Blogging Guys 😉😉😉 ...

Share :