Laman » Pengekodan » Bagaimana untuk Tambah Snipet Kod Custom ke Atom
Bagaimana untuk Tambah Snipet Kod Custom ke Atom
Bukan kebetulan itu Atom, editor kod sumber yang dibuat oleh Github adalah popular di komuniti pembangunan web. Ia bukan sahaja mudah diperpanjang dengan beribu-ribu Pakej Atom, dan mempunyai a sokongan bahasa yang luas, tetapi hampir setiap bahagiannya adalah disesuaikan oleh pengguna.
Dengan memanfaatkan Atom Ciri coretan, anda boleh membuat alur kerja pengekodan anda lebih produktif, seperti oleh menggunakan coretan kod berulang anda boleh mengurangkan bahagian berulang kerja anda. Dalam jawatan ini, saya akan menunjukkan kepada anda bagaimana anda boleh gunakan coretan kod terbina dalam Atom, dan buat coretan tersuai anda sendiri.
Gunakan coretan kod terbina dalam
Secara lalai, Atom datang dengan coretan kod terbina dalam, setiap satu adalah terikat kepada skop kepunyaan jenis fail tertentu. Contohnya, jika anda sedang menjalankan fail dengan .js lanjutan, coretan hanya kepunyaan skop JavaScript akan tersedia untuk fail itu.
Untuk melihat semua coretan yang ada untuk jenis fail semasa anda, tekan Alt + Shift + S. Jika anda memilih coretan dari senarai juntai bawah dan klik padanya, Atom akan memasukkan coretan penuh ke editor anda tanpa sebarang masalah lagi.
Jika anda sudah mengetahui pilihan, anda tidak perlu memuatkan keseluruhan senarai. Apabila anda mula menaip, Atom akan muncul kotak hasil autok lengkap up, yang mengandungi coretan kod yang tersedia kepunyaan skop tertentu dan rentetan yang telah anda taip setakat ini.
Sebagai contoh, jika anda menaip h watak menjadi a .html fail, senarai lungsur dengan semua coretan HTML terbina dalam bermula dengan h akan muncul.
Dengan mengklik pada sebarang pilihan, Atom akan tampal tag HTML penuh (cth. ), dan letakkan kursor dalam tag permulaan dan tutup.
Jika anda tidak mahu mengganggu dengan senarai dropdown, anda boleh mencapai hasil yang sama dengan menaip h1, dan memukul Tab atau Enter - kedua-dua kunci ini masukkan coretan kod penuh kepunyaan awalan coretan.
Menambah potongan kod tersuai anda
1. Cari fail konfigurasi
Untuk menambah potongan kod tersuai anda ke Atom, pertama anda perlu mencari fail konfigurasi dipanggil snippets.cson itu adalah Notasi Objek KopiScript fail.
Klik pada Fail> Potongan ... menu di bar atas, dan Atom akan membuka snippets.cson fail yang anda boleh menambah coretan tersuai anda sendiri.
2. Cari Skop Hak
Anda perlu empat perkara untuk menambah coretan tersuai anda:
The nama skop
The nama cuplikan itu
The awalan yang akan berfungsi sebagai pemegang coretan
The badan coretan
Nama, awalan, dan badan cuplikan (2-4) semata-mata bergantung kepada anda, namun anda mesti cari nama ruang lingkup (1) sebelum menambah coretan tersuai anda.
Untuk mencari skop yang anda perlukan, klik pada Fail> Tetapan menu di bar menu atas, kemudian cari Pakej tab di antara Tetapan. Di sini, jalankan pencarian untuk skop yang anda perlukan, contohnya jika anda ingin menambahkan coretan kod ke bahasa HTML, taipkan HTML ke dalam bar carian.
Klik pada pakej sokongan bahasa bahasa yang dipilih, dan buka Tetapannya sendiri. Antara Tetapan tatabahasa, anda boleh dengan cepat mencari nama skop, seperti yang anda lihat pada tangkapan skrin di bawah.
Berikut adalah beberapa skop yang mungkin anda ingin gunakan dalam projek Atom anda:
Teks kosong: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
TOLAK: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Python: .source.python
Java: .source.java
Jangan lupa bahawa anda perlu tambah titik (.) di hadapan nama skop untuk menggunakannya dalam snippets.cson fail.
3. Buat Potongan Kod Single-Line
Untuk mencipta coretan kod satu baris, anda perlu menambah skop, nama, awalan dan badan coretan kepada snippets.cson fail, menggunakan sintaks berikut:
Contoh cuplikan ini menambah a tag dengan tajuk widget kelas ke skop HTML. Anda boleh menambah coretan kod satu-satu lagi kepada editor Atom anda selepas sintaks ini.
Selepas menyimpan fail konfigurasi, setiap kali anda ketik awalan & tekan kekunci Tab, Atom akan menyisipkan badan coretan milik ke dalam editor kod anda. Nama coretan (dalam contohnya Tajuk Widget) akan dipaparkan dalam kotak hasil autocomplete.
4. Buat Cetakan Kod Multi-Talian
Coretan kod pelbagai baris gunakan sintaks yang sedikit berbeza. Anda perlu menambah data yang sama seperti untuk coretan baris tunggal - skop, nama, awalan, dan badan coretan.
Apa yang berbeza di sini ialah anda perlu meletakkan badan coretan dalam sepasang "" " (tiga petikan berganda).
Jika anda mahu menambah lebih daripada satu coretan adat untuk skop yang sama, tambahkan nama ruang lingkup hanya sekali, kemudian senaraikan coretan satu persatu:
Anda boleh memfasilitasi penggunaan coretan kod tersuai anda dengan menambah tab berhenti kepada badan coretan. Perhentian Tab menunjukkan tempat di mana pengguna boleh menavigasi dengan menggunakan kekunci Tab. Dengan hentian tab anda boleh menyimpan masa yang diperlukan dalam navigasi teks.
Anda boleh menambah tab berhenti menggunakan $ 1, $ 2, $ 3, ... sintaks. Atom akan meletakkan kursor ke tempat yang ia dapati $ 1, maka anda boleh melompat ke $ 2 dengan kekunci Tab, kemudian ke $ 3, dan sebagainya.
Atom membolehkan anda tambah maklumat tambahan untuk coretan anda dengan menggunakan parameter pilihan. Ciri ini boleh berguna jika orang lain juga menggunakan editor anda dan anda ingin membiarkan mereka mengetahui maksud cuplikan itu, atau jika anda mempunyai coretan khusus yang rumit yang anda perlu tambahkan nota kepada mereka.
Nilai parameter pilihan ialah dipaparkan dalam kotak hasil autocomplete yang muncul apabila anda mula menaip awalan. Dalam contoh di bawah, saya menambah penerangan & a Lebih banyak ... pautan ke sebelumnya Tajuk Widget coretan tersuai:
'.text.html.basic': 'Tajuk Widget': 'awalan': 'wti "badan': '"penerangan ':' Anda boleh menambah tajuk widget dengan coretan ini pada widget sidebar anda." descriptionMoreURL ':' http://hongkiat.com '
Apabila pengguna mula menaip awalan wti, maklumat tambahan (keterangan + pautan) akan dipaparkan di bahagian bawah kotak hasil autocomplete. Lihatlah parameter pilihan lain anda boleh gunakan untuk menambah maklumat tambahan pada coretan tersuai anda.
