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 |
- 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
- Download Package Control.sublime-package
- Buka C:\Users\NamaUser\AppData\Roaming\Sublime Text 2\Installed Packages
- Copy-kan file yang tadi sudah di download ke dalam Installed Packages
- 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:
- Download ResEdit
- 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)
- Jalankan ResEdit, pilih File → Open Project pilih sublime_text.exe yang tadi ada di desktop
- Masih di ResEdit lihat di panel Resources sebelah kiri, klik kanan folder Icon dan pilih Add Resource → Icon
- Pilih folder yang tadi sudah di download dari Ganti Icon cari sublime_text.ico lalu pilih
- Klik kanan di tulisan 103 [English (Australia)], pilih Remove from Project
- Save
- 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
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.
yang prefix dan aling itu pengunaannya gmn ya gan
BalasHapuskok saya gak bisa yang itu??
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
Hapuskalau pas ngetik,biar muncul pop up kaya sugestion gitu, gmn ya mas?
BalasHapushalo gan, itu set aja misal language nya HTML nah cara aktifinnya pencet CTRL+Spacebar nanti keluar sugestionnya gitu :D
Hapusterimakasih mas gilang atas responnya, btw maklum sy baru menggunakan sublime text hehe.
BalasHapuskalau tanpa tekan ctrl+space bisa gak ya mas? langsung muncul pop up nya ketika ngetik. terima kasih sebeleumnya
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
Hapusada 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 :)
Hapusmakasih gan infonya bermanfaat
Hapussama-sama gan :D
Hapusmisi gan, numpang nanya ..
BalasHapusane 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
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 :)
Hapusmas kalo browsernya supaya bisa auto refresh gimana ya?
BalasHapuspake 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 :)
Hapusmas caranya supaya auto reload pada browser gimana yah? makasih sebelumnya.
BalasHapusini mas mba gan coba pake plugin namanya LiveReload https://sublime.wbond.net/packages/LiveReload disana nanti ada caranya langsung hehehe
HapusMas Gilang mo nanya..nih open source gak ya? mksh
BalasHapusklo 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.
HapusNanya mas.. apa bedanya berbayar dengan yg gratis? kan fiturnya sama meski gak ada lisensinya?? makasih mas ats jawabannya...
BalasHapussepengalaman 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
Hapusgan kalau mau autosave dan auto open di browser bijimana gan??? maklum newbie..hehe
BalasHapushmm 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 :)
Hapusgan cara kompile nya gimana ?
BalasHapusmau 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 :)
HapusMas Gilang, ane juga baru nyoba pakai tuh editor, ane tes dengan coding html dan css, lah trus ane save dengan file .html
BalasHapusPas 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 :)
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..
Hapusklo 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 :)