Beranda » Coding » Cara Menambahkan Cuplikan Kode Kustom ke Atom
Cara Menambahkan Cuplikan Kode Kustom ke Atom
Bukan kebetulan kalau itu Atom, editor kode sumber yang dibuat oleh Github populer di komunitas pengembangan web. Tidak hanya itu mudah diperpanjang dengan ribuan Paket Atom, dan memiliki dukungan bahasa luas, tetapi hampir setiap bagiannya adalah dapat disesuaikan oleh pengguna.
Dengan memanfaatkan Atom Fitur cuplikan, Anda dapat membuat alur kerja pengkodean Anda lebih produktif, seperti oleh menggunakan kembali cuplikan kode berulang Anda dapat mengurangi bagian berulang pekerjaan Anda. Dalam posting ini, saya akan menunjukkan kepada Anda bagaimana Anda bisa gunakan cuplikan kode bawaan Atom, dan buat cuplikan khusus Anda sendiri.
Gunakan cuplikan kode bawaan
Secara default, Atom hadir dengan cuplikan kode bawaan, masing-masing terikat pada ruang lingkup milik jenis file tertentu. Misalnya, jika Anda mengerjakan file dengan .js ekstensi, hanya potongan milik lingkup JavaScript yang akan tersedia untuk file itu.
Untuk melihat semua cuplikan yang tersedia untuk jenis file Anda saat ini, tekan Alt + Shift + S. Jika Anda memilih cuplikan dari daftar drop-down dan mengkliknya, Atom akan memasukkan cuplikan lengkap ke editor Anda tanpa kerumitan lebih lanjut.
Jika Anda sudah mengetahui opsi-opsi tersebut, Anda tidak perlu memuat seluruh daftar. Ketika Anda mulai mengetik, Atom muncul kotak hasil pelengkapan otomatis Facebook, yang berisi potongan kode yang tersedia milik lingkup tertentu dan string yang Anda ketikkan sejauh ini.
Misalnya, jika Anda mengetikkan h karakter menjadi a .html file, daftar dropdown dengan semua cuplikan HTML bawaan yang dimulai dengan h akan muncul.
Dengan mengklik opsi apa saja, Atom akan rekatkan tag HTML lengkap (misalnya. ), dan posisikan kursor di dalam tag awal dan penutup.
Jika Anda tidak ingin repot dengan daftar dropdown, Anda dapat mencapai hasil yang sama dengan mengetik h1, dan menekan Tab atau Enter - kedua tombol ini masukkan potongan kode lengkap milik awalan cuplikan.
Menambahkan cuplikan kode khusus Anda
1. Temukan file konfigurasi
Untuk menambahkan cuplikan kode khusus Anda ke Atom, pertama Anda harus menemukan file konfigurasi dipanggil snippets.cson itu adalah Notasi Objek CoffeeScript mengajukan.
Klik pada File> Cuplikan ... di bilah atas, dan Atom akan membuka menu snippets.cson file tempat Anda dapat menambahkan cuplikan khusus Anda sendiri.
2. Temukan Lingkup Yang Tepat
Anda akan perlu empat hal untuk menambahkan cuplikan khusus Anda:
Itu nama ruang lingkup
Itu nama cuplikan
Itu awalan yang akan berfungsi sebagai pegangan cuplikan
Itu tubuh cuplikan
Nama, awalan, dan isi cuplikan (2-4) semata-mata tergantung pada Anda, namun Anda harus temukan nama ruang lingkup (1) sebelum menambahkan potongan khusus Anda.
Untuk menemukan ruang lingkup yang Anda butuhkan, klik pada File> Pengaturan di bilah menu atas, lalu cari menu Paket tab di antara Pengaturan. Di sini, jalankan pencarian untuk cakupan yang Anda butuhkan, misalnya jika Anda ingin menambahkan potongan kode ke bahasa HTML, ketik HTML ke dalam bilah pencarian.
Klik pada paket dukungan bahasa dari bahasa yang dipilih, dan buka Pengaturannya sendiri. Diantara Pengaturan tata bahasa, Anda dapat dengan cepat menemukan nama ruang lingkup, seperti yang dapat Anda lihat pada tangkapan layar di bawah ini.
Berikut ini beberapa cakupan yang mungkin ingin Anda gunakan dalam proyek Atom Anda:
Teks Biasa: .text.plain
HTML: .text.html.basic
CSS: .source.css
Kelancangan: .source.sass
KURANG: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Python: .source.python
Jawa: .source.java
Jangan lupa bahwa Anda harus melakukannya tambahkan satu titik (.) di depan nama ruang lingkup untuk menggunakannya di Internet snippets.cson mengajukan.
3. Buat Cuplikan Kode Single-Line
Untuk membuat cuplikan kode satu baris, Anda perlu menambahkan cakupan, nama, awalan, dan isi cuplikan ke snippets.cson file, menggunakan sintaks berikut:
Cuplikan contoh ini menambahkan a tag dengan widget-title kelas ke lingkup HTML. Anda dapat menambahkan potongan kode single-line lainnya ke editor Atom Anda mengikuti sintaks ini.
Setelah menyimpan file konfigurasi, setiap kali Anda ketik awalan & tekan tombol Tab, Atom akan menempelkan badan cuplikan milik ke dalam editor kode Anda. Nama cuplikan (dalam contoh Judul Widget) akan ditampilkan di kotak hasil pelengkapan otomatis.
4. Buat Cuplikan Kode Multi-Line
Cuplikan kode multi-baris gunakan sintaks yang sedikit berbeda. Anda perlu menambahkan data yang sama dengan cuplikan baris tunggal - ruang lingkup, nama, awalan, dan badan cuplikan.
Yang berbeda di sini adalah bahwa Anda perlu menempatkan potongan tubuh dalam sepasang "" " (tiga tanda kutip ganda).
Jika Anda ingin menambahkan lebih dari satu cuplikan khusus ke cakupan yang sama, tambahkan nama cakupan hanya sekali, lalu daftarkan snipet satu per satu:
'.text.html.basic': 'Judul Widget': 'awalan': 'wti "body': '"Tautan Gambar ':' awalan ':' iml" body ': "" " "" "
5. Tambahkan Tab Stop
Anda selanjutnya dapat memfasilitasi penggunaan potongan kode khusus dengan menambahkan tab berhenti ke badan cuplikan. Tab stops menunjukkan titik-titik di mana pengguna dapat menavigasi dengan menggunakan tombol Tab. Dengan penghentian tab, Anda dapat menghemat waktu yang dibutuhkan navigasi dalam teks.
Anda dapat menambahkan berhenti tab menggunakan $ 1, $ 2, $ 3, ... sintaksis. Atom akan memposisikan kursor ke tempat yang ditemukannya $ 1, maka Anda bisa melompat ke $ 2 dengan tombol Tab, lalu ke $ 3, dan seterusnya.
Atom memungkinkan Anda untuk melakukannya tambahkan informasi tambahan ke cuplikan Anda dengan menggunakan parameter opsional. Fitur ini dapat berguna jika orang lain juga menggunakan editor Anda dan Anda ingin memberi tahu mereka tujuan cuplikan, atau jika Anda memiliki cuplikan khusus yang sangat rumit sehingga Anda perlu menambahkan catatan kepada mereka.
Nilai parameter opsional adalah ditampilkan di kotak hasil pelengkapan otomatis yang muncul saat Anda mulai mengetikkan awalan. Pada contoh di bawah ini, saya menambahkan deskripsi & a Lebih… tautan ke sebelumnya Judul Widget cuplikan khusus:
'.text.html.basic': 'Judul Widget': 'awalan': 'wti "body': '"description ':' Anda dapat menambahkan judul widget dengan cuplikan ini ke widget sidebar Anda." descriptionMoreURL ':' http://hongkiat.com '
Saat pengguna mulai mengetikkan awalan wti, informasi tambahan (deskripsi + tautan) akan ditampilkan di bagian bawah kotak hasil pelengkapan otomatis. Lihatlah parameter opsional lainnya Anda dapat menggunakan untuk menambahkan informasi tambahan ke cuplikan khusus Anda.
