VS Code ichki terminali, tasks va masofaviy ishlash

Qisqacha: VS Code ichida to'liq terminal bor: Ctrl + ` (macOS'da ham Ctrl + ` ) uni ochadi va yopadi, u darhol loyiha papkasida turadi. Takroriy buyruqni .vscode/tasks.json ga yozib, Ctrl + Shift + B ga bog'lash mumkin. Faylni noto'g'ri saqlab qo'ysangiz, Timeline oldingi nusxani qaytaradi. Remote kengaytmalari esa WSL, uzoqdagi server yoki konteyner ichidagi fayllarni xuddi o'z kompyuteringizdagidek ochadi.

Bu darsda

• Ichki terminalni ochasiz, yangisini qo'shasiz, ikkiga bo'lasiz va to'g'ri yopasiz.
• Terminal qaysi shell'da ochilishini tanlaysiz (PowerShell, Git Bash, WSL).
• tasks.json da vazifa yozib, uni yorliq bilan ishga tushirasiz.
• Timeline orqali faylning oldingi saqlangan holatini tiklaysiz.
• Remote - WSL, Remote - SSH va Dev Containers nima uchun kerakligini tushuntirasiz.

Oldin bilishingiz kerak: Muharrir va IDE; VS Code bilan tanishuv, Terminal, shell va prompt, WSL2: Windows ichida Linux, Snippetlar.

1. Nega bu kerak?

Hozircha siz ikki oyna o'rtasida yurasiz: VS Code'da fayl yozasiz, alohida terminal oynasida buyruq berasiz. Har safar Alt + Tab, kerakli oynani qidirish, cd bilan to'g'ri papkaga borish. Kuniga yuzlab marta.

VS Code ichidagi terminal bu yo'lni qisqartiradi: kod tepada, terminal pastda, ikkalasi bir oynada. Terminal loyiha papkasida ochiladi — cd ham kerak emas.

Ikkinchi muammo: dasturchi ko'pincha o'z kompyuterida emas, boshqa joyda ishlaydi. Masalan, uzoqdagi serverda yoki WSL ichidagi Linux'da. U yerda qulay muharrir yo'q, faqat qora terminal. VS Code'ning masofaviy ishlash imkoniyati o'sha joydagi fayllarni ham shu tanish oynada ochadi.

2. Ichki terminal

2.1 Ochish va yopish

` — **backtick** (orqaga qiya tirnoq). Klaviaturada odatda Esc ning tagida, 1 ning chap tomonida, ~ bilan bir tugmada turadi (dasturchi belgilari darsi).

Diqqat: macOS'da ham terminal Ctrl + ` bilan ochiladi, Cmd + ` bilan emas. Cmd + ` macOS'da bir dasturning oynalari orasida almashtiradi — u VS Code'ning boshqa oynasiga o'tkazib yuboradi.

Menyu orqali: View → Terminal yoki Terminal → New Terminal.

Terminal ochilganda qayerda turadi? Loyiha papkasida — ya'ni VS Code'da ochgan papkangizda. Tekshirib ko'ring: pwd (PowerShell va bash'da ishlaydi).

PS D:\loyihalar\mening-saytim> pwd

Path
----
D:\loyihalar\mening-saytim

2.2 Terminal paneli tugmalari

Terminal panelining o'ng yuqorisida bir nechta belgi bor:

Bir nechta terminal ochilsa, o'ng tomonda ular ro'yxati chiqadi. Har biri alohida jarayon — biri ishlab tursa, ikkinchisida bemalol boshqa buyruq berasiz. Masalan, keyinchalik chap terminalda sayt serveri ishlab turadi, o'ngda esa siz buyruqlar yozasiz.

2.3 Yashirish va yopish — boshqa-boshqa narsa

Bu boshlovchilar eng ko'p adashadigan joy.

• Ctrl + ` yoki ✕ — panelni yashiradi. Terminal va undagi dastur ishlashda davom etadi.
• Axlat qutisi — terminalni yopadi. Undagi dastur ham to'xtaydi.
• Ctrl + C — terminal ichida ishlab turgan dasturni to'xtatadi, terminalning o'zi qoladi (jarayonlar darsi).

Terminalda matn belgilangan bo'lsa, Ctrl + C uni nusxalaydi. Hech narsa belgilanmagan bo'lsa — dasturni to'xtatadi. Joylash — Ctrl + V.

2.4 Foydali mayda narsalar

• Terminal chiqishidagi fayl yo'li ustida Ctrl + Click (macOS'da Cmd + Click) — o'sha fayl muharrirda ochiladi. Xato xabarida app.js:12 kabi yozuv bo'lsa, to'g'ri 12-qatorga olib boradi.
• Faylni Explorer'dan terminalga sudrab olib kelsangiz, uning to'liq yo'li yoziladi.
• Muharrirda buyruqni belgilab, Command Palette'da Terminal: Run Selected Text In Active Terminal — belgilangan matn terminalda bajariladi.

Tekshirib ko'ring: Terminalda dastur ishlab turibdi. Siz Ctrl + ` bosdingiz va panel yo'qoldi. Dastur to'xtadimi?

3. Default profile: qaysi shell ochilsin

3.1 Tanlash

Terminal profili — terminal qaysi shell (shell darsi) bilan ochilishi. Windows'da odatda bir nechtasi bor: PowerShell, Command Prompt, Git Bash, WSL (Ubuntu). macOS'da — zsh va bash.

Bittasini asosiy qilish uchun Command Palette'da:

Terminal: Select Default Profile

Ro'yxatdan tanlaysiz. Endi + bosilganda yoki Ctrl + Shift + ` da shu shell ochiladi. Bir martalik boshqa shell kerak bo'lsa — + yonidagi ⌄ belgisidan tanlaysiz.

3.2 settings.json da

Tanlovingiz User sozlamalariga yoziladi:

{
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "terminal.integrated.fontSize": 14
}

macOS uchun kalit — terminal.integrated.defaultProfile.osx, Linux uchun — terminal.integrated.defaultProfile.linux.

Maslahat: Bu kursdagi bash buyruqlarini Windows'da sinash uchun Git Bash yoki WSL'ni asosiy profil qiling. PowerShell'da ko'p buyruq ishlaydi, lekin ba'zilari boshqacha (PowerShell darsi).

Tekshirib ko'ring: "terminal.integrated.defaultProfile.windows": "Git Bash" sozlamasi macOS kompyuterda nimaga ta'sir qiladi?

4. Tasks: buyruqni yorliqqa bog'lash

4.1 Task nima

Task (vazifa) — VS Code'ga yozib qo'yilgan terminal buyrug'i. Uni nomi bilan yoki yorliq bilan ishga tushirasiz. VS Code o'zi terminal ochadi va buyruqni bajaradi.

Nega kerak? Loyihada har kuni bir xil buyruqlar beriladi: tekshirish, yig'ish, ishga tushirish. Ba'zilari uzun, ba'zilari parametrli. Ularni har safar terish — vaqt va xato. Task — xuddi snippet kabi, lekin matn uchun emas, buyruq uchun.

Tasklar loyihaning .vscode/tasks.json faylida turadi.

4.2 Birinchi task

Command Palette'da Tasks: Configure Task → "Create tasks.json file from template" → "Others". VS Code namunali fayl yaratadi. Uni shunday qiling:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Fayllar ro'yxati",
      "type": "shell",
      "command": "ls",
      "problemMatcher": []
    }
  ]
}

Har qator nima degani:

• "version": "2.0.0" — fayl formati versiyasi. Doim shunday yoziladi.
• "tasks" — tasklar massivi. Bir nechta bo'lishi mumkin.
• "label" — task nomi. Ro'yxatda shu ko'rinadi.
• "type": "shell" — buyruq terminal shell'ida bajarilsin.
• "command" — bajariladigan buyruq. ls — papkadagi fayllar ro'yxati (PowerShell'da ham, bash'da ham ishlaydi).
• "problemMatcher": [] — "chiqishdan xato qidirma". Bu qator bo'lmasa, VS Code har safar so'raydi (quyida ko'ramiz).

Ishga tushirish: Command Palette → Tasks: Run Task → "Fayllar ro'yxati". Pastda yangi terminal ochiladi va ls natijasi chiqadi.

4.3 Yorliqqa bog'lash: Ctrl + Shift + B

Bitta taskni asosiy build task qilsangiz, u Ctrl + Shift + B (macOS'da Cmd + Shift + B) bilan ishga tushadi. Build — "yig'ish": loyihani ishga tayyorlash. Lekin yorliqqa istalgan taskni bog'lash mumkin.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Salomlashish",
      "type": "shell",
      "command": "echo \"Salom, IlmHamroh!\"",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": []
    }
  ]
}

• \" — buyruq ichidagi qo'shtirnoq, JSON'da ekranlangan. Terminalga echo "Salom, IlmHamroh!" bo'lib boradi.
• "group" — task qaysi guruhga kiradi. "kind": "build" — build guruhi.
• "isDefault": true — shu guruhning asosiysi. Ctrl + Shift + B aynan shuni ishga tushiradi.

Terminalda:

Salom, IlmHamroh!

Keyingi darsda Node.js o'rnatamiz. Shundan keyin "command": "node app.js" kabi tasklar yozasiz — dasturni bitta yorliq bilan ishga tushirish. Undan keyingi darsdagi npm skriptlarini VS Code task sifatida o'zi taniydi.

Diqqat: Begona loyihadagi tasks.json ichida xavfli buyruq bo'lishi mumkin. Shuning uchun Restricted Mode'da tasklar ishlamaydi. Loyihaga ishonishdan oldin tasks.json ni ochib o'qing.

Tekshirib ko'ring: tasks.json da ikkita task bor, ikkalasida "kind": "build", lekin "isDefault": true hech birida yo'q. Ctrl + Shift + B bossangiz nima bo'ladi?

5. Timeline: faylning oldingi holatlari

5.1 Muammo

Soat 10:00 da faylni saqladingiz. 10:30 da katta bo'lakni o'chirdingiz va saqladingiz. VS Code'ni yopib ochdingiz — Ctrl + Z endi yordam bermaydi. Git'da ham saqlanmagan (Git'ni 07-qismda o'rganamiz). O'chgan bo'lak yo'qoldimi?

5.2 Yechim: mahalliy tarix

VS Code har saqlashda faylning nusxasini alohida joyga qo'yib boradi — bu mahalliy tarix (local history). Uni Timeline panelida ko'rasiz: Explorer'ning eng pastida, "TIMELINE" sarlavhasi ostida.

1. Faylni oching.
2. Explorer'ning pastidagi Timeline bo'limini oching.
3. Har saqlash vaqti bilan ro'yxatda turadi. Birini bossangiz — oldingi va hozirgi holat yonma-yon ochiladi, farqlar rang bilan ko'rsatiladi.
4. Kerakli nuqtada o'ng tugma → Restore Contents — fayl o'sha holatga qaytadi.

Fayl o'chib ketgan bo'lsa ham: Command Palette → Local History: Find Entry to Restore.

Diqqat: Mahalliy tarix — zaxira nusxa emas. Har fayl uchun odatda oxirgi 50 ta saqlash turadi, juda katta fayllar umuman saqlanmaydi. Kompyuter buzilsa, u ham yo'qoladi. Haqiqiy tarix va zaxira uchun Git ishlatiladi.

Tekshirib ko'ring: Siz faylni o'zgartirdingiz, lekin saqlamadingiz. Timeline'da bu holat ko'rinadimi?

6. Masofaviy ishlash (Remote Development)

6.1 G'oya

Odatda VS Code ham, fayllar ham, dasturlar ham bitta kompyuterda. Masofaviy ishlash (remote development) — oyna sizning kompyuteringizda, fayllar va dasturlar esa boshqa joyda.

flowchart LR
  A["Sizning kompyuteringiz<br/>VS Code oynasi"] -->|"buyruqlar"| B["VS Code Server"]
  B -->|"natija"| A
  subgraph U["Boshqa joy: WSL, server yoki konteyner"]
    B --> C["Fayllar"]
    B --> D["Terminal, Node.js"]
  end

Masofaviy joyga VS Code'ning kichik "yordamchisi" — VS Code Server o'rnatiladi. U fayllarni o'qiydi, terminalni ishga tushiradi, kengaytmalarni bajaradi. Sizning kompyuteringizda faqat oyna turadi. Siz farqni deyarli sezmaysiz.

O'xshatish: televizor pulti. Pult qo'lingizda, lekin kanallar televizorning ichida o'zgaradi.

6.2 Uchta kengaytma

Hammasi Microsoft'niki. Birdaniga o'rnatish uchun — Remote Development to'plami (ms-vscode-remote.vscode-remote-extensionpack).

Ulanish nuqtasi — VS Code oynasining chap past burchagidagi rangli tugma (>< belgisi). Bosilsa, Open a Remote Window ro'yxati chiqadi.

6.3 WSL

WSL darsida Windows ichida Ubuntu o'rnatdik. Endi uni VS Code bilan bog'laymiz:

1. WSL kengaytmasini o'rnating (ms-vscode-remote.remote-wsl).
2. WSL terminalini oching (masalan, Ubuntu).
3. Loyiha papkasiga o'ting va code . yozing.

VS Code Windows'da ochiladi, lekin chap pastda WSL: Ubuntu yozuvi turadi. Ichki terminal ham endi Linux terminali, fayllar ham Linux fayl tizimida.

Maslahat: WSL'da ishlaganda loyihani Linux papkasida saqlang (~/loyihalar), /mnt/c/... da emas. Windows diskidagi fayllar WSL'dan sezilarli sekin ochiladi.

6.4 Remote - SSH

SSH (Secure Shell) — boshqa kompyuterga internet orqali xavfsiz ulanish usuli. Serverlarda ishlashda asosiy vosita. Uni 33-qismda (Linux, server) to'liq o'rganamiz.

Remote - SSH kengaytmasi bilan: chap pastdagi tugma → Connect to Host... → ali@203.0.113.10 kabi manzil. Ulangach, serverdagi papkani ochasiz va xuddi o'z kompyuteringizdagidek tahrirlaysiz. Terminal ham server terminali bo'ladi.

6.5 Dev Containers

Konteyner — dastur va unga kerak bo'lgan hamma narsa (to'g'ri Node versiyasi, baza, sozlamalar) solingan alohida "quti". Uni Docker degan dastur ishga tushiradi. Docker'ni 33-qismda o'rganamiz — hozir g'oyasini bilsangiz yetarli.

Dev Containers kengaytmasi loyihadagi .devcontainer/devcontainer.json faylini o'qiydi va loyihani shunday qutining ichida ochadi. Yangi dasturchi ishga keldi — hech narsa o'rnatmaydi, loyihani ochadi va hamma narsa tayyor.

Tekshirib ko'ring: Remote - SSH bilan serverga ulandingiz va ichki terminalda ls yozdingiz. Qaysi kompyuterdagi fayllar chiqadi?

7. Ko'p uchraydigan xatolar

7.1 Port band — EADDRINUSE

Belgisi: keyinchalik server ishga tushirganda: Error: listen EADDRINUSE: address already in use :::3000. Sabab: oldingi server hali ishlayapti. Siz panelni Ctrl + ` bilan yashirgansiz, lekin terminalni yopmagansiz. Yangi terminalda serverni qayta ishga tushirdingiz — 3000-port band. **Tuzatish:** terminallar ro'yxatidan eskisini toping, Ctrl + C bosing yoki axlat qutisi bilan yoping. Batafsil — jarayonlar va portlar darsi.

7.2 Task har safar savol beradi

Belgisi: task ishga tushganda ro'yxat chiqadi: Continue without scanning the task output. Tarjima: "Chiqishni xato uchun tekshirmasdan davom etish". Sabab: taskda problemMatcher yo'q. VS Code "chiqishdan xato qidirishim kerakmi?" deb so'rayapti. Tuzatish: taskga "problemMatcher": [] qo'shing.

7.3 code . WSL'da ishlamayapti

Belgisi: WSL terminalida code: command not found. Sabab: Windows'dagi VS Code o'rnatishda "Add to PATH" belgilanmagan yoki WSL terminali o'rnatishdan oldin ochilgan. Tuzatish: VS Code'ni "Add to PATH" bilan qayta o'rnating, WSL terminalini yopib qayta oching. Chap pastdagi tugma → "Connect to WSL" ham ishlaydi.

7.4 WSL ichida Windows yo'lini yozish

Belgisi: cd C:\loyiha → No such file or directory. Sabab: Linux'da Windows yo'llari boshqacha yoziladi. Tuzatish: Windows'ning C: diski WSL'da /mnt/c/ bo'ladi: cd /mnt/c/loyiha. Lekin loyihani Linux papkasiga ko'chirgan ma'qul.

8. Mashqlar

1-mashq (oson): Ikki terminal

1. Ctrl + ` bilan terminalni oching.
2. Ctrl + Shift + 5 bilan ikkiga bo'ling.
3. Chapda echo Chap, o'ngda echo "O'ng" yozing. Apostrofli so'z qo'shtirnoqda bo'lishi shart — aks holda shell ' ni "satr boshlandi" deb tushunadi va davomini kutadi.
4. O'ng terminalni axlat qutisi bilan yoping, chapini esa Ctrl + ` bilan yashiring.

Panelni qayta ochsangiz, nechta terminal bo'ladi?

2-mashq (o'rta): Timeline bilan qutqarish

1. rejam.txt fayliga Dushanba: HTML yozib saqlang.
2. Qatorni o'chirib, Dushanba: dam olish yozib saqlang.
3. Timeline'dan birinchi holatni toping va tiklang.

3-mashq (o'rta): O'z taskingiz

.vscode/tasks.json ga "Bugungi sana" nomli task qo'shing. U date buyrug'ini bajarsin va Ctrl + Shift + B bilan ishga tushsin. Savol chiqmasin.

Yordam: group, isDefault va problemMatcher — "Tasks" bo'limidagi ikkinchi misolda.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Bugungi sana",
      "type": "shell",
      "command": "date",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": []
    }
  ]
}

4-mashq (qiyin): WSL bilan ishlash

(Faqat Windows va WSL o'rnatilgan bo'lsa.)

1. WSL kengaytmasini o'rnating.
2. Ubuntu terminalida mkdir -p ~/loyihalar/wsl-sinov && cd ~/loyihalar/wsl-sinov bajaring.
3. code . yozing.
4. VS Code ichki terminalida uname -a yozing.

Chap pastda nima yozilgan? uname nima chiqardi?

9. Real ishda

• Kundalik ish: chapda sayt serveri, o'ngda test yoki git buyruqlari. Split terminal — deyarli har bir veb-dasturchining ekranida.
• Jamoa tasklari: .vscode/tasks.json loyiha bilan birga keladi — "loyihani ishga tushirish" hammada bir xil yorliq.
• Server bilan ishlash: saytni serverga joylagach, sozlama faylini tuzatish kerak bo'lsa — Remote - SSH bilan ulanib, VS Code'da ochasiz. vim (terminal ichidagi muharrir, Vim darsi) ni bilmasangiz ham ishlaysiz.
• Dev Containers katta kompaniyalar va ochiq kodli loyihalarda keng tarqalgan: "loyihani ochdingiz — hamma narsa tayyor". GitHub Codespaces shu g'oyaning bulutdagi ko'rinishi.
• Intervyu: "Remote serverda qanday ishlaysiz?" savoliga "Remote - SSH bilan" deb aniq javob berish ish tajribasi borligini ko'rsatadi.

Xulosa

• Ctrl + ` — terminalni ochish/yashirish (macOS'da ham Ctrl); Ctrl + Shift + ` — yangi terminal; Ctrl + Shift + 5 — bo'lish.
• Yashirish dasturni to'xtatmaydi: to'xtatish — Ctrl + C, yopish — axlat qutisi.
• Terminal: Select Default Profile — asosiy shell; kalit terminal.integrated.defaultProfile.windows.
• .vscode/tasks.json — buyruqlar ro'yxati; isDefault build task — Ctrl + Shift + B.
• Timeline — saqlangan holatlar tarixi; zaxira emas.
• WSL, Remote - SSH, Dev Containers — oyna sizda, fayllar va terminal boshqa joyda.

Keyingi dars: Node.js nima va uni o'rnatish — JavaScript'ni brauzerdan tashqarida ishga tushiradigan dasturni o'rnatasiz va birinchi faylingizni terminalda bajarasiz.

Manbalar

• VS Code: Terminal Basics
• VS Code: Tasks
• VS Code: Remote Development