VS Code bilan tanishuv: muharrir va IDE farqi, o'rnatish va birinchi qadamlar

Qisqacha: VS Code (Visual Studio Code) — Microsoft'ning bepul kod muharriri, dunyodagi eng mashhuri. O'rnatishda "Add to PATH" belgisini qoldiring — shunda terminalda code . yozib, joriy papkani ochasiz. Eng muhim ikki yorliq: Ctrl + Shift + P — barcha buyruqlar, Ctrl + P — faylni nomi bilan ochish. Begona loyihani ochganda "Do you trust the authors?" savoliga o'ylab javob bering.

Bu darsda

• Oddiy matn muharriri, kod muharriri va IDE farqini tushuntira olasiz.
• VS Code'ni Windows, macOS yoki Linux'ga to'g'ri o'rnata olasiz.
• Oynaning besh qismini (Activity Bar, Side Bar, Editor, Panel, Status Bar) taniysiz.
• Command Palette va Quick Open bilan sichqonchasiz ishlay olasiz.
• Terminaldan code . bilan papka ochasiz va "not recognized" xatosini tuzata olasiz.
• Workspace Trust nima uchun kerakligini va begona kodni xavfsiz ochishni bilasiz.

Oldin bilishingiz kerak: Terminalda harakatlanish, OS va matn tahrirlash yorliqlari, Muhit o'zgaruvchilari va PATH.

1. Nega bu kerak?

Oldingi darslarda fikrlash vositalarini o'rgandik: algoritm, pseudokod, blok-sxema. Endi bu g'oyalarni haqiqiy kodga aylantiradigan "ustaxona" kerak.

Duradgor yog'ochni yaxshi bilishi mumkin. Lekin qo'lida arra va randa bo'lmasa, chiroyli stol yasay olmaydi. Dasturchining asosiy asbobi — kod muharriri.

Kodni Blocknot (Notepad)da ham yozish mumkin. Lekin u sizga hech yordam bermaydi: xatoni ko'rsatmaydi, so'zlarni ranglarga bo'lmaydi, papkadagi fayllarni ko'rsatmaydi. Kod muharriri esa bularning hammasini qiladi. Bu kursning qolgan barcha kodini shu muharrirda yozasiz.

2. Muharrir va IDE

2.1 Uch turdagi vosita

Kod yozish dasturlari uch turga bo'linadi:

• Matn muharriri (text editor) — har bir kompyuterda bor. Kod uchun hech qanday qulaylik yo'q.
• Kod muharriri (code editor) — dasturlash uchun moslashtirilgan. Kodni ranglarga bo'ladi va siz yozayotgan so'zni oxirigacha taklif qiladi. Yengil, tez ochiladi. Yetishmagan imkoniyat qo'shimcha dasturcha — kengaytma (extension) bilan qo'shiladi.
• IDE (Integrated Development Environment — "birlashgan dasturlash muhiti") — bitta katta dastur ichida hammasi tayyor. Muharrir, xato qidirish vositasi, loyihani yig'ish, test — barchasi bor. Evaziga og'irroq: ko'proq xotira (RAM) yeydi va sekinroq ochiladi.

O'xshatish: kod muharriri — bo'sh, lekin kengaytirsa bo'ladigan ustaxona. Kerakli asbobni o'zingiz osib qo'yasiz. IDE esa hamma asbobi joyida turgan katta zavod.

2.2 VS Code qaysi turga kiradi?

Visual Studio Code (VS Code) — Microsoft 2015-yilda chiqargan bepul kod muharriri. U dasturchilar orasida eng mashhuri: Stack Overflow so'rovnomalarida yillar davomida birinchi o'rinda, dasturchilarning taxminan to'rtdan uch qismi undan foydalanadi.

VS Code rasman kod muharriri. Lekin unga ko'p narsa allaqachon qo'shilgan: terminal, Git bilan ishlash, JavaScript uchun xato qidirish vositasi. Kengaytmalar bilan esa u IDE darajasiga yetadi. Shuning uchun uni "IDE'ga aylana oladigan muharrir" deyishadi.

Qiziq fakt: VS Code brauzer darsida ko'rgan Chromium dvigateli ustiga qurilgan. U ichida kichik brauzer ishlayotgan ilova — shuning uchun Windows, macOS va Linux'da bir xil ko'rinadi.

Maslahat: Nomlari o'xshash, lekin Visual Studio va Visual Studio Code — ikki xil dastur. Visual Studio — asosan C# va C++ uchun og'ir IDE. Bizga kerakligi — Visual Studio Code.

2.3 Boshqa muharrirlar

VS Code yagona tanlov emas:

• WebStorm — JetBrains kompaniyasining JavaScript uchun IDE'si. 2024-yildan beri shaxsiy, notijorat foydalanish uchun bepul.
• Cursor va Devin Desktop (sobiq Windsurf) — VS Code asosida qurilgan, sun'iy intellekt yordamchisi kuchaytirilgan muharrirlar. Ular haqida AI yordamchilari darsida gaplashamiz.
• Vim — terminal ichida ishlaydigan muharrir. Serverda albatta uchraydi — alohida darsda ko'ramiz.

Bu kursda VS Code ishlatamiz: bepul, hamma OS'da bor va ish joylarining ko'pchiligida shu.

Tekshirib ko'ring: Kod muharriri va IDE'ning asosiy farqi nimada?

3. O'rnatish

3.1 Windows

VS Code'ni faqat rasmiy saytdan yuklang: code.visualstudio.com. Boshqa saytlardagi "VS Code yuklab olish" havolalari ichida virus bo'lishi mumkin.

Saytda "Download for Windows" tugmasini bosing — "User Installer" yuklanadi. U faqat sizning foydalanuvchingizga o'rnatadi va administrator huquqini so'ramaydi. Bu eng qulay variant.

O'rnatuvchida "Select Additional Tasks" (qo'shimcha vazifalarni tanlang) oynasi chiqadi:

• Add to PATH (requires shell restart) — odatda belgilangan bo'ladi. Belgini olib tashlamang!
• Add "Open with Code" action to Windows Explorer file context menu — faylni o'ng tugma bilan bosib VS Code'da ochish. Foydali, belgilang.
• Add "Open with Code" action to Windows Explorer directory context menu — papkaga ham xuddi shunday. Buni ham belgilang.

Diqqat: "Add to PATH" — eng muhim belgi. U VS Code papkasini PATH o'zgaruvchisiga qo'shadi. Belgilanmasa, terminal code buyrug'ini tanimaydi.

Paket menejerlari darsida ko'rgan winget bilan ham o'rnatsa bo'ladi:

winget install --id Microsoft.VisualStudioCode -e

-e — "aynan shu ID" degani, shunda o'xshash nomli boshqa paket o'rnatilib qolmaydi.

3.2 macOS va Linux

• macOS. Saytdan .zip yuklab, ichidagi "Visual Studio Code" ilovasini "Applications" papkasiga torting. Keyin VS Code'ni oching, Cmd + Shift + P bosing va Shell Command: Install 'code' command in PATH buyrug'ini tanlang. Homebrew orqali ham bo'ladi: brew install --cask visual-studio-code.
• Linux (Ubuntu). Saytdan .deb paketini yuklab o'rnating. Yoki sudo snap install code --classic. Ikkala holatda ham code buyrug'i PATH'ga o'zi qo'shiladi.

3.3 O'rnatishni tekshirish

Terminalni yangidan oching va yozing:

code --version

Natija shunga o'xshash bo'ladi:

1.139.1
04c0d99f4fb0d8afe6ce4f0c58e31e183ac3e4b1
x64

Birinchi qator — versiya. VS Code har oy yangilanadi, shuning uchun sizdagi raqam boshqacha bo'lishi mumkin. Ikkinchi qator — dastur yig'ilgan kod versiyasining identifikatori. Uchinchisi — protsessor turi.

Nega terminalni yangidan ochish kerak? Terminal PATH'ni faqat ochilganda bir marta o'qiydi. O'rnatishdan oldin ochilgan terminal yangi PATH'ni bilmaydi. Belgi yonidagi "requires shell restart" ("terminalni qayta ochish kerak") yozuvi aynan shu haqda.

4. VS Code oynasi

4.1 Besh asosiy qism

VS Code'ni birinchi ochganingizda "Welcome" sahifasi chiqadi. Uni yopib, oynaning tuzilishiga qaraymiz:

┌──┬──────────┬──────────────────┐
│A │ B        │ C                │
│c │ EXPLORER │ salom.md         │
│t │ ▾ mashq  │ # Salom!         │
│i │  salom.md│                  │
│v ├──────────┴──────────────────┤
│  │ D  TERMINAL                 │
├──┴─────────────────────────────┤
│ E  Ln 1, Col 1  UTF-8  LF      │
└────────────────────────────────┘

1. A — Activity Bar (faoliyat paneli). Eng chapdagi tor ustun. Undagi belgilar yon panelda nima ko'rinishini tanlaydi.
2. B — Side Bar (yon panel). Tanlangan bo'lim shu yerda ochiladi. Odatda — fayllar daraxti.
3. C — Editor (muharrir maydoni). Kod yoziladigan asosiy joy. Har bir ochiq fayl yuqorida alohida yorliq (tab) bo'lib turadi.
4. D — Panel (pastki panel). Terminal, xatolar ro'yxati (Problems) va boshqa oynalar.
5. E — Status Bar (holat satri). Eng pastdagi satr. Kursor qaysi qatorda turgani, fayl kodlashi va qator oxiri turi shu yerda.

Status Bar'dagi UTF-8 va LF sizga tanish. Matn kodlash darsida UTF-8'ni, qator oxiri darsida esa CRLF va LF ni o'rgangansiz. Ularni shu yerda ko'rib, bosib o'zgartirish mumkin.

Yangi VS Code versiyalarida o'ng tomonda yana bir panel bor — sun'iy intellekt bilan suhbat (Chat) oynasi. Hozir unga tegmang. Avval o'zingiz fikrlashni o'rganing — AI yordamchilarini kursda alohida o'rganamiz.

4.2 Activity Bar bo'limlari

Hozir sizga Explorer va Search kerak. Source Control'ni Git qismida, Extensions'ni kengaytmalar darsida ochamiz.

Ekranda joy yetmasa: Ctrl + B yon panelni yashiradi va qaytaradi, Ctrl + J esa pastki panelni.

Tekshirib ko'ring: Siz 30 ta fayli bor loyihada "narx" so'zi qaysi fayllarda uchrashini topmoqchisiz. Qaysi bo'lim kerak?

5. Ikki eng muhim yorliq

5.1 Command Palette: Ctrl + Shift + P

VS Code'da yuzlab buyruq bor. Ularning hammasi menyularda emas va hammasining yorlig'ini yodlab bo'lmaydi.

Command Palette (buyruqlar paneli) — VS Code'ning barcha buyruqlarini qidirib topish oynasi. Ctrl + Shift + P bosing (macOS'da Cmd + Shift + P) va kerakli so'zni yoza boshlang:

• theme → "Preferences: Color Theme" — rang mavzusini almashtirish.
• auto save → "File: Toggle Auto Save" — faylni avtomatik saqlashni yoqish.
• zoom → "View: Zoom In" — hamma narsani kattalashtirish.

Command Palette'da har buyruq yonida uning yorlig'i ham yozilgan. Bir buyruqni tez-tez ishlatsangiz, yorlig'ini shu yerdan o'rganib olasiz. F1 tugmasi ham xuddi shu oynani ochadi.

5.2 Quick Open: Ctrl + P

Loyihada yuzlab fayl bo'lsa, Explorer'da papkama-papka qidirish vaqt oladi. Quick Open (tez ochish) — faylni nomi bo'yicha bir zumda ochish oynasi.

Ctrl + P bosing va fayl nomining bir qismini yozing. To'liq nom shart emas: slm yozsangiz ham salom.md topiladi. Enter — fayl ochildi.

Quick Open maydonida birinchi belgi vazifani o'zgartiradi:

Aslida Ctrl + Shift + P — Ctrl + P ni ochib, > yozishning qisqa yo'li. Oyna bitta, faqat rejimi boshqa.

VS Code oynasining eng tepasida, o'rtada qidiruv maydoni bor. Uni sichqoncha bilan bossangiz ham Quick Open ochiladi.

Tekshirib ko'ring: Ctrl + P ni bosdingiz va > yozdingiz. Nima bo'ladi?

6. Papka ochish va code .

6.1 Fayl emas, papkani oching

VS Code'da bitta faylni ham ochish mumkin. Lekin loyiha bilan ishlashda doim papkani oching. Shunda Explorer loyihaning hamma faylini ko'rsatadi, Search butun loyihadan qidiradi, Quick Open esa hamma faylni topadi.

Menyudan: File → Open Folder (Ctrl + K, keyin Ctrl + O).

6.2 Terminaldan: code .

Dasturchilarning eng sevimli usuli — terminaldan. Kerakli papkaga o'tasiz va yozasiz:

code .

Yo'llar darsidan eslang: nuqta (.) — "joriy papka". Demak code . — "joriy papkani VS Code'da och".

To'liq ketma-ketlik — yangi mashq papkasini yaratib, ochish:

cd ~
mkdir ilmhamroh-mashq
cd ilmhamroh-mashq
code .

1. cd ~ — uy papkangizga o'tadi.
2. mkdir ilmhamroh-mashq — yangi papka yaratadi.
3. cd ilmhamroh-mashq — uning ichiga kiradi.
4. code . — shu papkani VS Code'da ochadi.

Bu buyruqlar PowerShell'da ham, Git Bash'da ham, macOS va Linux terminalida ham bir xil ishlaydi.

6.3 code buyrug'ining boshqa ko'rinishlari

• code salom.md — bitta faylni ochadi. Fayl yo'q bo'lsa, VS Code bo'sh oyna ochadi va birinchi saqlashda (Ctrl + S) faylni yaratadi.
• code -r . — yangi oyna ochmasdan, joriy VS Code oynasida ochadi (-r — "reuse", qayta ishlatish).

Maslahat: WSL ichida ham code . ishlaydi. Windows'dagi VS Code ochiladi va Linux ichidagi fayllar bilan ishlaydi. Buning qanday ishlashini VS Code terminali va masofaviy ishlash darsida ko'ramiz.

6.4 Terminal VS Code ichida ham bor

VS Code'da o'zining terminali bor. Uni Ctrl + ` bosib ochasiz (` — klaviaturada Esc ostidagi, 1 yonidagi tugma). U avtomatik ravishda ochiq papkada turadi — cd qilish shart emas.

Ichki terminalni chuqur o'rganishni alohida darsga qoldiramiz.

7. Saqlash

VS Code'da fayl yorlig'ida oq doiracha (●) ko'rsangiz — fayl o'zgargan, lekin hali saqlanmagan. Ctrl + S bossangiz, doiracha yo'qoladi.

Boshlovchilar ko'p qoqiladigan joy: faylni o'zgartirdi, natijani brauzerda yoki terminalda tekshirdi — o'zgarish yo'q. Sababi: fayl diskka yozilmagan, dastur esa diskdagi eski versiyani o'qiyapti.

Ikki yechim bor:

• Har o'zgarishdan keyin Ctrl + S bosishni odat qiling.
• Yoki avtomatik saqlashni yoqing: menyudan File → Auto Save. Shunda VS Code faylni har bir soniyada o'zi saqlaydi.

8. Workspace Trust: begona kodga ehtiyot bo'ling

8.1 Savol qayerdan chiqadi?

Yangi papkani birinchi marta ochganingizda VS Code so'raydi:

Do you trust the authors of the files in this folder?

"Bu papkadagi fayllar mualliflariga ishonasizmi?" Ikki javob bor: "Yes, I trust the authors" (ha, ishonaman) va "No, I don't trust the authors" (yo'q).

Bu Workspace Trust (ish maydoniga ishonch) — VS Code'ning xavfsizlik himoyasi.

8.2 Nega bu muhim?

Loyiha papkasida faqat kod emas, sozlama fayllari ham bo'ladi. Ularning ba'zilari papka ochilishi bilan buyruq ishga tushirishi mumkin. Ishonchli loyihada bu qulay: masalan, kerakli dasturlar avtomatik ishga tushadi. Begona loyihada esa xavfli.

"No" bossangiz, VS Code Restricted Mode (cheklangan rejim) da ochiladi:

• Kodni o'qish va ko'rish mumkin.
• Avtomatik vazifalar (tasks) va kodni ishga tushirish o'chiriladi.
• Loyihaning o'z sozlamalari va ishonchsiz kengaytmalar ishlamaydi.

Oyna tepasida "Restricted Mode is intended for safe code browsing" ("Cheklangan rejim kodni xavfsiz ko'rish uchun") degan tasma chiqadi. Keyinroq fikringiz o'zgarsa, Command Palette'da Workspaces: Manage Workspace Trust buyrug'i bilan ishonchni yoqish yoki o'chirish mumkin.

Qoida oddiy: o'zingiz yaratgan papka — "Yes". Internetdan yuklab olingan yoki notanish odam yuborgan loyiha — avval "No", kodni ko'rib chiqing, keyin qaror qiling.

9. Hujumchi nigohi

Hujumchi nima qiladi? U o'zini ish beruvchi qilib ko'rsatadi: "Sizni ishga olamiz, faqat test topshiriqni bajaring." Havola orqali tayyor loyiha yuboradi.

Loyiha ichida .vscode/tasks.json degan sozlama fayli yashiringan. Unda "papka ochilishi bilan shu buyruqni ishga tushir" deb yozilgan. Buyruq esa kompyuterga zararli dastur yuklaydi: parollar, brauzer cookie'lari va kripto hamyonlarni o'g'irlaydi. Bunday hujumlar dasturchilarga qarshi haqiqatda qayd etilgan.

Workspace Trust shu yerda himoya qiladi. Siz "No" bossangiz, Restricted Mode'da avtomatik vazifa ishlamaydi. Hujumchining butun rejasi — sizning shoshib "Yes" bosishingizga tayanadi.

Himoya qoidalari:

1. Begona loyihani har doim avval "No" bilan oching.
2. .vscode papkasini va tasks.json faylini ko'zdan kechiring.
3. Shubha bo'lsa — loyihani umuman ishga tushirmang.
4. Ota papkaga (masalan, butun Downloads ga) ishonch bermang: undagi hamma yangi loyihalar ham ishonchli bo'lib qoladi.

10. Ko'p uchraydigan xatolar

10.1 code buyrug'i topilmadi

Terminalda code . yozdingiz va shunday xato chiqdi. PowerShell'da:

code : The term 'code' is not recognized as the name of a cmdlet, function, script file, or operable program.

Git Bash'da:

bash: code: command not found

Tarjimasi: "code degan buyruq tanilmadi (topilmadi)". Terminal PATH'dagi papkalarni aylanib chiqdi va code dasturini topa olmadi.

Sabablari va yechimi:

1. Terminal o'rnatishdan oldin ochilgan. Uni yopib, yangidan oching. Ko'pincha shuning o'zi yetadi.
2. "Add to PATH" belgilanmagan. O'rnatuvchini qayta ishga tushiring va belgini qo'ying.
3. macOS. VS Code'da Cmd + Shift + P → Shell Command: Install 'code' command in PATH.

Vaqtinchalik yo'l: VS Code'ni menyudan ochib, File → Open Folder orqali papkani tanlang.

10.2 Butun diskni yoki "Desktop"ni ochish

Kimdir C:\ diskini yoki butun "Desktop"ni VS Code'da ochadi. VS Code minglab fayllarni ko'rib chiqishga urinadi va sekinlashadi. Search ham keraksiz fayllardan qidiradi. Yechim: faqat bitta loyihaning papkasini oching.

10.3 Faylni saqlamaslik

O'zgarish ko'rinmayapti — yorliqdagi ● ga qarang. U bor bo'lsa, Ctrl + S bosing yoki Auto Save'ni yoqing.

10.4 Visual Studio'ni yuklab olish

Saytda noto'g'ri tugmani bosib, Visual Studio (og'ir IDE) o'rnatiladi. U bir necha gigabayt joy oladi va bizga kerak emas. Nomida albatta "Code" so'zi bo'lsin.

11. Mashqlar

1-mashq (oson): Sichqonchasiz uch amal

VS Code'ni oching va sichqonchaga tegmasdan bajaring:

1. Ctrl + Shift + P → theme yozing → boshqa rang mavzusini tanlang.
2. Ctrl + P → ? yozing — Quick Open qanday belgilarni tushunishini ko'ring. Esc bilan yoping.
3. Ctrl + ` bilan ichki terminalni oching, yana bir marta bosib yoping.

2-mashq (o'rta): Terminaldan loyiha ochish

1. Terminalda uy papkangizda ilmhamroh-mashq papkasini yarating va code . bilan oching.
2. Workspace Trust savoliga javob bering — bu sizning papkangiz.
3. Explorer'da yangi fayl yarating: salom.md. Ichiga Markdown darsidagi kabi sarlavha va ro'yxat yozing.
4. Ctrl + Shift + V bosib, tayyor ko'rinishni oching.
5. Status Bar'da LF yoki CRLF yozuvini toping.

cd ~
mkdir ilmhamroh-mashq
cd ilmhamroh-mashq
code .

# Salom, IlmHamroh!

- Algoritm
- Pseudokod
- Blok-sxema

3-mashq (qiyin): Restricted Mode'ni sinab ko'ring

1. ilmhamroh-mashq papkasi ochiq turganida Command Palette'da Workspaces: Manage Workspace Trust buyrug'ini toping.
2. Ochilgan sahifada ishonchni o'chiring ("Don't Trust").
3. Oynada nima o'zgarganini kuzating: tepadagi tasma, Status Bar.
4. Ishonchni qaytarib yoqing ("Trust").

12. Real ishda

• Kundalik ish. Ko'pchilik veb-dasturchilar kun bo'yi VS Code'da ishlaydi: kod, terminal va Git — bitta oynada.
• Jamoada. Loyihalarda ko'pincha .vscode papkasi bo'ladi. Unda jamoaning umumiy sozlamalari va tavsiya qilingan kengaytmalar ro'yxati saqlanadi. Buni sozlamalar darsida ko'rasiz.
• Tezlik. Tajribali dasturchini birinchi qarashda sichqonchani kam ishlatishidan bilasiz. Ctrl + P va Ctrl + Shift + P — shu yo'lning boshi. Keyingi darsda yana ko'p yorliq o'rganamiz.
• Xavfsizlik. Soxta test topshiriq orqali hujum — haqiqiy xavf. Ish qidirayotganda begona loyihalarni faqat Restricted Mode'da oching.

Xulosa

• Matn muharriri → kod muharriri → IDE: imkoniyat oshadi, og'irlik ham oshadi. VS Code — kengaytmalar bilan IDE'ga aylana oladigan kod muharriri.
• O'rnatishda "Add to PATH" ni qoldiring, keyin terminalni qayta oching va code --version bilan tekshiring.
• Oyna qismlari: Activity Bar, Side Bar, Editor, Panel, Status Bar.
• Ctrl + Shift + P — barcha buyruqlar, Ctrl + P — fayl nomi bilan ochish.
• code . — joriy papkani ochadi. Doim faylni emas, papkani oching.
• Begona loyiha — Workspace Trust savoliga avval "No".

Keyingi dars: VS Code'da tez tahrirlash: multi-cursor va navigatsiya — bir nechta kursor bilan o'nlab qatorni birdan tahrirlash va katta faylda bir zumda kerakli joyga sakrashni o'rganamiz.