Digitalmapia adalah situs dimana semua orang bisa menulis artikelnya sendiri. Klik "Login/Register untuk masuk, lalu klik "Tulis Artikel" untuk mulai menulis.

Belajar menggunakan Sublime Text 2

Teman-teman mungkin sudah tidak asing lagi dengan yang namanya IDE. Jika, sebelumnya anda pernah menggunakan Visual Studio, Eclipse, atau Netbeans berarti anda sudah tahu apa itu IDE. IDE singkatan dari Integrated Development Environment, adalah suatu tools yang digunakan untuk membuat kode program. Selain IDE,  ada juga yang namanya Text Editor. Text Editor juga bisa digunakan untuk membuat kode program, hanya saja Text Editor memiliki fitur yang lebih sederhana. Contoh Text Editor misalnya notepad dan notepad++.

Nah, kali ini saya akan membahas mengenai Text Editor yang cukup sederhana namun memiliki banyak fitur tersembunyi yaitu Sublime Text 2. Text Editor yang satu ini tidak gratis, namun versi trialnya bisa anda gunakan dalam waktu yang tidak ditentukan dan tentunya fiturnya full. Anda bisa mendownload Sublime Text 2 disini. Sublime Text 2 bisa diinstal dalam berbagai versi OS yaitu Windows, Mac dan Linux.

Pengenalan Antarmuka

Seperti yang sudah saya jelaskan sebelumnya, antarmuka sublime text 2 sangat sederhana sekali. Namun, dibalik kesederhanaan itu terdapat banyak fitur tersembunyi yang bisa anda gunakan. Tampilan antarmukanya adalah sebagai berikut:

Tampilan sublime text 2 yang diinstal pada linux

Pada sebelah kiri, terdapat struktur direktori yang bisa anda buka atau tutup dengan menggunakan shortcut CTRL + K setelah tombol K ditekan jangan lepaskan dulu CTRL-nya kemudian tekan tombol B. Kemudian pada sisi sebelah kanan terdapat minimap, yang digunakan untuk menampilkan ringkasan source code yang sedang kita buka. Menurut saya, fitur minimap ini memang tidak terlalu diperlukan dikarenakan ukuran huruf yang terlalu kecil, namun jika anda tidak setuju anda bisa berkomentar pada kolom di bawah ini.

Melakukan Pencarian File

Biasanya jika anda hendak membuka sebuah file pada Text Editor anda harus mencarinya melalui directory tree yang biasanya berada di sebelah kiri pada antarmuka. Nah, pada Sublime Text 2 anda juga bisa melakukan hal yang sama. Namun, alangkah lebih cepatnya bila dengan menggunakan shortcut. Pada sublime text, coba anda tekan CTRL + P maka akan muncul tampilan sebagai berikut:

CTRL + P on sublime text 2

Setelah tampilan list file tersebut muncul, anda tinggal ketik nama file yang ingin anda buka. Jika ada beberapa file yang memiliki nama yang sama, anda tinggal memilihnya dari list dropdown, kemudian tekan enter. Maka, file tersebut akan terbuka tanpa anda harus mencarinya ke dalam folder atau sub-sub folder sekalipun.

Menampilkan fungsi atau selector dengan lebih cepat

Untuk menampilkan fungsi atau selector anda tinggal menekan tombol CTRL + R maka form pencarian akan tampil sebagai berikut:

pencarian fungsi sublime text 2

Setelah itu, anda tinggal ketik nama fungsi atau selector yang ingin anda cari setelah simbol ‘@’. Untuk melakukan hal ini, pastikan dokumen dimana anda melakukan pencarian file sedang terbuka. Namun, anda juga bisa melakukan pencarian fungsi atau selector pada file yang tidak sedang terbuka. Caranya adalah dengan menekan tombol CTRL + P kemudian ketikan sebagai berikut nama_file @ nama_fungsi.

searchfunction2

Sebagai catatan, nama_file tidak perlu anda tulis lengkap, demikian juga nama_fungsi. Karena Sublime Text menggunakan algoritma pencarian khusus sehingga proses pencarian menjadi lebih akurat. Misal query pencarian bisa anda buat sebagai berikut:

index.php @ submitData

atau

inde @ submitDat

Default Snippet

Tujuan dari snippet adalah untuk mempermudah dalam melakukan pemrograman. Berikut adalah contoh cara menggunakan snippet bawaan pada pada sublime text, pertama-tama buat sebuah file baru bernama index.php di tempat yang anda inginkan. Setelah itu ketikan ‘php’ lalu tekan tombol ‘tab’. maka secara otomatis ‘php’ berubah menjadi <?php ?>. Contoh lainnya adalah membuat class secara otomatis, misal pada <?php ?> ketikan ‘class':

<?php 
  class
?>

Kemudian, tekan tombol ‘tab’ dengan posisi cursor tepat setelah tulisan ‘class’ tanpa penghalang apapun termasuk spasi, maka tulisan ‘class’ secara otomatis berubah menjadi definisi class sebagai berikut:

/**
  * 
  */
  class ClassName extends AnotherClass
  {

    function __construct(argument)
    {
      # code...
    }
  }

Untuk, mengubah nama class, mengubah/menghapus nama class induk (AnotherClass) anda hanya perlu menekan tombol ‘tab’ beberapa kali kemudian ketikan nama class yang diinginkan. Nah, yang jadi pertanyaan adalah bagaimana saya tahu harus mengetikan ‘class’ atau ‘php’ untuk mengetahuinya tekan CTRL + SHIFT + P, kemudian ketik ‘class’ maka akan ditampilkan sebuah list nama snippet dan shortcut-nya. Klik snippet ‘class’ maka sebuah template class secara otomatis akan dibuat, atau anda bisa juga menggunakan shortcut yang tertera di samping nama snippet tersebut.

Mungkin anda bertanya, kalau tiap ingin mengetikan sesuatu kita harus melihat dan menghafal shortcut terlebih dahulu apa tidak repot? Ini sebenarnya hanya masalah pembiasaan saja. Semakin anda terbiasa, semakin anda hafal dan semakin cepat anda melakukan pemrograman. Bahkan, anda bisa lebih cepat membuat program dibandingkan ketika anda menggunakan IDE yang sifatnya klak-klik klak-klik.

Custom Snippet

Selain menggunakan snippet bawaan dari sublime text, anda juga bisa membuat snippet anda sendiri. Caranya pilih menu ‘tools > new snippets…’. Maka sebuah file baru akan terbentuk, isi file tersebut adalah 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>

Sekarang, kita ubah snippet diatas menjadi sebagai berikut:

<snippet>
  <content><![CDATA[
Hello
]]></content>
  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
  <tabTrigger>h</tabTrigger>
  <!-- Optional: Set a scope to limit where the snippet will trigger -->
  <!-- <scope>source.python</scope> -->
</snippet>

Kemudian, simpan file tersebut dengan nama, misalnya: ‘hello.sublime-snippet’. Sekarang ketika anda mengetikan ‘h’ lalu menekan tombol ‘tab’, maka ‘h’ akan berubah menjadi ‘hello’. Anda juga bisa mempraktekan hal ini untuk membuat class dsb. Jika anda perhatikan pada contoh diatas terdapat tag bernama ‘scope’, tag scope diatas digunakan untuk membatasi pada bahasa pemrograman apa snippet bisa dijalankan misalnya ‘.phyton’, ‘.css’ dsb. Karena pada contoh diatas tag ‘scope’ dimasukan ke dalam comment maka tag tersebut tidak berlaku, sehingga snippet yang kita buat tersebut bisa berjalan pada semua bahasa pemrograman.

Closure

Selain fitur-fitur diatas, masih banyak hal-hal menarik dari sublime text untuk anda ketahui. Misalnya, bagaimana menggunakan package control, menambahkan plugin dsb. Berbeda dengan Text Editor yang lain, sublime text bisa meningkatkan produktivitas anda menjadi lebih tinggi, namun anda perlu melakukan pembiasaan untuk menggunakan fitur-fiturnya.

sublime text 2 logo