Buat sublime text mu serba indah dan bisa!

Mungkin jika mau punya sublime text, dan hanya dengan color scheme or theme default, mungkin agak boring kita lihatnya, ini akan lebih nice jika kita punya theme external, seperti Material, Brogrammer, SpaceGray. Mungkin 1200 theme yang ada sekarang ini, jadi sakin banyak kita juga bingung memilihnya, karna bisa jadi 9 dari semua itu kita lihat cocok untuk kita, tapi walaupun begitu, kenapa kita tidak melihat theme or color scheme yang telah di rekomendasikan para developer.

Ok, kali ini kita akan membuat theme seperti ini. Facebook

Nah ini lah yang di sebut Material Theme + Facebook Color scheme, yang sekarang ini sangat popular sekali. Ok, dan disini kita tidak akan hanya membahas bagaimana cara membuat theme yang jadi kren, tapi kita juga akan membahas bagaimana cara membuat semua ini jadi lebih kren dan cepat.

Nah jadi sebelum itu, kamu juga harus punya package installed. Jadi sehingga kamu tekan ctrl + shift + p dan mengetikkan install, maka yang akan keluar ada install package. Nah jika kamu tidak mengerti bagaimana cara menggunakan nya kamu bisa langsung pergi ke http://www.imlocora.org/article/sublime-text-installing-package. When you done with that now you're ready to go.

Ok yang pertama akan kita bahas adalah bagaimana cara menginstall theme nya, maka langsung saya. Saya tidak akan shoot the screen. Instead hanya akan memberitahu Bagaiaman sebenarnya cara kerjanya.

Install theme

Ok jika begitu, lihat step per step dibawah.

Ctrl + Shift + P
Ketikkan install package (enter)
Lalu ketikkan "Material" tanpa double quotes
Lalu click atau enter "Material Theme".
Nah setelah itu tunggu beberapa saat.
Ketika selesai kamu bisa pergi ke Preferences > Setting user dan pastekan code dibawah.

{

    "color_scheme": "Packages/Colorsublime - Themes/Facebook.tmTheme",

    "font_face": "Fira Code",

    "font_size": 13,

    "ignored_packages":

    [

        "Vintage"

    ],

    "line_padding_bottom": 7,

    "show_full_path": false,

    "theme": "Material-Theme.sublime-theme",

    "translate_tabs_to_spaces": true,

    "word_wrap": "auto"

}

Nah sebelumnya kita bisa lihat settingnya pasti error, ok jika sudah maka jangan langsung di save, lagi lagi kamu perlu install facebook color scheme. Caranya sama dengan install material theme. Ok langsung saja lihat stepnya.

Install color scheme

Ctrl + Shift + P
Enter install package
Dan ketikkan colorsublime (Enter)
When done, tunggu beberapa saat.

Nah ketika sudah selesai kamu bisa lihat di nanti nya semua color scheme yang kamu inginkan. Lalu cara menginstall color sublime itu bagaimana, sangat gampang, nah lihat step dibawah.

Install facebook

Ctrl + Shift + P
Ketikkan install theme (Enter)
Nah setelah itu kamu akan lihat banyaknya color scheme. Tapi kita hanya butuh 1 untuk tutorial ini yaitu "Facebook"
Ketikkan facebook pada textboxt given. (Enter)
Nah sekarang kamu sudah bisa menyimpan Setting user file, belum.

Tunggu dulu, kita akan menginstall font sebelum kita menyimpan nya, nah fontnya itu dimana emangnya, ini dia https://github.com/tonsky/FiraCode. Setelah itu kamu bisa clone atau download zip dan kemudian install di os kamu, setelah itu silahkan save file setting user dan kamu akan langsung bisa lihat perubahan yang derastis. Nah mungkin kamu lihat agak berbeda warna antara color scheme dengan theme. Nah itu sangat mudah untuk menyamakannya. Go to Preferences > browse packages dan open folder Colorsublime - Themes, setelah itu kamu lihat Facebook.tmTheme Nah kamu bisa lihat bagian code dibawah.

    <dict>

      <key>comment</key>

      <string>

        252B39 - Fb background

      </string>

      <key>settings</key>

      <dict>

        <key>background</key>

        <string>#263238</string>

        <key>caret</key>

        <string>#979E86</string>

Kamu bisa lihat bagian backgroud, itu jika kamu perhatikan pasti beda color #263238 dengan punya kamu sendiri, nah disini kamu hanya dituntut untuk menyamakan warna dibawah dengan punya kamu.

        <key>background</key>

        <string>#263238</string>

Nah jika sudah maka sekarang tugas kita tentang theme sudah selesai, sekarang waktunya menginstall package yang sangat penting sekali untuk kamu punya. Ok yang pertama kali saya akan kenal adalah yang di sebut emmet.

Emmet

Terserah jika kamu pernah dengar atau pun belum tapi yang jelas emmet adalah salah 1 package inti kita pada tuts kali ini. Jika kamu tidak mengetahui emmet itu tidak masalah. Tapi jika ingin baca baca kamu bisa ke http://emmet.io/.

Nah sebenarnya apa guna emmet, mengapa kita harus memakainya, banyak sekali kelebihannya, kita bisa membuat code lebih cepat dari pada tidak memakainya. Emmet tidak hanya untuk sublime text, bahkan a lot of editor text support dengan emmet, terkecuali notepad++.

Ok sekarang lansung saja kita install dan langsung di implementasikan bagaimana cara kerjanya. Lihat step - step berikut dan jangan sampai keliru karna ini luar biasa gampangnya :) .

Ctrl + Shift + P
Install packages
Ketik Emmet (Enter)
Wait for a second

Ketika sudah selesai kamu di tuntut untuk merestart sublime text kamu, setelah kamu restart dan kamu lihat ada error, itu tidak masalah, restart sekali lagi dan kamu ready to go. Ok sekarang bagaimana cara menggunakan emmet tersebut. Kesimpulan memakai emmet itu kan agar kita bisa cepat mengetik hanya dengan menggunakan beberapa logika saja. Coba lihat code dibawah!

<div class="container">

    <div class="row">

        <div class="col-md-6"></div>

        <div class="col-md-6"></div>

    </div>

</div>

Sangat gila sekali jika kamu mau mengetik seperti ini terang - terangan, kenapa harus jika ada cara lebih mudah. Apa ia ada, 100%, lihat code dibawah!

.container>.row>.col-md-6*2

Lalu kamu bisa tab, dan hasilnya ia kamu bisa lihat sendiri, sangat membuat kita perasa bukan. Nah cobak lihat yang 1 lagi dibawah.

.navigation>ul>li*5>a{Link $}

Jika kamu tab apa terjadi, pastinya kamu dapat results seperti ini.

<div class="navigation">

    <ul>

        <li><a href="">Link 1</a></li>

        <li><a href="">Link 2</a></li>

        <li><a href="">Link 3</a></li>

        <li><a href="">Link 4</a></li>

        <li><a href="">Link 5</a></li>

    </ul>

</div>

Bisa lihat kan gimana asyiknya, nah sekarang logikannya gampang sekali, kamu lihat tand ">", itu adalah tanda jika kita ingin memasukkan element baru di dalam element sebelumnya. Coba lihat code dibawah.

<div class="jumbotron">

    <div class="container"></div>

</div>

Disini jika kita lihat pastinya container tepat berada di dalam jumbotron, maka logika emmetnya seperti

.jumbotron>.container

Nah bagaimana jika seperti ini.

<div class="media">

    <div class="pull-left">

        <img src="" alt="" class="img-default">

    </div>

</div>

Hard ya, gampang sekali, tambah kan aja lagi tanda ">" setelah class pull-leftnya, seperti ini.

.media>.pull-left>img.img-default

Saya rasa anda ngerti, bagaimana dengan tanda *, nah ini logikanya berapa banyak element yang ktia inginkan, contohnya kita punya ul dan li pastinya seperti ini.

<ul>

    <li><a href="">Link 1</a></li>

    <li><a href="">Link 2</a></li>

    <li><a href="">Link 3</a></li>

    <li><a href="">Link 4</a></li>

    <li><a href="">Link 5</a></li>

</ul>

Jika saya terang - terangan mengetikkan markup ini bukannya itu sangat membuat buang waktu, yang ianya kita sudah tau apa yang ingin kita lakukan tapi karna kita tidak tau cara cepat, kita ketik juga sampai jari mengeluh karna pegal.
Cara nya itu sangat gampang, sekarang kita bisa lihat li di dalam ul sudah jelas kita menggunakan tanda >, nah lihat code dibawah

ul>li*5>a{Link $}

Tanda bintang adalah tanda berapa kali li akan dihasilkan, bagaimana dengan $, itunya hanya hitungan saja dalam emmet, maka hasiln nantinya link 1, link 2 ....
Kamu pasti tertarik dengan cara ini.

<div class="container">

    <header>This is header</header>

    <div class="content">This is content</div>

    <aside>Sidebar</aside>

    <footer>Footer for copyright</footer>

</div>

Apa bisa sepanjang itu kita buat, sepanjang manapun bisa asal logikany benar, lihat di dalam container setelah header kita ada class content dan dikuti dengan footer lagi. Itu sangat gampang, karna dengan hanya menambahkan tanda + setelah haeder maka dia akan membuat 1 tag lagi dan itu masih tetap di dalam container. Dan kok bagiaman cara membuat text otomatis, itu hanya dengan cara menambah kan {text} lalu tab, seprti h1{Hello world}, Jika kamu tab maka hello world text akan berada dalam h1.
Lihat logika dibawah, itulah cara bagaimana membuat template di atas.

.container>header{This is header}+.content{This is content}+aside{Sidebar}+footer{Footerfor copyright}

Ok done, sekarang tugas mu adalah google for package apa saja yang sangat penting dipakai, nah setelah itu kamu bisa install, nah list dibawah adalah package yang dari dulu tidak pernah tinggal pada sublime text saya.

AdvancedNewFile
SidebarEnhancements
CSSFontFamily
Emmet
Bootstrap 3 Snippets
Colorsublime
DocBlockr
EditorConfig
SASS & SASS Snippets
SASS & SCSS Snippets
CSS3
Laravel Blade Highlighter
Laravel 5 Snippets
Material Theme

Itulah list yang ada pada sublime text saya sekarang ini, nah jika kamu mau, silahkan lakukan dengan cara seperti kita melakukan sebelum sebelumnya, ok terimakasih telah membaca article ini, semoga kamu dapat ilmu dan saya Irsyad Trimakasih :)

Labels tips-tricks, tutorial