Vibecoding · 11-dars · 9-11 sinflar
Fan: IT / VibecodingПредмет: IT / VibecodingSubject: IT / Vibecoding Hafta: 2Неделя: 2Week: 2

Mahalliy Muhit: VS Code O'rnatish

Brauzer oynasi qafasidan chiqamiz! Dunyoning eng ommabop dasturlash muhiti (IDE) — VS Code ni o'rnatamiz va professional ish stolini sozlaymiz.

Erkinlik

Nega Brauzer (v0 / Claude) Yetarli Emas?

Onlayn muhitlar boshlash uchun qulay, ammo haqiqiy dasturiy mahsulotlar shaxsiy kompyuterda quriladi:

  • 1. Cheklovlarsiz fayllar: Minglab fayllar, papkalar, rasmlar va videolarni to'liq nazorat qila olasiz.
  • 2. Terminal kuchi: Kompyuterning buyruqlar satri (Terminal) orqali paketlar va serverlarni boshqarish.
  • 3. AI Agentlarni ulash: Mustaqil kod yozuvchi AI agentlar faqatgina VS Code kabi muhitlarda to'liq quvvat bilan ishlaydi!
Asbob

IDE Nima? (Ustaxona Metaforasi)

IDE (Integrated Development Environment) — bu dasturchining barcha asboblari bitta joyga yig'ilgan zamonaviy ustaxonasi.

Bloknot (Notepad)

Faqat oddiy qog'oz. Rang yo'q, xatoni ko'rsatmaydi, asboblari yo'q.

VS Code (IDE)

Rangli sintaksis, avto-to'ldirish, xatolarni qizil bilan ko'rsatish, terminal va AI yordamchi!

Dunyo Standarti

Dunyo dasturchilarining 75% dan ortig'i aynan VS Code ishlatadi.

Amaliy Qadam

VS Code O'rnatish (Rasmiy Manba)

Hech qachon shubhali saytlardan dastur yuklamang! Faqat rasmiy manzil:

https://code.visualstudio.com
  • Download for Windows / Mac / Linux: Katta ko'k tugmani bosing va o'rnatuvchini yuklab oling.
  • O'rnatishda muhim belgi: "Add to PATH" va "Open with Code" katakchalariga belgi qo'ying!
Interfeys

VS Code Interfeysi Anatomiyasi

1. Activity Bar (Chap panel)

📁 Explorer (Fayllar), 🔍 Qidiruv, 🔀 Git nazorati va 🧩 Extensions (Kengaytmalar do'koni).

2. Editor (Markaziy oyna)

Asosiy kod yoziladigan joy. Bir vaqtning o'zida bir nechta fayllarni yonma-yon ochish mumkin.

3. Terminal (Pastki oyna)

Ctrl + ` bosilganda ochiladi. Kompyuterga bevosita buyruq beruvchi konsol.

4. Status Bar (Pastki tasma)

UTF-8 kodirovkasi, til (HTML/JS), xatolar soni va Live Server holati.

Super-Kuchlar

Top 3 Ta Majburiy Kengaytma (Extensions)

VS Code ni yanada kuchli qilish uchun kengaytmalar bo'limidan (Ctrl + Shift + X) o'rnatamiz:

  • ⚡ Live Server: Bitta tugma bilan mahalliy veb-server ishga tushiradi. Kodni saqlaganingizda (Ctrl + S) brauzer o'z-o'zidan yangilanadi!
  • 🎨 Prettier: Xira va chalkash kodlarni chiroyli, tekis qilib tartiblab beradi (Format Document).
  • 📁 Material Icon Theme: Papkalar va fayllar yoniga chiroyli rang-barang belgilar qo'yadi.
Tezkor Natija

Live Server Qanday Ishlaydi?

Ilgari har safar o'zgarish qilganda faylni ikki marta bosib ochish yoki brauzerni F5 qilish kerak edi.

Eski Usul (Sekin)

Kodni yoz -> Saqla -> Brauzerga o't -> F5 bos. (Har safar 5 soniya yo'qotish!)

Live Server (Tezkor)

VS Code pastida "Go Live" tugmasini bosing -> http://127.0.0.1:5500 ochiladi. Har bir saqlash (Ctrl+S) bir zumda aks etadi!

Sehrli Konsol

Terminal Bilan Tanishuv: Qora Oyna

Filmlarda xakerlar qora oynada tez-tez yozishadi. Bu — Terminal (Buyruqlar Satri).

  • Ctrl + ` (yoki Terminal -> New Terminal): VS Code ichida terminalni ochadi.
  • Sichqoncha bilan 10 ta papka bosib o'tirish o'rniga, bitta buyruq bilan fayllar yaratish va dasturni yurgizish mumkin!
Oltin Qoida

Eng Katta Qoida: "Open Folder"

Yangi boshlovchilar fayllarni yakka-yakka ochib adashishadi. Dasturchi har doim Butun Papkani ochadi:

File -> Open Folder (Papkani Ochish) -> Loyihangiz papkasini tanlang.
Shunda chap tomonda barcha HTML, CSS, JS fayllar va rasmlar daraxt shaklida chiroyli ko'rinadi!

Ko'chirish

Avvalgi Loyihalarimizni VS Code ga O'tkazish

1-hafta va 2-haftada qilgan Pomodoro va Valyuta Konverteri fayllarimizni VS Code da ochamiz:

  • Kompyuteringizda my-projects degan yangi papka oching.
  • Fayllarni ichiga ko'chiring va VS Code orqali ochib, Live Serverda ishga tushiring!
Ustaxona Sozlash

Amaliy Vazifa: VS Code Muhitini Sozlash

  • 1. VS Code ni muvaffaqiyatli o'rnatish va birinchi marta ochish
  • 2. Live Server va Prettier kengaytmalarini o'rnatish
  • 3. Loyihani "Open Folder" orqali ochib, Live Serverda brauzerda ishga tushirish
10 ballik mezon
VS Code ni muvaffaqiyatli o'rnatish va birinchi marta ochish3
Live Server va Prettier kengaytmalarini o'rnatish4
Loyihani "Open Folder" orqali ochib, Live Serverda brauzerda ishga tushirish3
Jami10
Dars Yakuni

Dars Xulosasi: Katta Sahnaga Tayyormiz!

  • Siz endi brauzer foydalanuvchisi emassiz — sizda Professional Dasturchi Ish Quroli bor.
  • Keyingi darsda bu ustaxonaga eng kuchli kuchni kiritamiz: Mustaqil Kod Yozuvchi Agentik AI (Cline / Cursor)!
Target International SchoolTarget International School Kirish 0–2
1 / 14