Atom adalah sebuah text editor yang memiliki lisensi open source yang tersedia untuk platform OS X, Linux dan Windows. Atom ini dibuat oleh GitHub dan di klaim sebagai text editor yang bisa di custom dengan merubah file configurasinya. Atom ini mirip dengan salah satu text editor favorit saya yaitu Sublime Text, karena Atom ini memang dibuat dengan menggunakan Sublime Text sebagai referensinya. Atom ini bersifat modular jadi klo kita butuh sebuah plugins tambahan kita bisa menginstall dan melakukan konfigurasi agar sesuai dengan harapan kita.
Jika kita ingin menggunakan Atom Text Editor ini kita bisa mengunduhnya dari tautan berikut ini download Atom.
Salah satu keunggulan dari Atom Text Editor adalah tersedianya banyak plugins yang bisa membantu pekerjaan kita. Kita bisa melihat plugins yang paling banyak digunakan melalui halaman plugins yang terdapat pada Atom atau pada halaman daftar packages pada Atom.
Salah satu plugin yang banyak digunakan dalam atom adalah Emmet. Plugin ini dapat digunakan untuk mempersingkat dalam pengetikan coding program. Langkah - Langkah agar dapat menggunakan plugin emmet di atom adalah :
1. Install Emmet
Install Langsung Dari Atom :
- Buka Prefenrence/Setting
- Pilih Bagian Instalasi
- Cari Emmet Pada Package
- Jika sudah ditemukan klik pasang/install
Install Manual :
cd ~/.atom/packagesgit clone https://github.com/emmetio/emmet-atomcd emmet-atomnpm install
2. Fungsi Keyboard Umum Untuk Emmet
| Command | Darwin | Linux/Windows |
|---|---|---|
| Expand Abbreviation | tab or shift + ⌘ + e | tab or ctrl + e |
| Expand Abbreviation (interactive) | alt + ⌘ + enter | ctrl + alt + enter |
| Wrap with Abbreviation | ctrl + w | ctrl + alt + w |
| Balance (outward) | ctrl + d | ctrl + shift + e |
| Balance (inward) | alt + d | ctrl + shift + 0 |
| Go to Matching Pair | ctrl + alt + j | ctrl + alt + j |
| Next Edit Point | ctrl + → | ctrl + alt + → |
| Previous Edit Point | ctrl + ← | ctrl + alt + ← |
| Select Next Item | ctrl + shift + → | ctrl + shift + . |
| Select Previous Item | ctrl + shift + ← | ctrl + shift + , |
| Toggle Comment | ⌘ + / | ctrl + shift + / |
| Split/Join Tag | shift + ⌘ + j | ctrl + shift + ` |
| Remove Tag | ⌘ + ' | ctrl + shift + ; |
| Evaluate Math Expression | shift + ⌘ + y | ctrl + shift + y |
| Increment Number by 0.1 | ctrl + alt + ↑ | alt + ↑ |
| Decrement Number by 0.1 | ctrl + alt + ↓ | alt + ↓ |
| Increment Number by 1 | ctrl + alt + ⌘ + ↑ | ctrl + ↑ |
| Decrement Number by 1 | ctrl + alt + ⌘ + ↓ | ctrl + ↓ |
| Increment Number by 10 | ctrl + alt + ⌘ + shift + ↑ | shift + alt + ↑ |
| Decrement Number by 10 | ctrl + alt + ⌘ + shift + ↓ | shift + alt + ↓ |
| Reflect CSS value | shift + ⌘ + r | ctrl + shift + r |
| Update Image Size | ctrl + i | ctrl + u |
| Encode/Decode image to data:URL | ctrl + shift + i | ctrl + ' |
| Update Tag | ctrl + shift + u | ctrl + shift + ' |
| Merge Lines | shift + ⌘ + m | ctrl + shift + m |
3. Contoh Pertama :
Ketikkan text seperti di bawah ini:
html>head+body
Hasilnya jika teken kombinasi keyboard ctrl+e adalah seperti berikut ini :
<html> <head></head> <body> </body> </html>
4. Contoh 2
Ketikkan text seperti di bawah ini:
#page>ul#buah>li*3>a{Buah}
Hasilnya jika teken kombinasi keyboard ctrl+e adalah seperti berikut ini :
<div id="page"> <ul id="buah"> <li><a href="">Buah</a></li> <li><a href="">Buah</a></li> <li><a href="">Buah</a></li> </ul> </div>
Sumber :
- http://belajarngoding.com/review-tentang-atom-text-editor/
- https://atom.io/packages/emmet
SEMOGA BERMANFAAT
0 komentar
Posting Komentar