Membuat Custom Snippet pada Atom

Salah satu hal paling menyebalkan saat membuat program adalah ketika kita harus mengetikkan kode program yang sama berulang-ulang. Apalagi jika kode tersebut “hanya” sebuah dokumentasi untuk kode program yang sedang kita buat. Bayangkan, berapa kali kita harus menuliskan sebuah deklarasi fungsi dan dokumentasinya seperti kode di bawah ini dalam sebuah program yang sedang kita kerjakan.

/**
* Write your summary here ...
*
* Write your description here ...
*
* @author Your Name <your.name@kudo.co.id>
* @since v.1.0
* @param type $var Description
* @return void
*/
public function functionName($var = null)
{
// place your code here ...
}

 

Setelah menggunakan Atom saya baru sadar bahwa kita dapat mengurangi pengulangan tersebut dengan membuat sebuah custom snippet dan memasangnya pada Atom kita. Sebetulnya Atom sendiri sudah menyediakan beberapa snippet bawaan yang dapat kita gunakan seperti misalnya snippet untuk menulis deklarasi kelas baru pada file berekstensi php (ketik “class” + tab), yang akan memunculkan kode seperti di bawah ini:

/**
*
*/
class ClassName extends AnotherClass
{

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

 

Namun, terkadang snippet yang disediakan oleh Atom tidak cukup membantu karena seringkali kita masih perlu menambahkan dokumentasi dengan format tertentu pada kelas atau fungsi yang kita buat. Oleh karena itu, custom snippet dapat membantu kita dalam membuat snippet sesuai dengan kebutuhan kita sendiri.

Berikut adalah langkah-langkah yang dapat kalian ikuti untuk membuat sebuah custom snippet pada Atom kalian:

1. Pada Atom kalian, tekan tombol ctrl + ,. Perintah tersebut akan memunculkan tab Settings pada Atom kalian.

2. Klik tombol  pada tab Settings Perintah tersebut akan menampilkan folder .atom pada Atom kalian.

3. Buka file snippets.cson yang ada pada folder .atom tersebut.

4. Tambahkan snippet code kalian pada file snippets.cson dengan cara mengetik “snip” lalu tekan tab.

Perintah tersebut akan menghasilkan barisan code snippet berikut:

'.source.js':

'Snippet Name':

'prefix': 'Snippet Trigger'

'body': 'Hello World!'

 

Baris pertama merupakan nama package yang akan menentukan pada package apa snippet ini dapat kita gunakan. Jika kita ingin menggunakan pada semua package maka kita dapat mengganti ‘.source.js’ menjadi ‘*’.

 

Baris kedua merupakan nama snippet yang kita buat dan akan muncul di sebelah prefix snippet pada daftar sugesti snippet nantinya.

 

Baris ketiga merupakan prefix snippet yang nantinya akan kita ketikkan ketika kita ingin menggunakan snippet tersebut.

 

Baris keempat merupakan potongan kode yang ingin kita hasilkan ketika kita menggunakan snippet tersebut. Kita dapat mengganti single quotes (‘) dengan three-double-quotes (“””) jika kita ingin menghasilkan kode yang lebih dari satu baris.

 

Sebagai contoh, kalian dapat meng-copy-paste kode berikut ke dalam file snippets.cson kalian.

 

'Initialize New Function':

'prefix': 'function'

'body': """

/**

* Write your summary here ...

*

* Write your description here ...

*

* @author Your Name <your.name@kudo.co.id>

* @since v.1.0

* @param type $var Description

* @return void

*/

public function functionName($var = null)

{

// place your code here ...

}"""

 

5. Simpan perubahan pada file snippets.cson tersebut.

6. Sekarang kalian dapat menggunakan custom snippet tersebut dengan cara mengetikkan prefix “function” diikuti dengan tombol tab setiap kali kalian ingin mendeklarasikan sebuah fungsi baru.

 

Happy coding!

 

Comments

comments

satriaramadhan

You Might Also Like

No Comment

Leave your thought