Mencoba Sublime Text 2

by

Ada yang tahu makhluk apa si Sublime Text 2 ini? Yaps betul betul betul, kalau ada yang jawab ini adalah editor teks untuk developers kalian bener sekali. Sebenarnya masih banyak selain Sublime Text 2 editor teks itu seperti Notepad++, Komodo Edit, Aptana, Vim, Coda (untuk Mac), dan lain sebagainya. Namun kali ini saya akan bahas pengalaman menggunakan Sublime Text 2 64bit. Sekedar informasi Sublime Text 2 bisa juga dijalankan pada Linux maupun Mac, sebagai editor yang cukup renyah dapat membaca bahasa-bahasa pemograman yang biasa dipakai dan dapat pula untuk meng-compile beberapa bahasa tersebut.

Di sini saya memakai untuk developing website yang sekedar PHP, HTML, dan CSS. Sebelumnya saya sering memakai Notepad++ dalam hal bekerja namun merasa tidak puas karena bosen terus saya coba cari dan ternyata ada yang lain.

Penampakan Sublime Text 2

Dari segi tampilan lebih juara, modelnya seperti TextMate kalau di Mac, dari segi fitur juga tidak kalah hebat memang saya belum bisa meng-optimasi secara full si editor ini, namun ada beberapa hal yang sudah saya nikmati seperti:

  • Mini-map, jadi kita bisa lihat teks secara keseluruhannya
  • Command Palette (CTRL+SHIFT+P), bisa langsung mencari perintah yang kita perlukan untuk mempercepat pekerjaan.
  • Panel-panelnya editornya bisa dipindahkan
  • Kemampuan untuk multiple selection
  • Ada panduan indentasi
  • Bisa di-folding code-codenya
  • Ngeditnya bisa di split jadi beberapa kolom
  • Bisa pakai theme dari TextMate
  • Tanda (),{},"",dsb akan dicocokan dan ditutup otomatis
  • Banyak paket yang bagus bisa buat lebih mudah bekerja
  • Auto-complete, snippet, dan macro
  • Find & Replacenya gampang dan lebih teratur
  • Bisa fullscreen

Masih banyak yang belum keulik sih fiturnya apa aja, baru coba pakai kemarin malam sebelum tulisan ini saya posting. Nah untuk kostumisasinya biar sedikit yahut saya akan coba berbagi beberapa perubahan yang sudah saya terapkan seperti berikut.

Package Control

Ini adalah hal pertama yang harus kalian lakukan kalau sudah menginstal Sublime Text 2 yaitu menginstal Package Control yang dibuat oleh orang-orang baik hati untuk plugin-plugin di editor ini. Cara cukup mudah
  1. Download Package Control.sublime-package
  2. Buka C:\Users\NamaUser\AppData\Roaming\Sublime Text 2\Installed Packages
  3. Copy-kan file yang tadi sudah di download ke dalam Installed Packages
  4. Restart Sublime Text
Untuk cara penggunaanya nanti akan dijelaskan pada beberapa tip di bawah ini.

Ganti Icon Applikasi

Kalau lihat sih memang kenapa harus diubah kan ngga ngaruh juga kalau kita mau ngoding. Tapi yang namanya tampilan tuh buat saya segalanya, jadi biar lebih ciamik ada cara yang bagus untuk ganti icon seperti ini

Silakan download dulu bahan Ganti Icon-nya lalu ikuti langkah berikut:
  1. Download ResEdit
  2. Masuk ke C:\Program Files\Sublime Text 2\ cari yang namanya file sublime_text.exe lalu copy-kan ke desktop (note: kalau di edit langsung tidak bisa karena ada permission windows jadi harus dipindahkan dulu ke desktop)
  3. Jalankan ResEdit, pilih File  →  Open Project pilih sublime_text.exe yang tadi ada di desktop
  4. Masih di ResEdit lihat di panel Resources sebelah kiri, klik kanan folder Icon dan pilih Add Resource  →  Icon
  5. Pilih folder yang tadi sudah di download dari  Ganti Icon cari sublime_text.ico lalu pilih
  6. Klik kanan di tulisan 103 [English (Australia)], pilih Remove from Project
  7. Save
  8. Copy-kan kembali sublime_text.exe dari desktop ke tempat asalnya (tips: biar aman sebelumnya ganti nama yang original sublime_text.exe menjadi sublime_text.bak)

Ganti Tema dan Skema Warna

Pada tahapan ini saya sering melakukan kesalahan sampai harus bolak balik install uninstall jadi perhatikan tips ini baik-baik :). Di sini saya memakai Soda Theme oleh Ian Hill. Awalnya saya melakukan dengan cara primitif yaitu mendownload dulu ke githubnya lalu mengedit preferences-nya. Sekarang ternyata ada cara yang mudah, karena sudah menginstal Package Control tadi kita tinggal menekan CTRL+SHIFT+P →  "install"  →  "soda" nanti akan muncul "Theme - Soda" tekan enter untuk menginstal paket.



Untuk mengaktifkannya dalam menu Sublime Text 2 pilih Preferences  →  Setting - User lalu ganti dalamannya menjadi

{
"theme": "Soda Light.sublime-theme"
}

Jika ingin menambahkan dengan skema warna sebelumnya pastikan memakai koma di akhir baris contoh.

{
 "color_scheme": "Packages/Color Scheme - Default/Monokai Soda.tmTheme",
 "ignored_packages":
 [
  "Vintage"
 ],
 "theme": "Soda Dark.sublime-theme"
}

Restart dulu editornya, untuk skema warnanya ada Monokai Soda dan Espresso Soda silakan di download juga. Cara installnya Preferences  →  Browse Packages →  Color Scheme - Default setelah terbuka explorernya, ekstrak dulu file yang sudah kita download tadi lalu copy-kan di folder Color Scheme. Pilih Prefereces  →  Color Scheme  →  Pilih Skema yang sudah kita instal tadi.

Install Prefixr

Prefixr digunakan untuk CSS3 atribut untuk berbagai browser agar ketika di generate satu atribut maka secara otomatis atribut lain dibuatkan contohnya sebagai berikut

//Sebelum
.box {
   border-radius: 10px;
   box-shadow: 0 0 5px rgba(0,0,0,.4);
}

//Sesudah
.box {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
 
   -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);
   -moz-box-shadow: 0 0 5px rgba(0,0,0,.4);
   box-shadow: 0 0 5px rgba(0,0,0,.4);
}

Untuk menginstallnya: CTRL+SHIFT+P → “install” → ENTER → “prefix” → ENTER

Autoformat Tag

Ngga enak kan kalau lihat kode kita acak-acakan, jadi dengan paket autoformat ini kita bisa merapikan kode-kode yang kita buat menjadi rapi dan jelas terbaca walaupun kalau orang awan lihat sama aja sih sebenernya ga jelas juga :p.

Untuk menginstallnya: CTRL+SHIFT+P → “install” → ENTER → “tag” → ENTER

Alignment

Paket ini untuk tata letak teks juga agar semakin rapi contoh:

// Sebelum 
var mobil = 'mobil'; 
var motor = 'motor'; 
var beca = 'beca';
 
// Sesudah
var mobil    = 'mobil';
var motor    = 'motor';
var beca     = 'beca';

Untuk menginstallnya: CTRL+SHIFT+P → “install” → ENTER → “align” → ENTER

Split Layar

Jika kita tida mempunya layar yang cukup lebar cara ini bisa menjadi alternatif bila kita sedang coding sambil melihat referensi, tidak perlu lagi install paket karena ini sudah bawaan dari Sublime Text 2 untuk mengaktifkannya
  • 1 kolom : SHIFT+ALT+1
  • 2 kolom : SHIFT+ALT+2
  • 3 kolom : SHIFT+ALT+3
  • dst.

Mungkin sebatas itu dulu yang bisa saya bagi sama teman-teman semua, apabila ada pertanyaan atau mau sharing juga boleh tinggal komen aja di sini Insya Allah nanti saya balas, sedikit bonus ada keyboard cheat sheet biar semakin gaul lagi pakai Sublime Text 2 nya, bisa kalian download di sini.

Location: Bandung, Indonesia

25 Comments

  1. Riki handoyo09/09/13, 20.26

    yang prefix dan aling itu pengunaannya gmn ya gan
    kok saya gak bisa yang itu??

    BalasHapus
    Balasan
    1. Unknown10/09/13, 00.38

      buat yang prefix klo ente di windows blok aja dulu kode cssnya trus tekan "ctrl+alt+x" gunanya nge-generate kode biar otomatis gitu, tapi plugin itu kadang2 error hehe klo belum puas ini videonya http://www.youtube.com/watch?v=m7wA2-Wcejg hehe. terus buat alignment buat ngerapihin identasi tinggal tekan "ctrl+alt+a". semoga membantu terima kasih :D

      Hapus
  2. Anonim16/12/13, 18.07

    kalau pas ngetik,biar muncul pop up kaya sugestion gitu, gmn ya mas?

    BalasHapus
    Balasan
    1. Unknown16/12/13, 19.21

      halo gan, itu set aja misal language nya HTML nah cara aktifinnya pencet CTRL+Spacebar nanti keluar sugestionnya gitu :D

      Hapus
  3. Anonim17/12/13, 00.07

    terimakasih mas gilang atas responnya, btw maklum sy baru menggunakan sublime text hehe.
    kalau tanpa tekan ctrl+space bisa gak ya mas? langsung muncul pop up nya ketika ngetik. terima kasih sebeleumnya

    BalasHapus
    Balasan
    1. Unknown17/12/13, 07.42

      iya sama-sama, tidak apa-apa bertanya malah saya seneng blognya jadi rame hehe. oh yang seperti itu sepertinya belum ada selama saya pakai. biasanya pakai Netbeans gan yang bisa keluar pop up, nanti saya coba cari lagi deh belum dalem juga di sublime :D

      Hapus
    2. Unknown17/12/13, 07.52

      ada info baru gan nih ternyata sublime sudah ada pop upnya hehe, coba set language misal java nanti ketika baru nulis pu keluar suggestion public. tapi kalau di html memang tidak keluar kecuali php. agan bisa install juga plugin biar autocompletenya banyak namanya SublimeCodeIntel, kalau agan sudah install package manager tinggal ctrl+p -> install package -> ketik codeintel lalu pilih deh. semoga membantu :)

      Hapus
    3. triagusk06/01/14, 15.45

      makasih gan infonya bermanfaat

      Hapus
    4. Unknown06/01/14, 16.09

      sama-sama gan :D

      Hapus
  4. Anonim26/06/14, 20.37

    misi gan, numpang nanya ..
    ane kan baru belajar pemrograman bahasa c, sekarang ane masih pake dev c++ buat compiler ..

    ane tertarik banget gan pake sublime text buat editor textnya ..
    jado gimana ya caranya biar sublime text yang ane pake bisa compile dan run bahasa c? mohon pencerahannya gan .. makasih

    BalasHapus
    Balasan
    1. Unknown27/06/14, 11.34

      halo gan nah untuk compile sendiri ane belum terlalu tau nih klo agan mau compile dari sublimenya, tapi ane bisa kasih saran compilenya di cmd aja gan pake MinGW nah coba aja nih liat dulu video ini http://www.youtube.com/watch?v=aNPMQD9LiAQ sama artikel ini juga buat referensi http://www.ishaanrawat.com/building-running-c-in-sublime-text-windows/ . semoga bermanfaat :)

      Hapus
  5. Unknown11/10/14, 11.51

    mas kalo browsernya supaya bisa auto refresh gimana ya?

    BalasHapus
    Balasan
    1. Unknown13/10/14, 10.38

      pake plugin namanya LiveReload https://sublime.wbond.net/packages/LiveReload nanti ikutin cara-caranya di sana ya mas. Untuk installnya bisa lewat package control cari LiveReload dia pakai extension/plugin di browser juga :)

      Hapus
  6. Anonim11/10/14, 13.13

    mas caranya supaya auto reload pada browser gimana yah? makasih sebelumnya.

    BalasHapus
    Balasan
    1. Unknown13/10/14, 10.39

      ini mas mba gan coba pake plugin namanya LiveReload https://sublime.wbond.net/packages/LiveReload disana nanti ada caranya langsung hehehe

      Hapus
  7. Anonim24/10/14, 01.32

    Mas Gilang mo nanya..nih open source gak ya? mksh

    BalasHapus
    Balasan
    1. Unknown24/10/14, 10.42

      klo saya sih open in relationship eheheh just kidding sorry :p ini berbayar mas gan mba sis untuk lisensinya $70 tapi bisa ko didownload dan diinstal walaupun gak masukin linsensinya dengan fitur yang sama.

      Hapus
  8. Anonim24/10/14, 14.27

    Nanya mas.. apa bedanya berbayar dengan yg gratis? kan fiturnya sama meski gak ada lisensinya?? makasih mas ats jawabannya...

    BalasHapus
    Balasan
    1. Unknown26/10/14, 10.16

      sepengalaman saya sih ga ada bedanya kalau dari segi fungsi cuma klo yang demo (gratis) nanti di title bar aplikasinya ada tulisan demo terus ga ada waktu limitnya juga nih kata si sublimenya juga "There is currently no enforced time limit for the evaluation." hehehe

      Hapus
  9. Unknown12/12/14, 00.27

    gan kalau mau autosave dan auto open di browser bijimana gan??? maklum newbie..hehe

    BalasHapus
    Balasan
    1. Unknown12/12/14, 22.09

      hmm kalau untuk auto save bisa coba plugin ini https://packagecontrol.io/packages/auto-save caranya sama instal lewat package control. terus belum pernah deh auto open paling sih open in browser doang ga ada auto nya ehehe ini linknya https://packagecontrol.io/packages/OpenInBrowser semoga membantu :)

      Hapus
  10. Unknown30/12/14, 14.59

    gan cara kompile nya gimana ?

    BalasHapus
    Balasan
    1. Unknown31/12/14, 00.00

      mau compile apa bro? klo java yg pasti kita perlu JREnya dulu klo C atau C++ perlu MinGW nah untuk referensinya bisa lihat sini bro https://www.sublimetext.com/forum/viewtopic.php?f=3&t=4805 dan http://stackoverflow.com/questions/14621562/how-do-i-compile-and-run-a-c-program-in-sublime-text-2 selamat mencoba :)

      Hapus
  11. # = = Gus Wid = = #21/01/15, 05.43

    Mas Gilang, ane juga baru nyoba pakai tuh editor, ane tes dengan coding html dan css, lah trus ane save dengan file .html
    Pas ane buka file tersebut dengan browser ff, malah blank tak ada hasil output. Itu kenapa mas? Apa karena sublime text ane nggak berlisensi? Atau karena faktor apa? Terima kasih mas sebelumnya :)

    BalasHapus
    Balasan
    1. Unknown29/01/15, 22.23

      maaf nih baru sempet bales hehe..sebenernya ga ada masalah sublime yang lisensi ataupun ngga dua duanya masih mempunyai fungsi yang sama cuma yg ga berlisensi paling kita bakal dikasi peringatan terus disuruh beli hehe..

      klo masalahnya gitu sih coba extensionnya di-show dulu di explorernya kali aja jadinya misal file.html.html atau gimana dicoba dibrowser lain sama ga? nanti kabarin lagi yah hasilnya :)

      Hapus