Install Package Tambahan pada Sublime Text 3

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Pada kesempatan ini saya ingin membahas mengenai bagaimana caranya menginstall package atau plugin - plugin tambahan ke dalam Sublime Text kita.

Seperti yang telah kita ketahui bahwa Sublime Text 3 telah menyediakan banyak sekali fitur dan kemampuan yang dapat membantu seorang programmer dalam mendevelope script projeknya serta menampilkan jendela editor script yang tidak membosankan. 

Contohnya, Sublime Text 3 memiliki fitur untuk mengganti Color Scheme agar tampilan jendela Sublime tidak membosankan. Namun bagaimana jika pilihan di dalam Color Scheme ini tidak ada yang cocok dengan keinginan kita? Jawabannya adalah dengan menambahkan sendiri fitur baru ke dalam Sublime Text 3 yang telah kita miliki.

Ada orang yang namanya Will Bond (wbond.net) yang telah membuat fitur Package Control yang merupakan tempat di mana semua plugin miliknya Sublime Text ini dia kumpulkan sehingga memudahkan siapapun yang ingin menginstall plugin tambahan untuk Sublime Text. Namun sebelum dapat menginstall plugin - plugin maka package control harus sudah terinstall di dalam Sublime. 

Berikut cara mengintall package control ke dalam Sublime Text 3 :

1. Pastikan fitur package control sudah terinstall di dalam Sublime. Caranya buka menu Preference, lihat apakah sudah muncul sub menu Package Control. Jika sudah muncul artinya package control sudah terintall ke dalam sublime lanjut ke langkah 3. Jika belum maka lanjut ke langkah 2.
   
2. Untuk menginstall package control maka bisa dilakukan membuka langkah - langkah yang sudah dijelaskan di dalam situs resmi : install package control. 
   
3. Pilih menu Preferences - Package Control - Ketikkan : install package - enter
4. Tunggu sampai proses loading repository selesai ( catatan : harus dalam kondisi jaringan internet stabil)
5. Akan muncul jendela Package Control, silakan ketikkan package (plugin) yang ingin diinstall. Jika sudah ditemukan bisa langsung disorot dan enter untuk memulai proses installasi.
   
6. Misalkan kita ingin menginstall color scheme baru dengan nama Yotsuba, maka ketikkan Color Scheme - Yotsuba, kemudian enter. Tunggu sampai proses intallasi selesai.
7. Lakukan restart aplikasi Sublime dengan cara menutup kemudian membuka kembali aplikasinya.
8. Setelah selesai bisa dicek di menu Preferences - Color Scheme, akan bertambah dan bisa kita pilih color scheme yang kita inginkan.
   
9. Untuk instalasi plugin yang lain langkah 1 - 4 sama, yang beda adalah mulai dari langkah 4 ke atas.

Demikian langkah - langkah untuk melakukan instalasi Package tambahan di dalam Sublime Text 3. 

Berikut beberapa plugin yang sering diinstall pada Sublime Text untuk mempermudah pembuatan website : 

1. Emmet - Merupakan plugin yang dapat membantu melengkapi secara otomatis script yang sedang dikerjakan. Contohnya untuk membuat halaman html 5 dengan script dasar html 5 maka di layar kerja cukup diketikkan html5 kemudian tekan spasi, maka secara otomatis tag html 5 lengkap akan diciptakan.
2. Bracket Highlighter - Plugin ini berfungsi untuk membantu mencari pasangan tag – tag saat mengetik script menggunakan sublime text.
3. LiveReload - Plugin ini akan secara otomatis melakukan reload pada web browser, ketika pekerjaan di sublime text di save. Jadi Tidak perlu repot repot lagi melakukan reload di browser untuk melihat hasil pekerjaan.
4. SideBar Enhancements - Dengan plugin ini, kita dapat melakukan pengaturan folder atau file file yang diperlukan dalam membangun web dengan mudah di sidebar. Membuat, Membuka, menghapus, dan mengubah lokasi file atau folder.
5. Color Highlighter - Dengan ini kita bisa langsung melihat perubahan warna secara langsung di code sesuai dengan code warna yang digunakan saat mengarahkan pointer ke code warna.
6. Can I Use - Plugin ini dapat kita gunakan untuk mengecek browser yang support dengan property HTML atau CSS yang kita gunakan. Caranya blok property HTML atau CSS yang ingin diketahui informasinya. Kemudian tekan Ctrl+Alt+F.
7. ColorPicker - Bagi yang tidak hapal code code warna, plugin ini kana sangat membantu. Tekan Ctrl+Shift+C (untuk pengguna Linux/Windows) atau cmd+Shift+C (Untuk Pengguna Mac OS).
8. AutoPrefixer - Plugin ini akan secara otomatis menambahkan prefiks yang diperlukan di CSS. Untuk Menggunakannya Tekan Ctrl+Shift+P, lalu pilih “Autoprefix CSS”. Lihat gambar di bawah.
9. HTML5 Snippet - Untuk menambahkan secara otomatis syntax HTML 5. Untuk menggunakannya klik Plain Text di Sudut Kanan Bawah, lalu pilih HTML 5. 10. Trimmer Berguna untuk membantu menghapus spasi yang tidak berguna pada script yang dapat menyebakan error pada javascript.

Catatan :

Untuk proses instalasi plugin - plugin ini sama dengan yang sudah saya jelaskan di atas.

Semoga artikel ini bermanfaat.

Kembali ke menu Bootstrap

Read More

GoTo Anywhere pada Sublime Text 3

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Pada postingan ini saya ingin membahas mengenai kemampuan yang dimiliki Sublime Text 3 untuk dapat membantu programmer saat ingin menuju atau membuka file tertentu ataupun bagian tertentu dari script program yang sedang dia kerjakan.

Kemampuan ini saya sebut Goto Anywhere. Sekali lagi kita akan menggunakan command pallete untuk menggunakan kemampuan ini.

Berikut contoh penggunaan command pallete untuk membuka file tertentu di dalam folder tertentu :

Perhatikan struktur folder dan file di atas !

1. Untuk membuka file demo.js yang berada di dalam folder dist - js buka jendela GoTo dengan menekan tombo CTRL + P
2. Kemudian ketikkan kata demo, maka akan ditampilkan semua file yang mengandung kata demo, tinggal dipilih dan dienter untuk membuka file yang dimaksud

Catatan :

• Untuk membuka function, class atau selector css maka awali pencarian dengan lambang @
• Untuk menuju baris tertentu dari kumpulan script dapat dilakukan dengan mengetikkan lambang titik dua (:) diikuti nomor baris yang dituju. Contoh : untuk menuju baris 40 maka bisa diketikkan :40

Semoga artikel ini bermanfaat.

Kembali ke menu Bootstrap - Instalasi Package Tambahan Sublime Text 3 

Read More

Command Pallete Sublime Text 3

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Saat pembuatan script / syntax program dengan mengetikkan perintah - perintahnya langsung pada jendela script editor maka tangan kita akan selalu berada di atas keyboard. Untuk menambahkan kecepatan saat melakukan scripting sebaiknya tangan kita tidak sering berpindah antara keyboard dan mouse, untuk itu perlu sebuah cara cepat untuk mengakses semua menu yang disediakan oleh Sublime Text 3.

Sublime Text 3 menyediakan Command Pallete, yaitu sebuah fasilitas untuk mempercepat mengakses menu - menu yang dimiliki Sublime Text 3 selain menggunakan shortcut. Untuk memunculkan command pallete gunakan kombinasi tombol CTRL + SHIFT + P sedangkan untuk menyembunyikan command pallete yang sudah muncul dapat dilakukan dengan menekan tombol ESC. Tampilan jendela command pallete seperti gambar di bawah ini :

Contoh penggunaan Command Pallete :

1. Misal kita ingin mengkonversi ketikan dari huruf kecil semua menjadi huruf besar semua (capital) maka dapat menggunakan perintah di command pallete yaitu Conver Case Upper Case.
2. Misal kita ingin merubah jenis syntax dari script yang sedang kita buat bisa menggunakan menu View - Syntax atau dapat juga menggunakan command pallete dengan mengetikkan : Syntax, kemudian pilih syntax yang ingin dipilih.
3. Command Pallete juga dapat digunakan untuk menampilkan dan menyembunyikan menu - menu yang dimiliki Sublime Text 3 cukup dengan mengetikkan nama menu misalnya Minimap kemudian pilih toogle minimap.

Snippet

Snippet merupakan struktur perintah - perintah yang sudah dibuatkan oleh Sublime Text 3 dan tinggal kita pakai. Snippet ini dapat dipanggil menggunakan command pallete. Snippet ini tampil menurut kelompok syntax yang telah kita pilih sebelumnya.

Contoh penggunaan Snippet dengan menggunakan Command Pallete :

1. Buat sebuah halaman html baru, berikan nama : index.html
2. Setting Syntax menjadi HTML
3. Buka command pallete kemudian ketikkan : html. Setelah muncul pilih snippet html maka akan ditampilkan struktur tag html lengkap.

Semoga artikel ini bermanfaat.

Kembali ke menu Bootstrap - Goto Anywhere Sublime Text 3

Read More

Penggunaan Sublime Text 3

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Terdapat 3 bagian utama dalam jendela aplikasi Sublime Text 3 yang wajib diketahui. Bagian - bagian ini akan sering dibuka dan digunakan oleh setiap pengguna Sublime Text, yaitu :

a. Jendela SideBar

Sidebar ini adalah jendela paling kiri yang bisa dimunculkan ataupun disembunyikan. Cara memunculkan dan menyembunyikan jendela ini adalah dengan menekan kombinasi tombol : CTRL + K, atau CTRL + B.

Kegunaan dari sidebar adalah untuk menampilkan folder dan file - file projek yang sudah dihubungkan dengan Sublime. Dengan memunculkan folder serta file - file projek di dalam sidebar ini maka programmer akan dimudahkan saat proses pembuatan folder dan file baru ataupun jika ingin mengedit isi file yang sudah ada yaitu dengan cukup mendouble klik file yang akan dibuka untuk kemudian diedit.

b. Jendela Script Editor

Di bagian inilah programmer akan mengetikkan semua script dalam pembuatan aplikasi. Kelebihan Sublime Text 3 adalah kemampuan memberikan Syntax Highlighter sehingga memudahkan programmer dalam mengkoreksi script buatanya karena setiap perintah, properties, function maupun procedure masing - masing akan diberikan warna yang berbeda.

Untuk dapat mengaktifkan syntax highlighter ini maka lakukan langkah berikut ini :

1. Buat file baru (CTRL + n), dan simpan (CTRL + S) dengan format : namafile dot extensi. Contoh : index.html
2. Pilih Syntax file baru yang dibuat tersebut melalui menu : View - Syntax - HTML
3. Dengan memilih syntax yang sesuai maka Syntax HighLighter akan aktif dan menyesuaikan dengan script yang diketikkan.
4. Di jendela Script Editor ketikkan : html kemudian tekan tombol tab, maka secara otomatis akan diciptakan tag <html> </html>

 

c. Jendela Mini Map

Jika script dalam sebuah file sudah sangat banyak maka jendela Mini Map akan sangat membantu seorang programmer untuk menuju ke lokasi script tertentu di dalam jendela editor.

Jendela Mini Map merupakan preview dari isi sebuah file yang sedang dibuka. JIka bagian Mini Map diklik maka di bagian script editor akan secara otomatis menyesuaikan tampilannya. Jendela minimap ini dapat ditampilkan maupun disembunyikan sesuai kebutuhan melalui menu View. 

d. Fitur Unggulan Sublime Text 3

 Berikut beberapa fitur unggulan yang dimiliki oleh Sublime Text 3, yaitu :

1. Membuat komentar dengan cepat menggunakan kombinasi tombol CTRL + /
2. Memindahkan 1 baris syntax dengan cepat menggunakan kombinasi tombol CTRL + SHIFT+ UP/DOWN
3. Menggandakan 1 baris syntax dengan cepat menggunakan kombinasi tombol CTRL + SHIFT + D
4. Menghapus 1 baris syntax dengan cepat menggunakan kombinasi tombol CTRL + K
5. Mengedit kata - kata yang sama bersamaan dengan cepat menggunakan Multiple Cursor, caranya adalah dengan memblok kata yang ingin diedit kemudian tekan CTRL + D sampai semua kata tersebut ditemukan setelah itu tinggal anda Edit, maka secara otomatis semua kata tersebut akan diubah menjadi kata yang baru saja anda ketikkan. 
6. Memperbesar atau mengecilkan ukuran font syntax dengan cepat dengan menekan tombol CTR + +/-
7. Gunakan tombol TAB atau CTRL + ] untuk menggeser syntax 1 tab ke kanan dan gunakan tombol SHIFT + TAB atau CTRL + [ untuk menggeser syntax 1 tab ke kiri.
8. Anda dapat menggunakan menu Preference - Color Scheme untuk mengganti tema tulisan dan warna background pada  jendela syntax.

Semoga artikel ini bermanfaat.

Kembali ke menu Bootstrap - Command Pallet Sublime Text 3

Read More

Pengenalan dan Instalasi Sublime Text 3

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Dalam pembuatan halaman web seorang developer web akan sangat membutuhkan aplikasi editor untuk memudahkan dalam proses pengetikan script. Banyak sekali teks editor yang dapat digunakan dalam pembuatan script pemrograman, seperti sublime text 3, notepad ++, code lobster, visual studio code dan sebagainya.

Namun, dalam artikel ini saya hanya akan menjelaskan tentang Sublime Text 3. Sublime merupakan salah satu text editor yang banyak digunakan oleh programmer saat ini. Saya sendiri sudah lama menggunakan text editor sublime untuk mengerjakan projek - projek web saya dan saya menilai text editor ini sangat powerfull dan ringan.

Sublime Text Editor merupakan text editor yang dibuat untuk mempermudah pekerjaan programmer, membantu programmer dalam mengerjakan tugas - tugasnya. Sublime dibangun dengan menggunakan bahasa Phyton dan sampai saat artikel ini saya posting Sublime Text telah mencapai versi 3.

Sublime text editor menyediakan banyak sekali fitur yang sangat bermanfaat, seperti sidebar, syntax highlighter, minimap, multi tab, drag and drop, snipper dan lainya.

Salah satu yang saya suka dari Sublime text editor adalah karena Sublime mendukung penambahan plugin - plugin khusus untuk semakin memudahkan dalam proses pengetikan script program.

Sublime text editor juga dibuat untuk dapat mendukung sistem operasi Windows, Linux dan Mac Os X, sehingga programmer tidak perlu berpindah sistem operasi agar dapat menggunakan Sublime Text Editor.

Cara Instalasi Sublime Text Editor 

1. Download master file exe dari Sublime Text Editor di alamat situs resminya. Berikut ini alamat resmi nya : Sublime Text Editor Download
2. Setelah selesai didownload maka file hasil download dapat langsung didouble klik untuk memulai proses instalasi.
3. Setelah selesai instalasi maka akan diperoleh tampilan jendela aplikasi Sublime Text Editor versi 3 seperti gambar di bawah ini :

Semoga artikel ini bermanfaat.

<< Kembali ke menu Bootstrap  -  Penggunaan Sublime Text 3 >>

Read More