Senin, 24 April 2017

Tutorial Sublime Text 3 – #15 Coding Modes

    Assalamualaikum Wr. Wb. Selamat malam sahabat Lupa code semuanya, berjumpa lagi bersama saya selaku admin dari blog lupacode – tutorial pemrograman Bagaimana kabar kalian hari ini ? Semoga kita selalu dalam keadaan sehat walapiat serta tetap dalam lindungan Allah swt. Pada pembahasan kemarin kita telah membahas mengenai seri sublime text yaitu pada materi Tutorial Sublime Text 3 - #14 Sidebar Enhancements & Alignment bagi temen – temen yang ketinggalan materi tutorial kemarin sahabat lupa code semua dapat mengunjungi halaman Daftar Isi pada blog ini untuk melihat seluruh daftar materi yang sudah kita bahas pada pembahasan sebelumnya.

Tutorial Sublime Text 3 – #15 Coding Modes

       Pada pembahasan materi kali ini kita akan membahas sesuatu yang berbeda, kita akan membahas mengenai bagaimana konfigurasi lingkungan sublime text agar sesuai dengan lingkungan kita pada saat ngoding. Saya menyebutnya ada dua mode pada saat kita melakukan ngoding yang pertama ada

# Multiple layout
Jadi kita bisa membuat beberapa layout pada tampilan sublime text kita 

#Distraction-free mode
Yang ini kita bisa sebut mode bebas gangguan

  Untuk lebih jelasnya nanti kita bisa lihat contohnya, yang pertama kita bahas dulu mengenai Multiple layout. Contohnya misalkan saya mempunyai tiga buah file, ada html, css dan javascript. Biasanya kalau kalian sebagai web desainer atau web developer pasti kalian sering banget bekerja dengan ketiga file tersebut. ketiga buah file ini saling terkait dimana biasanya kalau kalian mengedit salah satu file ini maka akan berdampak pada file yang lainnya. Kemudian biasanya kalian akan berpindah – pindah untuk mengedit tiap-tiap file tersebut.  
         Sebelum kita masuk kedalam mode yang pertama #Multiple layout saya akan memberitahu dulu kepada kalian bahwa ada shortcut yang akan dengan mudah untuk kita agar dapat berpindah – pindah dari satu file ke dalam file yang liannya dengan sangat cepat. Shrotcut untuk berpindah – pindah dari file yang satu kedalam file yang liannya adalah CTRL + TAB kita hanya perlu menekan shortcut CTRL + TAB untuk dapat berpindah – pindah dari satu file kedalam file yang lainnya.
      Sekarang mode yang pertama ini akan memungkin kan untuk kalian agar dapat melihat ke tiga file tersebut dengan sekaligus atau secara bersamaan dengan membuat tampilannya menjadi beberapa kolom atau baris.
          Yang perlu kita lakukan adalah kita masuk kedalam menu View -> Layout -> Nah disitu kalian dapat pilih, dan defaultnya adalah single. Kemudian kalian dapat pilih menjadi 2 colom

multiple layout - Lupacode

     Maka nanti akan secara otomatis akan terpisah seperti gambar diatas. Dan untuk memindahkan file tersebut kedalam kolom yang sebelah kanannya kalian hanya perlu drag saja tab nya dari file yang akan kalian pindahkan ke sebelah kanan. Jadi kita dapat denga mudah untuk melakukan pengerjaan secara langsung tanpa harus berpindah file. Atau kalian ingin membuatnya menjadi tiga kolom, kalian hanya tinggal klik view -> layout -> colomuns: 3  maka secara otomatis akan dibuatkan tiga kolom seperti ini

multiple layout 3 Colomuns- Lupacode

         Apalagi jika kalian punya monitor white screen yah, ini akan sangat membantu karna kalian dapt melihat ke-tiga file nya sekaligus. Jadi kalau kalian nyaman dengan seperti ini kalian bisa gunakan multiple layout. Tidak saja hanya kolom yang dapat dipisahkan, jika kalian ingin memisahkan nya menjadi baris itu juga bisa dilakukan. Kalian hanya perlu masuk kedalam menu view -> layout -> kemudian pilih saja rows, maka akan dibuatkan terpisah menjadi baris seperti gambar dibawah ini

multiple layout Rows 2- Lupacode

         Atau kita juga bisa membuat menjadi seperti ini misalnya, saya ingin membuat yang sebelah kiri menjadin kolom, kemudian yang sebelah kanannya baris, contoh saaya ingin yang sebelah kiri itu file html, dan sebelah kanan yang atas itu css dan yang bawahnya adalah javascript, caranya adalah seperti ini. Kalian ubah dulu menjadi dua kolom, lalu pindahkan saja file css dan javascript nya ke sebelah kanan dan sekarang kita ingin membagi kolom yang sebelah kanan nya menjadi dua baris, caranya adalah kita masuk kedalam menu View -> Groups -> Max Colomuns: 2 da ini artinya tidak akan lebih dari dua kolom. Setelah itu kita masuk lagi ke dalam menu Vew -> Groups -> New Groups Maka nanti dia akan dua kolom seperti gambar dibawah ini

multiple layout Rows & Colomuns - Lupacode

             Jadi sekarang kalian bisa lihat disebelah kiri ada html karna biasanya html ingin terlihat lebih banyak, dan disebelah kanan atas ada css kemudian dikanan bawah ada javascript seperti itu yah, jadi kalau kalian nyaman dengan ini silahkan digunakan. Memang mungkin pada awalnya pusing juga ada banyak tampilan dalam satu layar tapi kalau kalian ingin melihat semuanya sekaligus mungkin cara ini bisa membantu.
        Kemudian supaya bisa lebih cepat lagi kalian gak perlu memakai mouse, karna sublime text telah menyediakan shortcut nya untuk melakukan semua ini. Kalian bisa lihat pada menu view -> layout kalu kalian ingin membuat menjadia colomuns single kalian cukup tekan shortcut nya ALT + SHIFT + 1 maka akan kembali lagi seperti defaultnya yaitu satu kolom. Ya jadi silahkan sesuaikan dengan keinginan masing – masing
          Ada lagi shortcut untuk dapat memindahkan file kedalam kolom dengan cepat, jadi kalian tidak harus menggunakan mouse lalu mendrag file tersebut untuk dipindahkan ke dalam kolom yang lain. Caranya adalah pertama kalian pindahkan dulu fokos atau kursornya kedalam file yang ingin kalian pindahkan. Contohnya kolomnya ada tiga, jika kalian ingin pindahkan file tersebut ke dalam kolom dua makan kita hanya perlu menekan CTRL + SHIFT + 2 maka file tersebut akan langsung berpindah ke dalam kolom yang ke – dua, atau jika kita ingin pindahkan file yang lainnya kedalam kolom tiga makan yang pertama kita simpan dulu kursornya kedalam file yang ingin kita pindahkan kemudian kita tekan CTRL + SHIFT + 3 maka secara otomatis file akan langsung berpindah kedalam kolom 3. Jadi silahkan bermain – main dengan shortcut nya juga, agar dapat meminimalisir penggunaan mouse dan trackpad
             Mode yang ke-dua itu disebutnya distraction-free mode atau mode bebas gangguan ini adalah kebalikan dari multiple layout. Kalau tadi multiple layout fungsinya adalah untuk melihat banyak file sekaligus, kalau ini digunakan hanya fokus untuk ke satu file saja. kalian bisa akses mode nya dengan masuk ke dalam menu View -> Enter Distraction Free Mode maka tampilannya akan menjadi seperti dibawah ini
Distraction free mode - Lupacode

     Kalian dapat lihat tampilan diatas dalam mode distraction mode maka sidebar nya hilang kemudian Start menu nya juga hilang, hal – hal yang tidak kita perlukan itu dihilangkan oleh si sublime text. Secara default menu nya masih ada tapi biasanya kalau saya menggunakan mode distraction mode menu nya saya hilangkan juga, jadi kalian masuk ke view -> hide menu maka sekarang yang kelihatan hanya menu nya saja yang sedang aktif.
     Biasanya kalau saya menggunakan distraction free mode saya gabunggkan dengan teknik searcing yang telah kita pelajari pada materi tutorial yang sebelumnya Go To Anything dengan menggunakan shortcut nya CTRL + P untuk kita agar dapat berpindah ke dalam file lain. Jadi pastikan kalau kalian menggunakan Distraction Free Mode kalian harus betul – betul tau dulu struktur file nya ada apa saja dan fungsinya ada apa saja dan kodenya seperti apa. Jadi kalau saya mau pindah kedalam file index maka saya perlu ketikan CTRL + P dan saya tuliskan index maka akan langsung berpindah pada file index dengan sangat cepat.
        Jadi silahkan dipilih ke dua mode tadi sehingga ngoding kalian menjadi lebih cepet lagi. Oke jadi itu yang ingin saya jelaskan pad materi pembahasan kali ini, mudah – mudahan bisa membantu yah. Kalau misalkan ada yang bingung silahkan ditanyakan saja
       Baiklah untuk pembahasan materi tutorial yang pertama ini saya cukupkan sampai disini dulu dan selanjutnya kita masih akan membahas mengenai seri sublime text ini, jadi tetap kunjungi terus blog lupacode ini agar kalian mendapatkan materi baru setiap harinya dan kita tetap belajar bersama – sama disini. Saya admin dari blog lupacode undur diri sampai berjumpa didalam pembahasan materi selanjutnya yaitu pada Tutorial Sublime Text 3 – #16 Theme 

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon