VS Code'da tez tahrirlash: multi-cursor va navigatsiya

Qisqacha: VS Code'da bir vaqtda bir nechta kursor qo'yish mumkin — shunda bitta o'zgarish o'nta qatorga birdan yoziladi. Alt + Click kursor qo'shadi, Ctrl + D keyingi xuddi shunday so'zni tanlaydi, Alt + ↑/↓ qatorni ko'chiradi. F2 nomni butun fayl bo'ylab xavfsiz o'zgartiradi, Ctrl + Shift + O esa fayl ichidagi kerakli joyga sakraydi. macOS'da Ctrl o'rnida ko'pincha Cmd, Alt o'rnida Option bosiladi.

Bu darsda

• Bir nechta kursor bilan bir vaqtda o'nlab qatorni tahrirlay olasiz (Alt + Click, Ctrl + Alt + ↑/↓, Ctrl + D).
• Qatorni sichqonchasiz ko'chirasiz, nusxalaysiz, o'chirasiz va izohga olasiz.
• Katta faylda kerakli joyga bir zumda sakraysiz (Ctrl + G, Ctrl + Shift + O, F12, Alt + ←).
• Nomni F2 bilan xavfsiz o'zgartirasiz va nega oddiy almashtirish xavfli ekanini tushuntira olasiz.
• Qidirish oynasida regex bilan ko'p qatorni bir bosishda o'zgartirasiz.

Oldin bilishingiz kerak: Muharrir va IDE; VS Code bilan tanishuv, OS va matn tahrirlash yorliqlari, Fayl va matn qidirish (regex qismi).

1. Nega bu kerak?

Tasavvur qiling: Malika do'kon uchun mahsulotlar ro'yxatini yozdi. 20 ta nom, har biri alohida qatorda. Endi dastur bu ro'yxatni JSON ko'rinishida kutyapti: har nom qo'shtirnoqda va oxirida vergul bo'lishi kerak.

Qo'lda qilsa: 20 marta qator boshiga borish, " yozish, qator oxiriga borish, ", yozish. Taxminan 80 ta harakat. Bitta qatorni unutsa — JSON buziladi.

VS Code'da bu ish bir necha soniya oladi: 20 ta kursor qo'yiladi va " bir marta yoziladi. U 20 joyda birdan paydo bo'ladi.

OS yorliqlari darsida Ctrl + ←/→, Home, End kabi hamma dasturda ishlaydigan yorliqlarni o'rgandik. Bu dars — ularning ustiga VS Code'ning o'z yorliqlari. Hammasini bir kunda yodlash shart emas. Har hafta 2–3 tasini odat qilsangiz yetarli.

Maslahat: Yorliqlar Windows va Linux'da deyarli bir xil. macOS'da odatda Ctrl → Cmd, Alt → Option. Farq bo'lgan joylarda jadvalda alohida yozilgan. To'liq ro'yxat VS Code ichida: Ctrl + K, keyin Ctrl + S (macOS'da Cmd + K, Cmd + S).

2. Multi-cursor: bir nechta kursor

2.1 Kursor qo'shish

Odatda ekranda bitta miltillovchi chiziq bo'ladi — kursor. Siz yozgan harf aynan shu joyga tushadi. Multi-cursor (ko'p kursor) — ekranda bir vaqtda bir nechta kursor bo'lishi. Siz bitta harf bossangiz, u har bir kursor turgan joyga yoziladi.

O'xshatish: bir qo'lda o'nta ruchka ushlab, bitta harakat bilan o'nta daftarga bir xil so'z yozish.

Diqqat: Linux'da "yuqoriga/pastga kursor" yorlig'i boshqacha: Shift + Alt + ↑/↓. Ba'zi Windows noutbuklarida esa Ctrl + Alt + ↓ ekranni ag'darib yuboradi (videokarta dasturi yorlig'i). Shunday bo'lsa, Ctrl + Alt + ↑ bosing — ekran qaytadi. Keyin videokarta sozlamalarida bu yorliqni o'chiring yoki Alt + Click dan foydalaning.

2.2 Ustun bo'ylab tanlash

Ba'zan bir nechta qatorning bir xil ustunini tanlash kerak. Masalan, har qatorning birinchi 3 ta harfini. Buning uchun Shift + Alt (macOS'da Shift + Option) ni bosib turib, sichqonchani tortasiz. To'rtburchak shaklida bo'lak tanlanadi va har qatorda alohida kursor paydo bo'ladi.

Tekshirib ko'ring: Ekranda 5 ta kursor bor. Siz Esc bosdingiz. Nechta kursor qoladi?

3. Bir xil so'zlarni tanlash: Ctrl + D

3.1 Navbatma-navbat tanlash

Kursorni biror so'z ustiga qo'yib Ctrl + D (macOS'da Cmd + D) bossangiz, shu so'z tanlanadi. Yana bossangiz — fayldagi keyingi xuddi shunday so'z ham tanlanadi va u yerda ham kursor paydo bo'ladi. Endi yozganingiz ikkala joyga tushadi.

Misol. Fayl shunday:

mijoz_1: Ali
mijoz_2: Vali
mijoz_3: Olim

1. Kursorni birinchi mijoz so'ziga qo'ying.
2. Ctrl + D ni 3 marta bosing — uchala mijoz tanlanadi.
3. xaridor deb yozing.

Natija:

xaridor_1: Ali
xaridor_2: Vali
xaridor_3: Olim

3.2 Birini o'tkazib yuborish va hammasini tanlash

Ctrl + K, keyin Ctrl + D — bu ikki bosqichli yorliq (chord). Avval Ctrl + K ni bosib qo'yib yuborasiz, keyin Ctrl + D ni bosasiz. VS Code'da bunday yorliqlar ko'p.

Maslahat: Ctrl + D ni hech narsa tanlanmagan holda boshlasangiz, u faqat butun so'zlarni topadi: ism ni tanlasa, ismlar ichidagi ism ni olmaydi. Agar oldin qo'lda bir bo'lakni belgilab, keyin Ctrl + D bossangiz — so'z ichidagi bo'laklarni ham topadi. Ikkalasi ham foydali, farqini bilib qo'ying.

Tekshirib ko'ring: Faylda narx so'zi 12 marta uchraydi. Hammasini qiymat ga almashtirish kerak. Ctrl + D ni 12 marta bosasizmi?

4. Qatorlar bilan tez ishlash

4.1 Asosiy yorliqlar

Kursor qatorning istalgan joyida tursa bo'ldi — bu yorliqlar butun qator bilan ishlaydi. Qatorni oldindan belgilash shart emas.

Izoh — kodga yozilgan, lekin dastur bajarmaydigan eslatma. JavaScript'da u // bilan boshlanadi, Markdown yoki HTML'da <!-- --> ichida bo'ladi. Ctrl + / fayl tiliga qarab to'g'ri belgini o'zi qo'yadi. Dasturchilar vaqtincha bir qatorni "o'chirib turish" uchun ham uni ishlatadi: qator o'chmaydi, faqat bajarilmay turadi.

4.2 Nega Ctrl + X / Ctrl + V emas?

Qatorni ikki qator pastga tushirish uchun kesib olib, qo'yish ham mumkin. Lekin bunda bufer (clipboard — nusxalangan narsa saqlanadigan joy) ustiga yoziladi. Ichida muhim narsa bo'lsa, u yo'qoladi. Alt + ↓ buferga tegmaydi va kursor joyidan qo'zg'almaydi.

4.3 Bloklarni yig'ish (folding)

Uzun faylda ba'zi bo'laklarni vaqtincha "yig'ib qo'yish" mumkin — folding. Bo'lak o'chmaydi, faqat bitta qatorga qisqaradi. Xuddi kitob bobini yopib qo'yishdek.

Qator raqami yonida ⌄ belgisi chiqadi — sichqoncha bilan ham bossangiz bo'ladi. Markdown faylda sarlavhalar, JSON faylda { } bloklar yig'iladi.

Tekshirib ko'ring: Qatorni ko'chirishda Alt + ↓ nima uchun Ctrl + X, Ctrl + V dan yaxshiroq?

5. Fayl ichida va loyiha bo'ylab sakrash

5.1 Navigatsiya yorliqlari

Navigatsiya — fayl ichida yoki fayllar orasida kerakli joyga borish. Katta faylda sichqoncha g'ildiragini aylantirib qidirish vaqt oladi. Buning o'rniga:

Bu yerda belgi (symbol) — faylning "mundarija bandi": Markdown'da sarlavha, dastur kodida esa funksiya yoki o'zgaruvchi nomi. Ctrl + Shift + O ni bosib : yozsangiz, ro'yxat turlari bo'yicha guruhlanadi.

Maslahat: Ertaga qanday Markdown konspekt yozsangiz, Ctrl + Shift + O bilan uning sarlavhalari ro'yxatini ko'ring. Kod bo'lmasa ham, bu yorliq ishlaydi va uzun faylda juda qulay.

5.2 Go to Definition: nom qayerdan kelgan?

Keyingi misol JavaScript'da. Tilni 08-qismda o'rganamiz — hozir faqat ma'nosini tushunish yetarli:

function narxniHisobla(soni) {
  return soni * 12000;
}

console.log(narxniHisobla(3)); // 36000

• 1–3-qatorlar — narxniHisobla nomli "retsept" (funksiya): sonini olib, 12 000 ga ko'paytiradi.
• 5-qator shu retseptni 3 bilan ishlatadi va natijani chiqaradi.

Kursorni 5-qatordagi narxniHisobla ustiga qo'yib F12 bossangiz, VS Code 1-qatorga sakraydi. Katta loyihada e'lon boshqa faylda bo'lsa ham, o'sha faylni ochib beradi. Qaytish — Alt + ←.

Tekshirib ko'ring: F12 bilan boshqa faylga sakradingiz va u yerda ancha yurdingiz. Endi dastlabki joyingizga qaytmoqchisiz. Qaysi yorliq?

6. F2: nomni xavfsiz o'zgartirish

6.1 Oddiy almashtirish nega xavfli?

Ctrl + H — almashtirish (Replace) oynasi. U matnni harfma-harf qidiradi va nima ekanini tushunmaydi. Masalan, loyihada id nomi bor va uni mijozId ga o'zgartirmoqchisiz. "Hammasini almashtir" bossangiz, hidden so'zi ichidagi id ham o'zgaradi: hmijozIdden. Kod buziladi.

6.2 F2 qanday ishlaydi

Kursorni nom ustiga qo'yib F2 bosing. Kichik oyna ochiladi — yangi nomni yozib Enter bosasiz. VS Code kodning tuzilishini tushunadi. U faqat aynan shu nomni o'zgartiradi: so'z ichidagi bo'laklarga yoki boshqa narsaga tegishli bir xil nomga tegmaydi. Loyihaning boshqa fayllarida ishlatilgan bo'lsa, u yerda ham yangilaydi.

Sinab ko'rish uchun:

const narx = 12000;
const soni = 3;
console.log(narx * soni); // 36000

Birinchi qatordagi narx ustida F2 bosing va bahosi deb yozing. 1- va 3-qatordagi ikkala narx birdan o'zgaradi.

Diqqat: F2 VS Code tilini tushunadigan fayllarda ishlaydi: JavaScript, TypeScript, Markdown sarlavhalari va boshqalar. Oddiy .txt faylda No result. (natija yo'q) degan xabar chiqadi. U holda Ctrl + D yoki Ctrl + H ga qaytasiz.

Tekshirib ko'ring: Nima uchun o'zgaruvchi nomini Ctrl + H emas, F2 bilan o'zgartirgan ma'qul?

7. Qidirish va regex bilan almashtirish

7.1 Qidirish oynasi

Qidirish oynasida uchta kichik tugma bor. Ularni yorliq bilan ham yoqasiz:

"Faqat butun so'z" yoqilsa, id qidirganda hidden topilmaydi. Yuqoridagi hmijozIdden muammosining bir yechimi shu.

7.2 Regex bilan almashtirish

Qidirish darsida regex (muntazam ifoda — qidiruv qolipi) bilan tanishgan edik: ^ — qator boshi, $ — qator oxiri, [0-9] — bitta raqam. VS Code qidiruvi ham shu qoliplarni tushunadi. Ustiga bitta yangi narsa qo'shamiz: guruh.

Qolipning bir qismini ( ) qavsga olsangiz — bu guruh. Topilgan guruhni almashtirish maydonida $1 deb qaytadan ishlatasiz.

Misol. Narxlar ro'yxati:

Non 5000
Sut 11000
Qatiq 9000

Har narx oxiriga " so'm" qo'shish kerak.

1. Ctrl + H ni oching va Alt + R bilan regex rejimini yoqing.
2. Qidirish maydoniga: ([0-9]+)$ — "qator oxiridagi bir yoki bir nechta raqam", guruhga olingan.
3. Almashtirish maydoniga: $1 so'm — "topilgan raqam, keyin so'm so'zi".
4. "Replace All" — Ctrl + Alt + Enter (macOS'da Cmd + Enter).

Natija:

Non 5000 so'm
Sut 11000 so'm
Qatiq 9000 so'm

+ — "oldingi belgi bir yoki ko'p marta". Ya'ni [0-9]+ — bitta emas, butun son.

Tekshirib ko'ring: (Ali|Vali) qolipi va almashtirish maydonida Hurmatli $1 yozilgan. Vali keldi qatori nimaga aylanadi?

8. Hammasi birga: ro'yxatdan JSON massiv

Endi dars boshidagi Malikaning vazifasini yechamiz. Ro'yxat:

olma
anor
behi
anjir

1. Kursorni olma qatoriga qo'ying va Ctrl + Alt + ↓ ni 3 marta bosing — 4 ta kursor.
2. Home — hamma kursor qator boshiga boradi. " yozing.
3. End — hamma kursor qator oxiriga boradi. ", yozing.
4. Esc bosing.
5. Oxirgi qatordagi vergulni o'chiring — JSON'da oxirgi elementdan keyin vergul bo'lmaydi.
6. Yuqoriga [, pastga ] qo'shing.

Natija:

[
  "olma",
  "anor",
  "behi",
  "anjir"
]

Endi siz to'ldiring. Faylda 4 ta qator bor. Hammasini tanlab, har qator oxiriga bittadan kursor qo'yish yorlig'i — Shift + Alt + .

9. Ko'p uchraydigan xatolar

9.1 Nomni oddiy Ctrl + H bilan almashtirish

Belgisi: almashtirishdan keyin kodda hmijozIdden kabi g'alati so'zlar paydo bo'ldi va dastur ishlamay qoldi. Sabab: almashtirish so'z ichidagi bo'laklarni ham o'zgartirdi. Tuzatish: Ctrl + Z bilan bekor qiling. Nom uchun F2 ishlating. Oddiy matn bo'lsa — "Faqat butun so'z" (Alt + W) ni yoqing.

9.2 Multi-cursor'dan chiqishni unutish

Belgisi: bitta joyga yozdingiz, lekin harflar yana bir necha joyda paydo bo'ldi. Sabab: qo'shimcha kursorlar hali turibdi. Tuzatish: Ctrl + Z bilan bekor qiling, Esc bosing va qaytadan yozing. Qoida: multi-cursor ishi tugadi — Esc.

9.3 Ctrl + Alt + ↓ ekranni ag'dardi

Belgisi: Windows noutbukda ekran teskari bo'lib qoldi. Sabab: videokarta dasturi bu yorliqni o'zi uchun olgan. Tuzatish: Ctrl + Alt + ↑ — ekran qaytadi. Videokarta sozlamalarida "hotkeys" ni o'chiring yoki kursor qo'shish uchun Alt + Click ishlating.

9.4 Regex rejimi yoqilmagan

Belgisi: ([0-9]+)$ qidirildi — "No results". Sabab: .* tugmasi o'chiq, VS Code qavs va $ belgilarini oddiy harf deb qidiryapti. Tuzatish: Alt + R bilan regex rejimini yoqing. Tugma yoqilganda ramka bilan ajralib turadi.

9.5 F2 hech narsa qilmadi

Belgisi: No result. xabari chiqdi yoki hech narsa bo'lmadi. Sabab: fayl turi (masalan .txt) uchun VS Code kodni tahlil qilmaydi. Tuzatish: faylning kengaytmasini tekshiring. Oddiy matnda Ctrl + Shift + L yoki Ctrl + H ishlating.

10. Mashqlar

1-mashq (oson): O'zgaruvchilar ro'yxati

Yangi mashq.js fayl oching va yozing:

ism
familiya
shahar

Multi-cursor bilan har qator boshiga const va oxiriga = ""; qo'shing. const — JavaScript'da "nomli quti yarat" degan so'z, 08-qismda o'rganamiz. Hozir bu faqat matn mashqi.

Yordam: Ctrl + Alt + ↓, Home, End — "Ro'yxatdan JSON massiv" misolidagi kabi.

const ism = "";
const familiya = "";
const shahar = "";

2-mashq (o'rta): Qator bilan o'yin

Yangi faylda bitta qator yozing: Toshkent. Faqat klaviatura bilan:

1. Uni 4 marta nusxalang — jami 5 qator bo'lsin.
2. 3-qatordagi so'zni Samarqand ga almashtiring (Home, keyin Shift + End bilan tanlab, ustidan yozing — OS yorliqlari darsidan).
3. Samarqand qatorini eng tepaga olib chiqing.
4. Oxirgi qatorni o'chiring.

Yorliqlar: Shift + Alt + ↓, Alt + ↑, Ctrl + Shift + K — hammasi "Qatorlar bilan tez ishlash" bo'limida.

Samarqand
Toshkent
Toshkent
Toshkent

3-mashq (qiyin): Telefon raqamlarni tartiblash

Faylda shunday ro'yxat bor:

Ali 901234567
Malika 935556677
Jasur 977778899

Regex almashtirish bilan har qatorni shu ko'rinishga keltiring: Ali: +998 901234567.

Yordam: ikkita guruh kerak — biri ism uchun ([A-Za-z]+), biri raqam uchun ([0-9]+). Almashtirishda $1 va $2 ishlatiladi. +998 dagi + almashtirish maydonida oddiy belgi, qolip emas.

Ali: +998 901234567
Malika: +998 935556677
Jasur: +998 977778899

4-mashq (qiyin): F2 va F12

"Go to Definition" bo'limidagi narxniHisobla kodini faylga yozing (hisob.js). Keyin:

1. 5-qatordagi nom ustida F12 bosing — qayerga sakradi?
2. Alt + ← bilan qayting.
3. 1-qatordagi soni ustida F2 bosib, miqdor ga o'zgartiring. Nechta joy o'zgardi?

11. Real ishda

• Refaktoring. Kodni ishlashini o'zgartirmay, tartibga keltirish refaktoring deyiladi. Uning eng ko'p uchraydigan qadami — nomni yaxshilash. Jamoalarda buni faqat F2 bilan qilishadi.
• Begona kodni o'qish. Ishga kirganingizda birinchi haftalar asosan o'qish bilan o'tadi. F12, Shift + F12 va Alt + ← — begona loyihada adashmaslikning asosiy vositalari.
• Ma'lumot tayyorlash. Excel'dan ko'chirilgan ro'yxatni JSON'ga yoki SQL'ga aylantirish — multi-cursor va regex ishi.
• Intervyu. Jonli kod yozish (live coding) intervyularida ekraningizni kuzatishadi. Yorliqlarni bilish ishonch va tajriba belgisi bo'lib ko'rinadi.
• Boshqa muharrirlar. Cursor, Devin Desktop kabi muharrirlar VS Code asosida qurilgan — bu yorliqlar ularda ham ishlaydi. WebStorm'da boshqacharoq, lekin g'oya bir xil.

Xulosa

• Multi-cursor: Alt + Click, Ctrl + Alt + ↑/↓; tugagach — Esc.
• Ctrl + D — keyingi bir xil so'z; Ctrl + Shift + L — hammasi birdan.
• Qator: Alt + ↑/↓ ko'chiradi, Shift + Alt + ↑/↓ nusxalaydi, Ctrl + Shift + K o'chiradi, Ctrl + / izohga oladi.
• Sakrash: Ctrl + G qatorga, Ctrl + Shift + O belgiga, F12 e'longa, Alt + ← orqaga.
• Nom o'zgartirish — faqat F2; matn almashtirishda "butun so'z" va regex ($1) yordam beradi.
• macOS: odatda Ctrl → Cmd, Alt → Option.

Keyingi dars: VS Code sozlamalari: settings.json va profillar — VS Code'ni o'zingizga moslaysiz va sozlamalar qayerda saqlanishini ko'rasiz.

Manbalar

• VS Code: Basic Editing
• VS Code yorliqlari (Windows, PDF) · macOS, PDF