VS Code snippetlari: takroriy kodni bir so'z bilan yozish

Qisqacha: Snippet — qisqa so'z yozib Tab bosganda butun shablonga aylanadigan matn bo'lagi. Masalan, JavaScript faylida log yozib Tab bossangiz, console.log(); paydo bo'ladi va kursor qavs ichida turadi. O'z snippetingizni JSON faylda yozasiz: prefix — qisqa so'z, body — shablon, $1, $2 — kursor to'xtaydigan joylar, $0 — oxirgi joy.

Bu darsda

• VS Code'dagi tayyor snippetlarni topib ishlatasiz.
• O'z snippetingizni prefix, body, description bilan yozasiz.
• $1, $2, $0 va ${1:matn} bilan kursor yo'lini boshqarasiz.
• Fayl nomi va sana kabi o'zgaruvchilarni snippetga qo'yasiz.
• Snippetni faqat o'zingiz uchun yoki butun loyiha uchun saqlashni farqlaysiz.

Oldin bilishingiz kerak: VS Code sozlamalari: settings.json va profillar, Kengaytmalar: tanlash va xavfsizlik, JSON: dasturlar tili.

1. Nega bu kerak?

Telefoningizda "shablon javoblar" bormi? Masalan, Telegram'da /manzil yozsangiz, butun manzilingiz chiqadigan qilib qo'yish mumkin. Har safar "Toshkent shahri, Chilonzor tumani, ..." deb terib o'tirmaysiz.

Dasturchida ham shunday matnlar ko'p. Har bir faylning boshiga "bu fayl nima qiladi" degan izoh. Har kuni o'nlab marta console.log(...). HTML sahifaning bir xil boshlanishi. Har safar harfma-harf terish — vaqt va xato manbai.

Snippet (inglizcha "parcha") — qisqa so'z yozib Tab bosganda butun shablonga aylanadigan matn. Shablon ichida kursor to'xtaydigan joylar bor — siz faqat o'zgaradigan qismini yozasiz.

2. Tayyor snippetlar

2.1 Birinchi sinov

VS Code'da ko'p tillar uchun tayyor snippetlar bor. Sinab ko'ramiz:

1. Yangi sinov.js fayl oching.
2. log deb yozing. Kichik ro'yxat (taklif oynasi) chiqadi. Birinchi qatorda log va yonida kvadrat belgisi — bu snippet.
3. Tab yoki Enter bosing.

Natija:

console.log();

Kursor qavs ichida turibdi. "Salom" deb yozing — tayyor. console.log — qavs ichidagini konsolga chiqaradigan buyruq. Konsol — DevTools darsida ko'rgan Console paneli kabi "xabarlar oynasi". Buyruqning o'zini 08-qismda o'rganamiz.

Taklif oynasi o'zi chiqmasa — Ctrl + Space (macOS'da ham Ctrl + Space) bosing. Bu "takliflarni ko'rsat" yorlig'i.

2.2 Hamma snippetlar ro'yxati

Command Palette'da:

Snippets: Insert Snippet

Shu fayl turi uchun mavjud hamma snippetlar ro'yxati chiqadi. JavaScript'da for, if, trycatch, function kabi o'nlab snippet bor. Ularning ma'nosini 08-qismda o'rganamiz — hozir faqat bor ekanini bilib qo'ying.

2.3 Emmet — HTML uchun kuchli yordamchi

VS Code ichida Emmet degan vosita ham bor. U snippetga o'xshaydi, lekin undan ham aqlli: qisqa yozuvdan butun HTML tuzilmani yasaydi. Masalan, HTML faylda ! yozib Tab bossangiz, sahifaning tayyor skeleti paydo bo'ladi. HTML'ni 04-qismda o'rganamiz va Emmet'ni o'sha yerda to'liq ishlatamiz.

Tekshirib ko'ring: log yozdingiz, lekin taklif oynasi chiqmadi. Nima qilasiz?

3. O'z snippetingiz

3.1 Snippet fayli qayerda

Command Palette'da:

Snippets: Configure Snippets

Ro'yxat chiqadi. Unda uch xil tanlov bor:

Birinchi ikkitasi — foydalanuvchi snippetlari. Ular User sozlamalari yonida saqlanadi va Settings Sync bilan boshqa kompyuterga ko'chadi. Uchinchisi — loyiha snippeti. U loyiha papkasida turadi va loyiha bilan birga yuradi.

3.2 Snippet tuzilishi

Snippet fayli — JSON (aniqrog'i, izohli JSONC). Unda har snippet bitta kalit-qiymat juftligi:

{
  "Salom chiqarish": {
    "prefix": "salom",
    "body": [
      "console.log(\"Assalomu alaykum!\");"
    ],
    "description": "Salom xabarini chiqaradi"
  }
}

Qismlari:

• "Salom chiqarish" — snippet nomi. Faqat ro'yxatda ko'rinadi, o'zingiz tanlaysiz.
• "prefix" — yoziladigan qisqa so'z. salom yozib Tab bossangiz, snippet ishlaydi.
• "body" — chiqadigan matn. Massiv: har element — bitta qator.
• "description" — taklif oynasida chiqadigan tavsif.

body ichidagi \" ga e'tibor bering. Matnning o'zida qo'shtirnoq kerak, lekin JSON'da satr qo'shtirnoq bilan chegaralanadi. Shuning uchun ichki qo'shtirnoq oldiga \ qo'yiladi — JSON darsidagi ekranlash qoidasi.

Maslahat: body bitta satr ham bo'lishi mumkin: "body": "console.log();". Lekin ko'p qatorli shablonda massiv qulayroq — har qator alohida ko'rinadi.

Tekshirib ko'ring: Snippet body sida 3 ta element bor. Snippet ishlaganda necha qator matn paydo bo'ladi?

4. Kursor yo'li: $1, $2, $0

4.1 To'xtash joylari

Snippet shunchaki matn qo'yib qo'ysa, keyin kerakli joyga qo'lda borish kerak bo'lardi. Buning o'rniga matnga to'xtash joylari (tab stops) qo'yiladi:

• $1 — snippet paydo bo'lgach, kursor birinchi shu yerda turadi.
• $2, $3, ... — Tab bosgan sari kursor navbatdagisiga sakraydi.
• $0 — oxirgi joy. Barcha to'xtashlar tugagach, kursor shu yerda qoladi.

Shift + Tab — oldingi to'xtashga qaytish.

flowchart LR
  A["Snippet paydo bo'ldi"] --> B["Kursor: $1"]
  B -- "Tab" --> C["Kursor: $2"]
  C -- "Tab" --> D["Kursor: $0<br/>ish tugadi"]

4.2 Misol: xarid qatori

Markdown'da xaridlar ro'yxatini yuritasiz deylik. Har qator bir xil: mahsulot, miqdor, narx.

{
  "Xarid qatori": {
    "prefix": "xarid",
    "body": [
      "- $1: $2 dona, $3 so'm$0"
    ],
    "description": "Xaridlar ro'yxatiga bitta qator"
  }
}

xarid → Tab bosilganda:

1. Kursor mahsulot joyida ($1). Non yozasiz, Tab.
2. Kursor miqdor joyida ($2). 2 yozasiz, Tab.
3. Kursor narx joyida ($3). 5000 yozasiz, Tab.
4. Kursor qator oxirida ($0).

Natija:

- Non: 2 dona, 5000 so'm

Diqqat: Markdown fayllarda taklif oynasi o'zi chiqmaydi — VS Code u yerda matn yozishga xalaqit bermaslik uchun uni o'chirib qo'ygan. xarid yozib, Ctrl + Space bosing, keyin Enter. JavaScript fayllarida esa ro'yxat o'zi chiqadi.

4.3 Boshlang'ich matn: ${1:matn}

Bo'sh to'xtash joyida nima yozish kerakligi ko'rinmaydi. Unga "ko'rsatma matn" qo'yish mumkin:

${1:mahsulot}

Snippet chiqqanda shu joyda mahsulot so'zi turadi va u tanlangan bo'ladi. Yozishni boshlasangiz, so'z o'chib, o'rniga siz yozgan tushadi. Hech narsa yozmay Tab bossangiz, mahsulot o'zi qoladi.

4.4 Bir raqam — bir necha joy

Bir xil raqam ikki joyda tursa, bittasiga yozganingiz ikkinchisida ham paydo bo'ladi:

{
  "Nomli log": {
    "prefix": "nlog",
    "body": [
      "console.log(\"${1:nom}:\", ${1:nom});"
    ],
    "description": "Qiymatni nomi bilan chiqaradi"
  }
}

nlog → Tab → narx deb yozsangiz, ikkala joyda narx paydo bo'ladi:

console.log("narx:", narx);

Bu dasturchilar eng ko'p yaratadigan snippetlardan biri. Konsolda qiymat bilan birga uning nomi ham chiqadi va qaysi raqam nimaligi adashmaydi.

4.5 Tanlov ro'yxati: ${1|a,b,c|}

To'xtash joyida bir nechta variantdan birini tanlash kerak bo'lsa:

${1|Toshkent,Samarqand,Buxoro|}

Snippet chiqqanda shu joyda kichik ro'yxat ochiladi va strelka bilan tanlaysiz.

Endi siz to'ldiring. Snippet ishga tushganda kursor birinchi turadigan joy — dollar va [:1] raqami. Hamma Tab lar tugagach kursor qoladigan joy — dollar va [:0] raqami.

Tekshirib ko'ring: "body": ["Hurmatli ${1:mijoz}, buyurtmangiz ${2:raqam} tayyor.$0"]. Snippet chiqdi va siz hech narsa yozmay ikki marta Tab bosdingiz. Qanday matn qoladi?

5. Snippet o'zgaruvchilari

5.1 VS Code o'zi to'ldiradigan qiymatlar

Ba'zi qiymatlarni VS Code o'zi biladi: fayl nomi, bugungi sana, nusxalangan matn. Ular $ bilan boshlanadigan katta harfli nomlar bilan yoziladi:

5.2 Misol: fayl sarlavhasi

Ko'p jamoalarda har faylning boshida qisqa izoh bo'ladi. Snippet bilan:

{
  "Fayl sarlavhasi": {
    "prefix": "sarlavha",
    "body": [
      "// Fayl: $TM_FILENAME",
      "// Sana: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
      "// Vazifasi: ${1:nima qiladi}",
      "$0"
    ],
    "description": "Fayl boshidagi izoh"
  }
}

narx.js faylida 2026-yil 28-sentabrda sarlavha → Tab:

// Fayl: narx.js
// Sana: 2026-09-28
// Vazifasi: nima qiladi

// — JavaScript'da izoh: dastur bu qatorlarni bajarmaydi, ular odam uchun yozilgan.

Maslahat: $TM_SELECTED_TEXT ni ishlatadigan snippet "o'rovchi" bo'ladi. Matnni belgilab, Command Palette'da Surround With buyrug'ini tanlasangiz, snippet belgilangan matnni o'z ichiga oladi.

Tekshirib ko'ring: Snippetda // Muallif: $TM_FILENAME_BASE yozilgan. hisob.js faylida qanday qator paydo bo'ladi?

6. $ belgisini o'zini yozish

Snippetda $ maxsus belgi. Matnning o'zida dollar kerak bo'lsa (narx $5 yoki keyinchalik JavaScript'dagi ${narx} yozuvi), VS Code uni to'xtash joyi deb o'ylaydi.

Yechim — oldiga \\ qo'yish:

{
  "Dollar narx": {
    "prefix": "dollar",
    "body": [
      "Narxi: \\$${1:10}"
    ],
    "description": "Dollar belgisi bilan narx"
  }
}

Natija: Narxi: $10, kursor 10 ustida.

Nega ikkita \? Bitta \ ni JSON o'zi "yeb qo'yadi" (ekranlash). JSON o'qib bo'lgach \$ qoladi va VS Code uni "oddiy dollar belgisi" deb tushunadi.

7. Loyiha snippetlari va scope

Loyiha snippeti .vscode/ papkasida .code-snippets kengaytmali faylda turadi. Masalan, .vscode/jamoa.code-snippets. Loyihani ochgan har bir kishida ishlaydi.

Global va loyiha snippetlari hamma tilda chiqadi. Faqat ba'zi tillarda chiqsin desangiz — scope kaliti:

{
  "Nomli log": {
    "scope": "javascript,typescript",
    "prefix": "nlog",
    "body": [
      "console.log(\"${1:nom}:\", ${1:nom});"
    ],
    "description": "Qiymatni nomi bilan chiqaradi"
  }
}

scope — til nomlari, vergul bilan. Endi nlog Markdown faylda chiqmaydi.

Maslahat: Tayyor snippet to'plamlari kengaytma sifatida ham bor. Masalan, React bilan ishlaydiganlar "ES7+ React/Redux/React-Native snippets" ni o'rnatadi. React'ni 17-qismda o'rganamiz. Kengaytma tanlashda oldingi darsdagi xavfsizlik tekshiruvlarini unutmang.

8. Ko'p uchraydigan xatolar

8.1 JSON buzilgan

Belgisi: snippet ro'yxatda chiqmaydi. Snippet faylida qizil to'lqinli chiziq bor. Sabab: ko'pincha ikki snippet orasida vergul yo'q, yoki body dagi ichki qo'shtirnoq \" bilan ekranlanmagan. Tuzatish: Ctrl + Shift + M (Problems paneli) — xato qatori va sababi yoziladi. Masalan, Expected comma — "vergul kutilgan edi".

8.2 $ yo'qolib qoldi

Belgisi: "Narxi: $5" yozdingiz, lekin snippet Narxi: chiqaradi va kursor sakraydi. Sabab: $5 — "5-to'xtash joyi" deb o'qildi. Tuzatish: \\$5 deb yozing.

8.3 Prefiks to'qnashuvi

Belgisi: log yozsangiz, ro'yxatda ikkita bir xil nomli taklif chiqadi. Sabab: siz ham log prefiksli snippet yaratgansiz, VS Code'da esa tayyori bor. Tuzatish: o'z snippetlaringizga ajralib turadigan prefiks bering: nlog, sarlavha, xarid.

8.4 Snippet Markdown yoki matn faylda chiqmayapti

Belgisi: prefiksni yozdingiz, Tab bosdingiz — shunchaki Tab bo'sh joyi qo'shildi. Sabab: bu fayl turida taklif oynasi o'zi ochilmaydi. Yoki scope da bu til yo'q. Tuzatish: prefiksdan keyin Ctrl + Space. Yoki sozlamalarga "editor.tabCompletion": "on" qo'shing — shunda prefiks yozib Tab bosish taklif oynasisiz ham ishlaydi.

9. Mashqlar

1-mashq (oson): Tayyor snippet

sinov.js faylida log snippetidan foydalanib, shu qatorni yozing:

console.log("IlmHamroh");

Keyin Snippets: Insert Snippet ni ochib, JavaScript uchun yana 3 ta snippet nomini yozib oling.

2-mashq (o'rta): Telefon kitobi

Global snippet yarating (Snippets: Configure Snippets → New Global Snippets file..., nomi mening). Prefiks — kontakt. Natija shunday uch qator bo'lsin:

Ism: Ali
Tel: +998 90 000 00 00
Shahar: Toshkent

Talablar: Ali — birinchi to'xtash, boshlang'ich matni ism. Telefon — ikkinchi, boshlang'ich matni +998 90 000 00 00. Shahar — tanlov ro'yxati: Toshkent, Samarqand, Buxoro. Yordam: ${1:matn} va ${3|a,b,c|} — "Kursor yo'li" bo'limida.

{
  "Kontakt": {
    "prefix": "kontakt",
    "body": [
      "Ism: ${1:ism}",
      "Tel: ${2:+998 90 000 00 00}",
      "Shahar: ${3|Toshkent,Samarqand,Buxoro|}$0"
    ],
    "description": "Telefon kitobiga bitta yozuv"
  }
}

3-mashq (qiyin): Kundalik sarlavhasi

Loyiha snippeti yarating: .vscode/kundalik.code-snippets. Prefiks kun, faqat Markdown uchun (scope). Natija (bugungi sana bilan):

## 2026-09-28 kundalik

- Mavzu: 
- Qiyin bo'lgani: 
- Ertaga: 

Kursor avval "Mavzu:" dan keyin, Tab bilan "Qiyin bo'lgani:" dan keyin, keyin "Ertaga:" dan keyin tursin. Markdown'da til nomi — markdown.

{
  "Kundalik": {
    "scope": "markdown",
    "prefix": "kun",
    "body": [
      "## $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE kundalik",
      "",
      "- Mavzu: $1",
      "- Qiyin bo'lgani: $2",
      "- Ertaga: $0"
    ],
    "description": "O'quv kundaligi uchun kunlik yozuv"
  }
}

10. Real ishda

• Jamoa shablonlari. Kompaniyalarda .vscode/*.code-snippets orqali "bizda test fayli shunday boshlanadi" kabi qoidalar tarqatiladi.
• Freymvork snippetlari. React, Vue, Angular uchun snippet kengaytmalari juda mashhur. Masalan, rafce yozib komponent skeletini olish — React dasturchilarning kundalik odati.
• Emmet — HTML/CSS yozishda eng ko'p ishlatiladigan tezlatgich. 04-qismdan boshlab har kuni kerak bo'ladi.
• AI yordamchilar endi ko'p kodni o'zi taklif qiladi (AI yordamchilari darsi). Snippetning ustunligi — u doim bir xil va aniq natija beradi, internet ham kerak emas.

Xulosa

• Snippet — prefix yozib Tab bosganda paydo bo'ladigan shablon; taklif chiqmasa — Ctrl + Space.
• Yaratish: Snippets: Configure Snippets; faylda prefix, body (massiv — qatorlar), description.
• $1, $2 — to'xtash joylari, $0 — oxirgi joy; ${1:matn} — boshlang'ich matn; bir raqam ikki joyda — bir vaqtda yoziladi.
• $TM_FILENAME, $CURRENT_YEAR kabi o'zgaruvchilarni VS Code o'zi to'ldiradi; dollarning o'zi — \\$.
• Foydalanuvchi snippeti — faqat sizga; .vscode/*.code-snippets — butun loyihaga; scope — qaysi tillarda.

Keyingi dars: VS Code ichki terminali, tasks va masofaviy ishlash — terminalni VS Code ichida ishlatasiz va takroriy buyruqlarni bitta yorliqqa bog'laysiz.

Manbalar

• VS Code: Snippets in Visual Studio Code