Tanpa basa-basi lansung aja simak gan! Oh iya gan, saya ga tau ini termasuk tutorial ato ngga :x, komen dibawah gan

 1. Emmet [https://atom.io/packages/emmet] https://s3-ap-southeast-1.amazonaws.com/forum.sk.com/images/emmet_pic.jpg Apa itu emmet? emmet adalah plugin/package yang berfungsi mempercepat penulisan kode agan. Emmet ini juga ada untuk sublime text, notepad++, brackets, dll. Agan bisa lihat contoh penggunaannya di [http://emmet.io]. Untuk melihat sintak-sintaksnya bisa dilihat di [http://docs.emmet.io].

2. Color Picker [https://atom.io/packages/color-picker]. https://s3-ap-southeast-1.amazonaws.com/forum.sk.com/images/cpick_pic_1467269716_514.jpg Nah, yang ini berguna banget buat penulisan kode CSS gan! Dengan memakai plugin/packages ini, agan bisa langsung memakai color pickernya di atom-nya sendiri! Penggunaannya cukup mudah, hanya dengan shorcut "CTRL+ALT+C" untuk windows atau "CMD+SHIFT+C" untuk mac. Untuk color pickernya sendiri, bisa memakai warna RGB(a), hex, hsl, hsv, dan vec.

3. CSS Comb [https://atom.io/packages/css-comb]. https://s3-ap-southeast-1.amazonaws.com/forum.sk.com/images/comb_pic.jpg Yang ini untuk membuat kode css menjadi rapih gan. Misalnya, kode css agan ga ada ";" semua, kan ribet tuh kalo harus ketik satu2. Dengan memakai CSS Comb ini, agan tinggal menggunakan shorcut "CTRL+ALT+C" untuk windows atau "CMD+ALT+C untuk mac.

4. Linter [https://atom.io/packages/linter]. https://s3-ap-southeast-1.amazonaws.com/forum.sk.com/images/linter_pic.jpg Linter ini berfungsi untuk mengkoreksi dan memberi tips untuk kode kita gan. Linter yang disini hanya berfungsi sebagai API gan. Agan harus donlod ini supaya linter yang lain berfungsi. Linter juga ada untuk html, css, javascript, dll. Untuk list fullnya bisa dilihat di [http://atomlinter.github.io].

 5. Beautify [https://atom.io/packages/atom-beautify]. https://s3-ap-southeast-1.amazonaws.com/forum.sk.com/images/beautify_pic.jpg Beautify berfungsi untuk mempercantik/merapihkan kode agan supaya mudah dibaca. Setelah menginstallnya, agan bisa klik kanan dan pilih "Beautify editor contents" untuk menjalankannya.

6. Minimap [https://atom.io/packages/minimap]. https://s3-ap-southeast-1.amazonaws.com/forum.sk.com/images/minimap_pic.jpg Kode agan banyak? panjang? dengan plugin ini, agan ga usah susah2 scroll kebawah untuk mencari kode agan. Setelah menginstallnya, agan bisa mengganti letak minimapnya gan, mau di kiri atau di kanan terserah agan.

7. Todo Show [https://atom.io/packages/todo-show]. https://s3-ap-southeast-1.amazonaws.com/forum.sk.com/images/todo_pic.jpg Lupa mo ngapain? pake plugin ini gan, Dengan plugin ini agan bisa menampilkan todo list di samping layar agan. Cara penggunaanya hanya dengan shorcut "ALT+SHIFT+T" untuk windows/linux atau "CMD+SHIFT+T" untuk mac.

8. Pigments [https://atom.io/packages/pigments]. https://s3-ap-southeast-1.amazonaws.com/forum.sk.com/images/pigments_pic.jpg Pigments berfungsi untuk mengganti background kode warna. Contohnya "#FFFFFF" backgroundnya akan berganti sesuai kode warnanya sendiri.

 9. Javascript Snippets [https://atom.io/packages/javascript-snippets]. https://s3-ap-southeast-1.amazonaws.com/forum.sk.com/images/jss_pic.jpg Kalo ini bisa dibilang "emmetnya" javascript :x.

10. File Icons [https://atom.io/packages/file-icons]. https://s3-ap-southeast-1.amazonaws.com/forum.sk.com/images/ficons_pic.jpg File icons berfungsi untuk menambahkan icon sesuai dengan ekstensinya. Berguna banget untuk yang punya file banyak. Cara installnya bisa lewat atomnya sendiri atau dari command line. Akhirnya, selesai juga gan. Kalo ad pertanyaan komen di bawah :x