Snippet tuzish haqida

Mirzo Ulug'bek

Keling, snippet nima ekanligini ko'rib chiqamiz.

Barchamiz Visual Studio Code kod tahrirlash uchun ishlatiladigan dasturni ishlatib ko'rganmiz, hamda ushbu(1-rasm) rasmdagidek holatga ko'zimiz tushgan bo'lishi tabiiy.

Agar biz "!" shu undov belgisini yozadigan bo'lsak hamda Enter yoki Tab klavishlarini bosadigan bo'lsak Visual Code kod tahrirchisida tabiiy mavjud bo'lgan quyidagi kod kelib chiqadi (2-rasm)

Bu nima deyishingiz yoki sizga ushbu holat umuman notanish bo'lsa ham hech qanday havotirga o'rin yo'q, hozir ko'rib chiqamiz.
Soddaroq tushuntrishga harakat qilaman. Yuqorida ko'rib turgan rasmdagidek qisqa kod orqali bir nechta kodlar qatorini chaqirish imkoniyati "snippet" deb ataladi. Rasmda qanday holat yuz berdi? Bu yerda biz doim HTML kod yozayotganimizda yozishimiz shart bo'lgan kodlar qatorini atiga "!" belgisi orqali chaqirdik. Bu snippet Visual Code kod tahrirlash dasturida tabiiy holatda mavjud, biz uni o'zimiz qo'shsak(albatta boshqasini) ham bo'ladi.

Qachon snippetga ehtiyoj tug'iladi ?

Siz har qanday dasturlash tili yoki belgilash tili(HTML, CSS) uchun istalgancha snippetlar yozishingiz mumkin. Barcha qilgan loyihalaringizni ko'zdan kechirib chiqib undagi qayta va qayta yozayotgan kodlaringizni aniqlab oling hamda ularni snippetga aylantiring. Siz bu bilan samaradorlikni ancha oshirasiz.

Snippet qanday tuziladi ?

Hozir yuqoridagi rasmga(3-rasm) qarang. Bu yerda men doimiy ishlatadigan "Site header" strukturasining boshlang'ich kodlari. Ushbu kodlarni nusxalab olamiz(nusxalashda kodlar maksimal darajada chapga taqalib turishi kerak (4-rasm, 5-rasm))

(4-rasm)Bu usul xato usul ❌, agar biz ushbu snippetni sihlatmoqchi bo'lsak bizga kerak bo'lmagan bo'sh joylari bilan keladi.

(5-rasm) Bu usul to'g'ri usul, shu usuldan foydalaning ✅

Nusxalab oldik endi nima qilamiz? Kodni istalgan snippet-generatorga tashlaymiz(snippet-generator bu bizga snippet tuzib beradigan maxsus servis) Aslida generatorlar ko'p, quyida sizga o'zim foydalanadigan snippet-generator sayt misolida ko'rsatib beraman.

👉 https://snippet-generator.app

Boshqa servislar

👉 https://vscodesnippetgenerator.azurewebsites.net

👉 https://willwull.github.io/vscode-snippet-generator

Yuqoridagi havola(snippet-generator.app) orqali saytga kiramiz. Bizni shunday interfeys kutib oladi(6-rasm)

(6-rasm) Siz ushbu saytga kirganingizga sayt dizayni o'zgargan bo'lishi mumkin

"Indan keyinchi" deyishingiz mumkin. So'ngra.........

Yaxshisi 7-rasmga qarang 😊

Ushbu barcha amallarni to'g'ri bajargan bo'lsangiz, qo'rqmasdan "Copy snippet" tugmasini bosing (8-rasm)

"Uff, cho'zib yubordingizku yana nima qilamiz" deyishga soshilmang oxirgi amal qoldi. Visual Codeni oching hamda Ctrl+Shift+P tugmalarini bosing sizga ushbu oyna ochiladi (9-rasm)

Qidiruv qismiga quyidagi so'zni(10-rasm) yozing. Hamda ko'rsatilgan joyni bosing.

Sizni ushbu oyna kutib oladi (11-rasm)

Muhim: Bu yerda tanlayotganda hushyor bo'ling !
Siz qaysi fayl uchun snippet tuzayotgan bo'lsangiz su faylni .json faylini tanlashingiz kerak bo'ladi. Men HTML uchun snippet tuzyapman va men html.jsonni tanlayman. Agar siz boshqa faylni tanlasangiz nima bo'ladi, misol uchun css.jsonni. Undan siz tuzgan snippet CSS fayllaringizda ham ishlaydi. Sizga esa CSSda HTML kodning nima keragi bor? Menimcha tushundingiz 😊

Keyin nima bo'ladi ?

Keyin sizni ushbu oyna kutib oladi(12-rasm)

(12-rasm) Izohga olingan kodlar sizga namuna sifatida ko'rsatilgan, istasangiz uni o'chirib yuboring.

Oxirgi qadam qoldi, siz nusxalagan snippetingizni bu yerga paste(tashlaysiz) qilasiz. Agar siz bir nechta snippet yozmoqchi bo'lsangiz, har bir snippetdan so'ng vergul qo'yishni unutmang(13-rasm)

Snippetlarimiz tayyor 😊

Endi biz uni ishlatsak bo'ldi. Uni ishlatish uchun qaysi dasturlash tili yoki belgilash tili uchun yozgan bo'lsak shu til uchun fayl ochamiz. Snippetimizning "prefix" kalitiga biriktirilgan qiymat biz uni qaysi nom bilan chaqirishimiz kerak ekanligini anglatadi(14-rasm)

"prefix" kalitiga biriktirilgan qiymatni Kod muharririda yozsak, bizga muharrirning o'zi o'zida mavjud snippetlarni chiqaradi. Kerakligini tanlab ishlataveramiz(15-rasm)

Snippetning qo'shimcha imkoniyati

Ushbu belgilarni snippetimizning istalgan nuqtasiga qo'yishimiz mumkin(kod qismiga) Keyin biz Tab tugmasini bosadigan bo'lsak kursorimiz biz bergan raqamlar tartibi bo'yicha yuradi(joyini o'zgartiradi) Kursor degan buni nazarda tutyapman (17-rasm)

(17-rasm) Yozayotganimizda "miltillab" turadigan narsa

Bu faqat tezlikni oshirish uchun yordam beradi holos ya'ni hadeb sichqonchani ushlayvermaysiz(sizda touchpad bo'lishi mumkin)