Plugin Sublime Text 3 yang Wajib bagi Pemula sampai Profesional Programer - Selamat pagi para pengunjung, kali ini penulis kembali mendokumentasikan hasil belajar terkait fundamental seorang front end web development dimana dalam sesi pertamanya diajari tentang HTML. Jadi inti dari yang penulis tangkap HTML ini merupakan markup language yang mana akan berjalan ketika me mark sesuatu didalam tag, sebagai contoh tag <b> akan membuat teks tebal ketika me mark suatu kata yang ada didalamnya.
<b>Semangat27</b>
hasil
Semangat27
kata Semangat27 harus diapit dengan tag <b> dan penutupnya </b> agar bisa tebal. Berikutnya pada web development sendiri terdapat tag yang wajib ada yakni tag <header> dan tag <body>, dimana tag <header> berisi code yang didalamnya tidak ditampilkan pada layar sedangkan tag <body> berisi kode yang akan ditampilkan pada layar, intinya seperti itu. Untuk menampilkan hasil code HTML pada layar komputer teman-teman kita dapat menggunakan browser, yang direkomendasikan dalam course yang penulis ikuti yakni dengan browser chrome. Sedangkan untuk menuliskan code kita dapat menggunakan tools sublime text 3 untuk versi offline (harus install) dan menggunakan jsbin.com untuk versi online (harus memiliki koneksi internet).
Artikel sebelumnya Div dan Span dalam HTML untuk belajar Front End Web Dev
Untuk dapat menginstall sublime text 3, teman-teman hanya perlu mengunjungi url ini https://www.sublimetext.com/3 kemudian pilih sublime sesuai dengan sistem operasi yang teman-teman gunakan. Ada Mac, Windows 64 bit dan 32 bit serta untuk linuk 64 bit dan 32 bit, portable version juga tersedia disana. Sedangkan untuk menggunakan jsbin.com, teman-teman bisa mengunjungi langsung jsbin.com dan langsung menggunakannya tanpa perlu registrasi terlebih dahulu, jsbin.com ini juga akan menyimpan kode yang dituliskan disana, cukup dengan mengunjungi url contohnya seperti ini https://jsbin.com/zabakax/edit?html. Di jsbin.com sendiri tidak hanya untuk HTML saja akan tetapi untuk css, javascript juga bisa.
Code awal untuk melakukan front end web development kurang lebih seperti dibawah ini.
Sebagai seorang pemula tentulah menulis code html sebanyak diatas (padahal sedikit) akan sangat lama dan bahkan susah karena tidak hafal satu per satu. Maka dari itulah dibutuhkan kemudahan untuk menuliskannya, hehe. Dalam sublime text dan jsbin terdapat kemudahan itu, akan tetapi pada artikel kali ini penulis akan menuliskan kemudahan yang ada pada sublime text 3 yakni dengan menggunakan plugin yang ada didalamnya.
Pertama dan paling utama yang harus dilakukan adalah menginstall plugin Package Control. Jadi plugin package control yang ada disublime text 3 ini seperti ini dari plugin lainnya. Cara installnya sangat mudah, dengan hanya copas code yang tersedia dalam link ini https://packagecontrol.io/installation kemudian paste kan dalam console sublime text 3 dengan cara klik View >>Show Console.
Setelah selesai di install maka berikutnya teman-teman perlu menginstal beberapa plugin yang ada dalam package control tersebut, beberapa plugin yang wajib digunakan dari para pemula sama profesional hehe, yakni dengan cara :
Artikel sebelumnya Div dan Span dalam HTML untuk belajar Front End Web Dev
Untuk dapat menginstall sublime text 3, teman-teman hanya perlu mengunjungi url ini https://www.sublimetext.com/3 kemudian pilih sublime sesuai dengan sistem operasi yang teman-teman gunakan. Ada Mac, Windows 64 bit dan 32 bit serta untuk linuk 64 bit dan 32 bit, portable version juga tersedia disana. Sedangkan untuk menggunakan jsbin.com, teman-teman bisa mengunjungi langsung jsbin.com dan langsung menggunakannya tanpa perlu registrasi terlebih dahulu, jsbin.com ini juga akan menyimpan kode yang dituliskan disana, cukup dengan mengunjungi url contohnya seperti ini https://jsbin.com/zabakax/edit?html. Di jsbin.com sendiri tidak hanya untuk HTML saja akan tetapi untuk css, javascript juga bisa.
Code awal untuk melakukan front end web development kurang lebih seperti dibawah ini.
<!DOCTYPE html>yakni terdapat Doctype html sebagai tanda bahwa kode tersebut ditulis dengan html 5 kemudian tag html, tag head yang didalamnya terdapat tag title yang ditulis secara hierarchical. Kemudian terdapat tag body yang nantinya isi didalamnya akan ditampilkan dalam layar komputer dibrowser.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Sebagai seorang pemula tentulah menulis code html sebanyak diatas (padahal sedikit) akan sangat lama dan bahkan susah karena tidak hafal satu per satu. Maka dari itulah dibutuhkan kemudahan untuk menuliskannya, hehe. Dalam sublime text dan jsbin terdapat kemudahan itu, akan tetapi pada artikel kali ini penulis akan menuliskan kemudahan yang ada pada sublime text 3 yakni dengan menggunakan plugin yang ada didalamnya.
Pertama dan paling utama yang harus dilakukan adalah menginstall plugin Package Control. Jadi plugin package control yang ada disublime text 3 ini seperti ini dari plugin lainnya. Cara installnya sangat mudah, dengan hanya copas code yang tersedia dalam link ini https://packagecontrol.io/installation kemudian paste kan dalam console sublime text 3 dengan cara klik View >>Show Console.
Setelah selesai di install maka berikutnya teman-teman perlu menginstal beberapa plugin yang ada dalam package control tersebut, beberapa plugin yang wajib digunakan dari para pemula sama profesional hehe, yakni dengan cara :
- Pastikan koneksi internet ada, karena kita akan menginstall plugin dari server sublime text 3
- crtl + shift+ p,
- lalu cari package control: install package
- kemudian pilih beberapa package seperti Alignment, All Autocomplete, BracketHighlighter, Can I Use, BocBlockr, SideBarEnhamcements, Terminal dan trimmer.
Alignment : Agar code rapih berbentuk hirarki
All Autocomplete : Agar mendeteksi ketika menulis sedikit langsung penuh dengan code yang akan dituliskan, sepert code awal yang langsung tertulis ketika baru mengetikan <h maka akan muncul langsung pada sublime text 3 suggestion html yang ketika di enter akan muncul code lengkap standar awal penulisan html (pastika sudah mensave dalam format .html filenya dikomputer).
<!DOCTYPE html>dan seterusnya untuk fungsi plugin lain dapat teman-teman lihat didalam sublime text 3 langsung dengan cara
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
- ctrl + shift + p
- kemudian cari package control: list package
maka akan muncul list dari package yang sudah teman-teman install dalam sublime text 3, berikut keterangan fungsi dari plugin tersebut. Contohnya seperti dibawah ini.
Demikian artikel kali ini semoga bermanfaat, bagikan jika memang perlu dibagi agar dapat menjadi amal jariyah Allahuma Aamiin dan jangan lupa ikuti blog ini agar penulis dapat terus bersemangat menuliskan dokumentasi belajar penulis. Mohon maaf bila ada kekurangan, karena memang tulisan ini dibuat untuk dokumentasi pribadi agar penulis tidak lupa jika sewaktu-waktu ingin mengulangnya kembali dan apabila ada pertanyaan sialakan tuliskan pada kolom komentar dibawah, sampai jumpa di artikel selanjutnya, byebye.
0 Komentar