VS Code kengaytmalari: tanlash va xavfsizlik

Qisqacha: Kengaytma (extension) — VS Code'ga yangi imkoniyat qo'shadigan qo'shimcha dastur: kodni tekislash, xatoni ko'rsatish, sahifani jonli ko'rish. Ular Ctrl + Shift + X oynasidan o'rnatiladi. Kengaytma sizning huquqlaringiz bilan ishlaydi — fayllaringizni o'qiy oladi va internetga ma'lumot yubora oladi. Shuning uchun o'rnatishdan oldin nashriyotchi, yuklab olishlar soni va nomni tekshiring, keraksizini o'chiring.

Bu darsda

• Kengaytmani topib o'rnatasiz, o'chirib qo'yasiz va butunlay olib tashlaysiz.
• Boshlovchiga kerakli 7–8 ta kengaytma nima qilishini tushuntirasiz.
• Prettier'ni asosiy formatlagich qilib sozlaysiz.
• Loyihaga .vscode/extensions.json yozib, jamoaga kengaytma tavsiya qilasiz.
• Soxta yoki xavfli kengaytmani o'rnatishdan oldin 5 ta belgidan tanib olasiz.

Oldin bilishingiz kerak: VS Code sozlamalari: settings.json va profillar, Muharrir va IDE; VS Code bilan tanishuv (Workspace Trust qismi).

1. Nega bu kerak?

Yangi telefon oldingiz deylik. Unda qo'ng'iroq va SMS bor, lekin Telegram, Click yoki xarita yo'q. Ularni do'kondan o'rnatasiz va telefon sizga moslashadi.

VS Code ham shunday. Toza holatda u yaxshi muharrir, xolos. Kengaytma (extension) — VS Code'ga yangi imkoniyat qo'shadigan qo'shimcha dastur. Kengaytma bilan u kodni o'zi tekislaydi, xatoni qizil yozuv bilan ko'rsatadi, sahifani brauzerda jonli yangilaydi.

Lekin telefonda ham har ilovani o'rnatavermaysiz. Ba'zilari telefonni sekinlashtiradi, ba'zilari ma'lumotlaringizni o'g'irlaydi. Kengaytmalarda xavf bundan ham katta, sababini quyida ko'ramiz. Bu dars ikkala tomonni o'rgatadi: nima kerak va qanday xavfsiz tanlash kerak.

2. Kengaytmalar oynasi

2.1 Topish va o'rnatish

Ctrl + Shift + X (macOS'da Cmd + Shift + X) — Extensions oynasi. Kengaytmalar Marketplace (bozor) degan onlayn katalogdan olinadi. Unda o'n minglab kengaytma bor.

1. Qidiruvga nom yozing, masalan Prettier.
2. Ro'yxatdan kerakligini bosing — o'ng tomonda uning sahifasi ochiladi.
3. Install tugmasini bosing.

Kengaytma sahifasida quyidagilarga qarang:

• Nashriyotchi (publisher) — kengaytmani chiqargan odam yoki kompaniya. Nomi sarlavha ostida yoziladi.
• Yuklab olishlar soni — nechta kishi o'rnatgan.
• Baho — yulduzchalar va sharhlar.
• Oxirgi yangilanish — "Last Updated" sanasi (Details ichida yoki o'ng ustunda).

2.2 Kengaytma ID si

Har kengaytmaning noyob ID (identifikator — nomi) bor: nashriyotchi.nom. Masalan, Prettier'niki — esbenp.prettier-vscode. Bir xil ko'rinadigan ikkita kengaytmani faqat ID ajratadi. Uni kengaytma sahifasida yoki ro'yxatda o'ng tugma → Copy Extension ID bilan olasiz.

2.3 O'chirib qo'yish va olib tashlash

O'rnatilgan kengaytma ustida tugmasi bor:

Terminaldan ham boshqarsa bo'ladi:

code --list-extensions
code --install-extension esbenp.prettier-vscode
code --uninstall-extension esbenp.prettier-vscode

Birinchi buyruq o'rnatilgan kengaytmalar ID larini chiqaradi. Qolgan ikkitasi ID bo'yicha o'rnatadi va olib tashlaydi.

Tekshirib ko'ring: Kengaytma bitta loyihada xalaqit beryapti, boshqalarida esa kerak. Uni nima qilasiz?

3. Boshlovchi uchun kerakli kengaytmalar

3.1 Ro'yxat

Har biri nima qiladi:

• Prettier — kodni tekislaydi: bo'sh joylar, qo'shtirnoqlar, qator uzunligi. Bir marta sozlanadi, keyin saqlaganda o'zi ishlaydi.
• ESLint — kodni "tekshiruvchi". Tekislashga emas, xatoga o'xshash joylarga qaraydi: ishlatilmagan nom, xavfli usul. ESLint loyihaga alohida o'rnatiladigan dastur bilan birga ishlaydi — uni 12-qismda sozlaymiz. Hozircha kengaytma yetadi.
• Error Lens — xatoni qatorning o'zida, rangli matn bilan yozadi. Pastdagi panelga qarab o'tirish shart emas.
• Live Server — HTML sahifani brauzerda kichik server orqali ochadi (http://127.0.0.1:5500) va saqlaganingizda o'zi yangilaydi. 04-qismda (HTML) har kuni kerak bo'ladi.
• Path Intellisense — fayl yo'lini yozayotganda papka va fayl nomlarini taklif qiladi (yo'llar darsi).
• Code Spell Checker — inglizcha so'zlardagi imlo xatosini ko'rsatadi: recieve → receive.
• EditorConfig — .editorconfig faylini VS Code'ga o'qitadi (oldingi dars).
• GitLens — har qatorni kim va qachon o'zgartirganini ko'rsatadi. Git'ni 07-qismda o'rganamiz, shu paytgacha o'rnatmasangiz ham bo'ladi.

Maslahat: Microsoft'ning Live Preview kengaytmasi (ms-vscode.live-server) ham o'sha ishni qiladi va sahifani VS Code ichidagi panelda ko'rsatadi. Bu kursda Live Server ishlatamiz — HTML darslaridagi 127.0.0.1:5500 manzillari shunga mos. Bittasini tanlang — ikkalasi birga shart emas.

Maslahat: Markdown darsida aytganimizdek, VS Code'ning oddiy preview'i (Ctrl + Shift + V) Mermaid chizmalarini chizmaydi. Buning uchun Markdown Preview Mermaid Support kengaytmasi bor (Matt Bierner, ID bierner.markdown-mermaid). O'rnatgach, preview'da chizma ko'rinadi.

3.2 Kengaytma ishlaganda nima ko'rinadi

Kengaytmasiz:            Kengaytma bilan:
const narx=5000          const narx = 5000;
                         (Prettier tekisladi)

const soni = ;           const soni = ;  Expression expected.
                         (Error Lens xatoni qatorda yozdi)

Expression expected. — "bu yerda qiymat kutilgan edi". = dan keyin hech narsa yozilmagani uchun chiqdi. Bu xatoni VS Code'ning o'zi topadi, Error Lens faqat uni ko'zga ko'rinadigan qiladi.

Diqqat: Code Spell Checker o'zbekcha so'zlarni ham xato deb belgilaydi: narx, soni, mijoz. Bu normal — u faqat inglizcha lug'atni biladi. So'z ustida Ctrl + . bosib, uni lug'atga qo'shasiz. Yoki 08-qism davomida (o'zbekcha nomlar ishlatiladigan paytda) kengaytmani shu profilda o'chirib turasiz.

Tekshirib ko'ring: Prettier va ESLint ikkalasi ham "kod sifati" haqida. Farqi nimada?

4. Prettier'ni asosiy formatlagich qilish

Oldingi darsda formatOnSave ni ko'rdik. Endi unga Prettier'ni ulaymiz. Prettier o'rnatilgach, JavaScript uchun ikkita formatlagich bo'ladi: VS Code'ning o'zinikisi va Prettier. Qaysi birini ishlatishni aytish kerak:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

• editor.defaultFormatter — asosiy formatlagich. Qiymati — kengaytma ID si.
• editor.formatOnSave — saqlaganda formatlash.

Faqat bitta tilga Prettier'ni qo'yish ham mumkin (til sozlamasi):

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Bu sozlamalarni loyihaning .vscode/settings.json iga yozsangiz — butun jamoada bir xil ishlaydi.

5. .vscode/extensions.json: jamoaga tavsiya

5.1 Fayl

Yangi hamkasbga "Prettier'ni o'rnatib ol" deb og'zaki aytsangiz, u noto'g'ri kengaytmani o'rnatishi yoki unutishi mumkin. Buning o'rniga loyihaga fayl qo'yiladi:

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "usernamehw.errorlens"
  ],
  "unwantedRecommendations": [
    "ms-vscode.live-server"
  ]
}

• recommendations — tavsiya etilgan kengaytmalar ID lari.
• unwantedRecommendations — bu loyihada kerak emas kengaytmalar. Masalan, jamoa Live Server ishlatsa, u bilan bir ishni qiladigan Live Preview'ni taklif qilmaslikni so'raydi.

Loyiha ochilganda VS Code o'ng pastda tavsiya etilgan kengaytmalarni o'rnatishni taklif qiladi. Extensions oynasida @recommended deb yozsangiz ham ro'yxat chiqadi.

Maslahat: Bu faylni qo'lda yozish shart emas. Kengaytma ustida → Add to Workspace Recommendations — VS Code ID ni faylga o'zi qo'shadi.

Tekshirib ko'ring: extensions.json kengaytmalarni avtomatik o'rnatadimi?

6. Xavfsizlik: kengaytma nimalar qila oladi

6.1 To'liq huquq

Brauzer kengaytmasi ma'lum chegara ichida ishlaydi. VS Code kengaytmasida bunday "qafas" yo'q. U VS Code'ning o'zi kabi — ya'ni sizning huquqlaringiz bilan ishlaydi (fayl ruxsatlari darsi):

• kompyuteringizdagi istalgan faylni o'qiy oladi — .env fayllari, SSH kalitlari va parollar ham;
• terminal buyruqlarini ishga tushira oladi;
• internetga istalgan ma'lumotni yubora oladi.

Yaxshi kengaytma bu huquqlardan foydali ish uchun foydalanadi. Zararlisi esa ma'lumotlaringizni o'g'irlaydi.

6.2 Bu nazariya emas

Xakerlar mashhur kengaytmaga nomi va rasmi o'xshash soxta kengaytma chiqaradi. Bu typosquatting deyiladi — odam bir harfga e'tibor bermay o'rnatib yuborishiga umid qilishadi. Masalan, Prettier - Code formatter o'rniga Prettier - Code Formater (bitta t kam).

2025-yilda xavfsizlik tadqiqotchilari VS Code Marketplace va Open VSX'da (Cursor kabi muharrirlar ishlatadigan boshqa katalog) parol, token va kripto-hamyon o'g'irlaydigan kengaytmalarni bir necha marta topishgan. Ba'zilari o'n minglab marta yuklab olingan edi.

6.3 VS Code sizni qanday himoya qiladi

• Nashriyotchiga ishonch. Biror nashriyotchidan birinchi marta kengaytma o'rnatayotganingizda VS Code so'raydi: Do you trust the publisher "..."? — "Nashriyotchiga ishonasizmi?". Bu savol bejiz emas — to'xtab, tekshirib ko'ring.
• Tasdiqlangan nashriyotchi (verified publisher) — nomi yonida ko'k belgi. U "bu nashriyotchi o'zi ko'rsatgan sayt domenining egasi va kamida 6 oydan beri qoidabuzarliksiz ishlaydi" degani. Kengaytma kodi qatorma-qator tekshirilgani degani emas.
• Workspace Trust. VS Code tanishuv darsida ko'rgan Restricted Mode begona loyihada ko'p kengaytmalarni ishlatmaydi.
• Marketplace yangi kengaytmalarni antivirus bilan tekshiradi va mashhur nomlarga juda o'xshash nomlarni cheklaydi. Zararli deb topilgan kengaytma qora ro'yxatga tushadi va kompyuteringizdan ham avtomatik olib tashlanadi. Lekin bu tekshiruvlar hammasini ushlay olmaydi — oxirgi himoya siz.

7. O'rnatishdan oldin 5 ta tekshiruv

flowchart TD
  A["Kengaytma topildi"] --> B{"ID va nashriyotchi<br/>to'g'rimi?"}
  B -- "Yo'q" --> X["O'rnatmang"]
  B -- "Ha" --> C{"Yuklab olishlar<br/>ko'pmi?"}
  C -- "Yo'q" --> X
  C -- "Ha" --> D{"Yaqinda<br/>yangilanganmi?"}
  D -- "Yo'q" --> E["Muqobilini qidiring"]
  D -- "Ha" --> F["O'rnating"]

1. ID va nashriyotchi. Rasmiy saytdagi yoki darsdagi ID bilan harfma-harf solishtiring. Prettier'niki esbenp.prettier-vscode, boshqasi emas.
2. Yuklab olishlar soni. Mashhur kengaytmalar o'n millionlab marta yuklangan. Xuddi shu nomdagi, lekin bir necha yuz marta yuklangan "egizak" — shubhali.
3. Sharhlar va baho. Sharhlarni o'qing: "o'rnatgandan keyin kompyuter sekinlashdi" kabi yozuvlar — ogohlantirish.
4. Oxirgi yangilanish. Ko'p yil yangilanmagan kengaytma yangi VS Code bilan buzilishi mumkin. Buning o'zi zararli degani emas.
5. Keragi bormi? Eng xavfsiz kengaytma — o'rnatilmagani. "Bir kun kerak bo'lar" deb o'rnatmang.

Tekshirib ko'ring: Kengaytma nashriyotchisi yonida ko'k belgi bor. Demak, u xavfsizmi?

8. Ortiqcha kengaytmalar

Har bir kengaytma xotira va protsessor vaqtini oladi. 40 ta kengaytma o'rnatilgan VS Code sekin ochiladi, noutbuk qiziydi.

Qaysi biri og'ir ekanini ko'rish:

Developer: Show Running Extensions

Bu buyruq (Command Palette'da) har kengaytmaning ishga tushish vaqtini ko'rsatadi.

VS Code g'alati ishlayapti-yu, qaysi kengaytma aybdorligini bilmasangiz:

Help: Start Extension Bisect

Bisect — "ikkiga bo'lib qidirish". VS Code kengaytmalarning yarmini o'chirib, "muammo bormi?" deb so'raydi. Javobingizga qarab yana yarmini o'chiradi va bir necha qadamda aybdorni topadi. Bu algoritmlar darsidagi "ikkiga bo'lib izlash" g'oyasining o'zi.

Qoida: har 2–3 oyda kengaytmalar ro'yxatini ko'rib chiqing. Ishlatmaganingizni Uninstall qiling.

9. Ko'p uchraydigan xatolar

9.1 Soxta kengaytmani o'rnatish

Belgisi: kengaytma nomi to'g'ridek, lekin ishlamayapti yoki g'alati narsa qilyapti. Nashriyotchi nomi notanish. Tuzatish: darhol Uninstall qiling. Keyin muhim parollaringiz va tokenlaringizni almashtiring — ular o'g'irlangan bo'lishi mumkin. Keyingi safar ID bo'yicha o'rnating: code --install-extension esbenp.prettier-vscode.

9.2 Ikkita formatlagich

Belgisi: saqlaganda xabar: There are multiple formatters for 'JavaScript' files. One of them should be configured as default formatter. Yoki har saqlashda qo'shtirnoqlar ' dan " ga, keyin qaytib o'zgarib turadi. Tarjima: "JavaScript uchun bir nechta formatlagich bor. Bittasini asosiy qilib belgilang." Tuzatish: editor.defaultFormatter da bittasini tanlang (Prettier). Keraksiz formatlagich kengaytmasini olib tashlang.

9.3 Prettier o'rnatildi, lekin ishlamayapti

Belgisi: saqlaganda kod o'zgarmayapti. Sabab: editor.formatOnSave yoqilmagan yoki editor.defaultFormatter boshqa formatlagichni ko'rsatyapti. Tuzatish: ikkala sozlamani tekshiring. Pastki holat satrida Prettier yozuvi bor — ustiga bossangiz, Prettier'ning jurnali (Output) ochiladi va sababini yozadi.

9.4 Kengaytma begona loyihada ishlamayapti

Belgisi: internetdan olingan loyihada ko'p kengaytmalar "o'chiq". Tepada Restricted Mode yozuvi bor. Sabab: siz bu papkaga "ishonaman" demagansiz — Workspace Trust ishlayapti. Tuzatish: loyiha kimniki ekanini bilsangiz va ishonsangiz — Trust bosing. Bilmasangiz — Restricted Mode'da qoldiring. Bu xato emas, himoya.

10. Mashqlar

1-mashq (oson): Prettier bilan tekislash

1. Ctrl + Shift + X bilan Prettier'ni toping. Nashriyotchi Prettier, ID esbenp.prettier-vscode ekanini tekshiring va o'rnating.
2. Yangi tekis.js fayliga yozing: const narx=5000
3. Shift + Alt + F bosing. Agar "qaysi formatlagich?" deb so'rasa, Prettier'ni tanlang.

Nima o'zgardi?

const narx = 5000;

2-mashq (o'rta): Jamoa uchun fayl

mashq-kengaytma loyihasi uchun .vscode/extensions.json yozing. Tavsiya: Prettier va Error Lens. Keraksiz: Live Preview (ID si maslahatda yozilgan). Faqat ID lardan foydalaning (jadval — "Boshlovchi uchun kerakli kengaytmalar" bo'limida).

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "usernamehw.errorlens"
  ],
  "unwantedRecommendations": [
    "ms-vscode.live-server"
  ]
}

3-mashq (o'rta): Qaysi biri shubhali?

Qidiruvda "Prettier" deb yozdingiz va uchta natija chiqdi:

Qaysi birini o'rnatasiz va nega qolganlari shubhali?

4-mashq (qiyin): Tozalash

1. Terminalda code --list-extensions ni ishga tushiring va ro'yxatni ko'ring.
2. Developer: Show Running Extensions ni oching. Eng sekin 3 ta kengaytmani toping.
3. Oxirgi oyda ishlatmagan kamida bitta kengaytmani Uninstall qiling.
4. code --list-extensions ni qayta ishga tushirib, u ro'yxatdan yo'qolganini tekshiring.

11. Hujumchi nigohi

Hujumchi nima qiladi: mashhur kengaytmaga o'xshash nom, bir xil rasm va ko'chirilgan tavsif bilan soxta kengaytma chiqaradi. Kengaytma haqiqatan ham kodni tekislaydi — shunda hech kim shubhalanmaydi. Lekin ichida kichik bo'lak bor: u .env fayllarini, SSH kalitlarini va brauzer ma'lumotlarini qidirib, o'z serveriga yuboradi.

Boshqa yo'l: yaxshi kengaytma muallifining hisobini o'g'irlash. Keyin zararli yangilanish chiqariladi. Kengaytmalar odatda o'zi yangilanadi (extensions.autoUpdate), shuning uchun u minglab kompyuterga bir kunda tushadi.

Qanday qarshi turamiz:

• ID bo'yicha o'rnatamiz va "Do you trust the publisher" savolida to'xtab tekshiramiz.
• Kengaytmalar sonini kam tutamiz — har biri potensial eshik.
• Begona loyihani Restricted Mode'da ochamiz.
• Parollarni kodga yozmaymiz — .env fayllari va tokenlar qayerda saqlanishini .env darsida ko'rgan edik. O'g'irlanishi mumkin bo'lgan narsa qancha kam bo'lsa, zarar shuncha kam.
• Shubhali kengaytmani o'rnatgan bo'lsangiz — olib tashlaysiz va parollarni almashtirasiz.

12. Real ishda

• Kompaniyalarda ko'pincha ruxsat etilgan kengaytmalar ro'yxati bo'ladi. Ba'zi joylarda administrator qolganlarini umuman bloklaydi.
• Har loyihada .vscode/extensions.json va .vscode/settings.json birga keladi: "Prettier o'rnating va u asosiy formatlagich bo'lsin".
• Kengaytmalar yozish ham kasb: VS Code kengaytmalari JavaScript/TypeScript'da yoziladi. Bu kursdan keyin o'zingiz ham yoza olasiz.
• Intervyuda "Qaysi kengaytmalardan foydalanasiz?" deb so'rashadi. Uzun ro'yxat emas, "nega aynan shu" degan javob yaxshi taassurot qoldiradi.

Xulosa

• Kengaytma — VS Code'ga imkoniyat qo'shadigan dastur; Ctrl + Shift + X dan o'rnatiladi, ID si nashriyotchi.nom.
• Boshlash uchun: Prettier, ESLint, Error Lens, Live Server, Path Intellisense, Code Spell Checker, EditorConfig.
• editor.defaultFormatter — bitta asosiy formatlagich; .vscode/extensions.json — jamoaga tavsiya.
• Kengaytma sizning huquqlaringiz bilan ishlaydi: fayllarni o'qiydi, internetga yuboradi.
• O'rnatishdan oldin: ID, nashriyotchi, yuklab olishlar, yangilanish sanasi va "keragi bormi?".
• Ko'k belgi — domen tasdig'i, kod tekshiruvi emas.

Keyingi dars: Snippetlar: takroriy kodni bir so'z bilan yozish — qisqa so'z yozib Tab bossangiz, butun shablon paydo bo'ladigan qilib sozlaysiz.

Manbalar

• VS Code: Extension Marketplace
• VS Code: Extension runtime security