VS Code sozlamalari: settings.json va profillar

Qisqacha: VS Code'ning har bir sozlamasi settings.json faylida "kalit": qiymat ko'rinishida saqlanadi. Sozlamalar oynasi (Ctrl + ,) shu faylni tahrirlashning qulay yo'li xolos. Ikki daraja bor: User — kompyuteringizdagi hamma loyiha uchun, Workspace — faqat shu loyiha uchun (.vscode/settings.json), va loyiha sozlamasi ustun turadi. Profillar har xil ish uchun alohida to'plam yaratadi, Settings Sync esa hammasini boshqa kompyuterga ko'chiradi.

Bu darsda

• Sozlamani oyna orqali ham, settings.json orqali ham o'zgartira olasiz va ular bir narsa ekanini tushuntirasiz.
• User va Workspace sozlamalarining farqini va qaysi biri ustun turishini bilasiz.
• formatOnSave, autoSave, tabSize kabi foydali sozlamalarni yoqasiz.
• keybindings.json da o'z yorlig'ingizni yaratasiz.
• Profil yaratasiz, Settings Sync'ni yoqasiz va .editorconfig nima uchun kerakligini tushuntirasiz.

Oldin bilishingiz kerak: VS Code'da tez tahrirlash, JSON: dasturlar tili (JSONC qismi ham), YAML, TOML, INI va .env.

1. Nega bu kerak?

Jasur va Malika bitta loyihada ishlaydi. Jasurning VS Code'i har chekinishga 4 ta bo'sh joy qo'yadi, Malikaniki — 2 ta. Jasur Malikaning faylini ochib, bir qator qo'shib saqladi. Endi faylda ikki xil chekinish aralashib ketdi. Kod xunuk, keyinroq "kim nimani o'zgartirdi" degan savolga javob topish ham qiyinlashadi.

Boshqa holat: Ali yangi noutbuk oldi. Eski kompyuterida yarim yil davomida VS Code'ni o'ziga moslagan edi: shrift, mavzu, kengaytmalar. Hammasini xotiradan tiklash — yarim kunlik ish.

Sozlamalarni to'g'ri boshqarish ikkala muammoni hal qiladi:

1. Loyihaga "bu yerda hamma 2 ta bo'sh joy ishlatadi" degan qoida yoziladi — kim ochsa ham shu ishlaydi.
2. Shaxsiy sozlamalar bulutda saqlanadi va yangi kompyuterda bir daqiqada tiklanadi.

2. Sozlamalar oynasi va settings.json

2.1 Sozlamalar oynasi (Settings UI)

Ctrl + , (macOS'da Cmd + ,) bosing. Tepada qidiruv maydoni bor oyna ochiladi. Masalan, font size deb yozing — shrift o'lchami sozlamasi chiqadi. Qiymatini 14 dan 16 ga o'zgartirsangiz, matn darhol kattalashadi. "Saqlash" tugmasi yo'q — o'zgarish darhol kuchga kiradi.

Foydali qidiruv so'zlari:

• @modified — faqat siz o'zgartirgan sozlamalar ro'yxati.
• @ext:esbenp.prettier-vscode — faqat bitta kengaytmaning sozlamalari (kengaytmalarni keyingi darsda ko'ramiz).

Har sozlama yonidagi tishli g'ildirak () bosilsa, "Reset Setting" chiqadi — asl qiymatiga qaytaradi.

2.2 Aslida hammasi bitta faylda

Oynada biror narsani o'zgartirganingizda, VS Code uni settings.json fayliga yozadi. Oyna — shu faylning "chiroyli ko'rinishi", xolos. Faylni to'g'ridan-to'g'ri ochish uchun Command Palette (Ctrl + Shift + P) da yozing:

Preferences: Open User Settings (JSON)

Fayl shunga o'xshash bo'ladi:

{
  // Muharrirdagi shrift o'lchami
  "editor.fontSize": 16,
  "workbench.colorTheme": "Dark Modern"
}

Har qator — kalit va qiymat juftligi. Kalit nomi nuqtalar bilan bo'lingan: editor.fontSize — "muharrir bo'limi, shrift o'lchami". workbench — VS Code oynasining umumiy qismi, files — fayllar bilan ishlash, terminal — terminal.

JSON darsida ko'rganimizdek, bu fayl aslida JSONC — izohli JSON. Shuning uchun // izoh yozish mumkin. Boshqa qoidalar oddiy JSON'dagidek: kalit qo'shtirnoqda, juftliklar vergul bilan ajratiladi.

Maslahat: settings.json da qo'shtirnoq ochib, editor. deb yoza boshlang — VS Code mavjud kalitlar ro'yxatini taklif qiladi. Kalit ustiga sichqonchani olib borsangiz, uning tavsifi chiqadi. Kalit nomini yoddan bilish shart emas.

Fayl kompyuterda shu yerda turadi:

Tekshirib ko'ring: Siz sozlamalar oynasida shrift o'lchamini 18 qildingiz. Keyin settings.json ni ochdingiz. U yerda nimani ko'rasiz?

3. User va Workspace: ikki daraja

3.1 Qaysi biri qayerda

VS Code sozlamalari qatlam-qatlam turadi:

Workspace (ish maydoni) — VS Code'da ochilgan loyiha papkasi. Uning ichidagi .vscode/ papkasi — shu loyihaning VS Code sozlamalari joyi. Nuqta bilan boshlangani uchun ba'zi tizimlarda yashirin ko'rinadi (fayl nomlash darsi).

Qoida oddiy: aniqroq daraja ustun turadi. Bitta kalit ikki joyda yozilgan bo'lsa, loyiha sozlamasi foydalanuvchi sozlamasini yengadi.

flowchart LR
  D["Default<br/>tabSize: 4"] --> U["User<br/>tabSize: 2"]
  U --> W["Workspace<br/>tabSize: 4"]
  W --> N["Natija: 4"]

O'xshatish: maktab qoidasi — "forma kiyiladi" (User). Sport zali qoidasi — "zalda sport kiyimi" (Workspace). Zalda zal qoidasi amal qiladi, chunki u shu joy uchun aniqroq.

3.2 Sozlamalar oynasida darajani tanlash

Ctrl + , oynasining tepasida ikkita yorliq (tab) bor: User va Workspace. Qaysi biri tanlangan bo'lsa, o'zgarish o'sha darajaga yoziladi. Workspace'ni birinchi marta o'zgartirganingizda VS Code .vscode/settings.json faylini o'zi yaratadi.

Qo'lda ochish buyrug'i:

Preferences: Open Workspace Settings (JSON)

3.3 Faqat bitta til uchun

Sozlamani faqat bitta dasturlash tiliga qo'llash ham mumkin. Buning uchun til nomi kvadrat qavsda yoziladi:

{
  "editor.tabSize": 4,
  "[javascript]": {
    "editor.tabSize": 2
  }
}

Bu yerda: hamma faylda 4 ta bo'sh joy, lekin JavaScript fayllarida — 2 ta. Til sozlamasi umumiy sozlamadan ham ustun.

Tekshirib ko'ring: User'da "editor.fontSize": 14, loyihaning .vscode/settings.json da "editor.fontSize": 18. Shu loyihani ochsangiz, shrift qancha bo'ladi? Boshqa loyihada-chi?

4. Foydali sozlamalar

4.1 Boshlovchi uchun to'plam

Yana bir nechtasi:

files.eol — qator oxiri darsidagi CRLF va LF masalasi. Veb-loyihalarda odatda LF tanlanadi.

4.2 formatOnSave qanday ishlaydi

Formatlash — kodni "tekislash": chekinishlarni to'g'rilash, ortiqcha bo'sh joylarni olib tashlash, qavslar atrofiga bo'sh joy qo'yish. Ma'nosi o'zgarmaydi, faqat ko'rinishi tartibga keladi. Qo'lda formatlash yorlig'i: Shift + Alt + F (macOS'da Shift + Option + F).

"editor.formatOnSave": true bo'lsa, har Ctrl + S da shu ish o'zi bajariladi.

Formatlashni formatlagich (formatter) degan dastur bajaradi. VS Code'ning ichida JavaScript, JSON, HTML va CSS uchun formatlagich bor. Markdown uchun yo'q — .md faylda formatOnSave hech narsa qilmaydi. Mashhur tashqi formatlagich — Prettier, uni keyingi darsda o'rnatamiz.

4.3 autoSave qiymatlari

Diqqat: "afterDelay" tanlansa, formatOnSave faqat Ctrl + S ni o'zingiz bosganingizda ishlaydi. VS Code yozayotgan paytingizda kodni tekislab, kursorni "sakratib" yubormaslik uchun shunday qiladi. Avtomatik saqlashda ham formatlansin desangiz — "onFocusChange" tanlang.

Tekshirib ko'ring: Malika README.md faylida formatOnSave yoqdi, lekin saqlaganda hech narsa o'zgarmayapti. Nega?

5. keybindings.json: o'z yorliqlaringiz

5.1 Yorliqlar oynasi

Ctrl + K, keyin Ctrl + S (macOS'da Cmd + K, Cmd + S) — Keyboard Shortcuts oynasi. Bu yerda VS Code'ning barcha buyruqlari va ularning yorliqlari bor. Buyruqni qidirib, ustiga ikki marta bosasiz, yangi tugmalar birikmasini bosasiz, Enter — tayyor.

Yorliqlar ham faylda saqlanadi — keybindings.json. Buyrug'i:

Preferences: Open Keyboard Shortcuts (JSON)

5.2 Yorliq qo'shish

VS Code'da tanlangan matnni katta harfga o'tkazadigan buyruq bor, lekin yorlig'i yo'q. Unga yorliq beramiz:

[
  {
    "key": "ctrl+alt+u",
    "command": "editor.action.transformToUppercase",
    "when": "editorTextFocus"
  }
]

• Fayl [ bilan boshlanadi — bu massiv, har yorliq uning bitta elementi.
• "key" — qaysi tugmalar. Kichik harf bilan, + orqali.
• "command" — qaysi buyruq. Nomini Keyboard Shortcuts oynasida buyruq ustida o'ng tugma → "Copy Command ID" bilan olasiz.
• "when" — qachon ishlasin. editorTextFocus — "kursor matn maydonida turganda".

Diqqat: Band yorliqni tanlab qo'ymang. Masalan, Ctrl + Shift + T VS Code'da "yopilgan faylni qayta ochish". Uni boshqa buyruqqa bersangiz, eski vazifa ishlamay qoladi. Tekshirish: Keyboard Shortcuts oynasida yorliq ustida o'ng tugma → "Show Same Keybindings".

Tekshirib ko'ring: keybindings.json nega { bilan emas, [ bilan boshlanadi?

6. Profillar

6.1 Profil nima

Ali kunduzi veb-sayt yozadi, kechqurun Python o'rganadi. Ikki ish uchun kerakli kengaytmalar va sozlamalar har xil. Hammasini bitta VS Code'ga to'plasa — dastur sekinlashadi va chalkashadi.

Profil (profile) — sozlamalar, kengaytmalar, yorliqlar va snippetlarning alohida to'plami. Snippet — qisqa so'zdan butun matnga kengayadigan shablon, uni ikki darsdan keyin o'rganamiz. Profilni almashtirsangiz, VS Code boshqa "kiyim" kiyadi. Xuddi telefondagi bir nechta foydalanuvchi hisobiga o'xshaydi: har birida o'z ilovalari va fon rasmi.

Doimo bitta Default profil bor — hozirgacha ishlagan sozlamalaringiz shunda.

6.2 Profil yaratish

1. Chap pastdagi tishli g'ildirak () → Profiles → New Profile...
2. Nom bering: masalan, Frontend.
3. Nimani noldan boshlash, nimani Default'dan olishni tanlang. Tayyor shablonlar ham bor (masalan, Python, Node.js).
4. Create bosing.

Profil papkaga "yopishadi": Frontend profilida loyihani ochsangiz, keyingi safar u shu profilda ochiladi. Terminaldan ham tanlash mumkin:

code --profile "Frontend" .

Profilni faylga eksport qilib, hamkasbingizga yuborish ham mumkin (Profiles oynasida "Export...").

Tekshirib ko'ring: Yangi profil yaratdingiz, lekin undagi mavzu va kengaytmalar oldingidek emas. Sozlamalaringiz o'chib ketdimi?

7. Settings Sync: bulutga zaxira

Settings Sync (sozlamalarni sinxronlash) — shaxsiy sozlamalar, yorliqlar, snippetlar, kengaytmalar ro'yxati va profillarni bulutda saqlash. Boshqa kompyuterda VS Code'ga shu hisob bilan kirsangiz, hammasi o'zi tushadi.

Yoqish:

1. Chap pastdagi hisob belgisi (odam surati) yoki → Backup and Sync Settings...
2. Nimalar sinxronlanishini belgilang.
3. GitHub yoki Microsoft hisobi bilan kiring.

Loyihaning .vscode/settings.json fayli Settings Sync'ga kirmaydi. U loyiha bilan birga yuradi — hamkasblaringizga ham, boshqa kompyuterga ham loyiha papkasi orqali boradi.

Maslahat: Hozircha GitHub hisobingiz bo'lmasa, Microsoft hisobi yetadi. GitHub'ni 07-qismda (Git va GitHub) ochamiz.

8. .editorconfig: hamma muharrirlar uchun bitta qoida

Jamoada hamma ham VS Code ishlatmaydi: kimdir WebStorm, kimdir Vim. .vscode/settings.json ni faqat VS Code o'qiydi. Qolganlar uchun umumiy fayl bor — .editorconfig. U loyiha ildizida turadi va eng asosiy qoidalarni har qanday muharrirga aytadi.

Format INI darsidagi INI'ga o'xshaydi:

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

• root = true — "yuqoridagi papkalardan boshqa .editorconfig qidirma".
• [*] — barcha fayllar uchun. [*.md] — faqat Markdown uchun.
• indent_style = space, indent_size = 2 — chekinish 2 ta bo'sh joy.
• end_of_line = lf — qator oxiri LF.

Markdown uchun trim_trailing_whitespace = false bejiz emas: Markdown'da qator oxiridagi ikkita bo'sh joy "shu yerda yangi qator" degani.

Diqqat: VS Code .editorconfig ni o'zi o'qimaydi. Buning uchun EditorConfig for VS Code kengaytmasi kerak (ID: EditorConfig.EditorConfig). .editorconfig faylini ochsangiz, VS Code uni o'zi taklif qiladi. WebStorm esa bu faylni kengaytmasiz tushunadi.

9. Ko'p uchraydigan xatolar

9.1 settings.json buzilgan

Belgisi: sozlamalar oynasida biror narsani o'zgartirsangiz, xabar chiqadi: Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again. Tarjima: "Foydalanuvchi sozlamalariga yozib bo'lmadi. Sozlamalar faylini ochib, undagi xato va ogohlantirishlarni tuzating." Sabab: faylni qo'lda tahrirlaganda JSON buzilgan. Ko'pincha ikki qator orasida vergul tushib qolgan yoki qo'shtirnoq yopilmagan. Tuzatish: Preferences: Open User Settings (JSON) ni oching. Qizil to'lqinli chiziq turgan joyga qarang. Ctrl + Shift + M — Problems paneli xatoni qator raqami bilan ko'rsatadi.

9.2 tabSize o'zgarmayapti

Belgisi: "editor.tabSize": 4 yozdingiz, lekin eski faylda Tab hali ham 2 ta bo'sh joy qo'yadi. Sabab: editor.detectIndentation asl holatda true. VS Code faylning mavjud chekinishini "o'qib", unga moslashadi. Tuzatish: pastki holat satrida Spaces: 2 yozuvini bosing va o'lchamni qo'lda tanlang. Yoki "editor.detectIndentation": false qo'shing. Yangi fayllarda tabSize darhol ishlaydi.

9.3 formatOnSave ishlamayapti

Belgisi: saqlaganda kod tekislanmaydi. Ba'zan pastda xabar chiqadi: There is no formatter for 'markdown' files installed. yoki There are multiple formatters for 'JavaScript' files. One of them should be configured as default formatter. Tarjima: "Markdown fayllari uchun formatlagich o'rnatilmagan" / "JavaScript uchun bir nechta formatlagich bor, bittasini asosiy qilib tanlang." Tuzatish: birinchi holatda — formatlagich kengaytmasini o'rnating. Ikkinchi holatda — xabardagi "Configure..." tugmasini bosib, bittasini tanlang. Bu editor.defaultFormatter sozlamasiga yoziladi (keyingi darsda).

9.4 Sozlama noto'g'ri darajaga yozilgan

Belgisi: bitta loyiha uchun qilgan o'zgarishingiz hamma loyihada ko'rinyapti. Yoki aksincha — hamkasbingizda ishlamayapti. Sabab: sozlamalar oynasida User yorlig'i tanlangan edi (yoki aksincha). Tuzatish: jamoa qoidalari (chekinish, formatlash) — Workspace'ga. Shaxsiy did (mavzu, shrift) — User'ga.

10. Mashqlar

1-mashq (oson): Oyna va fayl

1. Ctrl + , bilan sozlamalar oynasini oching.
2. word wrap ni qidirib, qiymatini on qiling.
3. Preferences: Open User Settings (JSON) ni oching.

Faylda qaysi qator paydo bo'ldi?

{
  "editor.wordWrap": "on"
}

2-mashq (o'rta): Loyiha qoidasi

mashq-sozlama papkasini yarating va code . bilan oching (VS Code tanishuv darsidan). Loyiha uchun shunday qoida yozing: chekinish 4 ta bo'sh joy, saqlaganda formatlash yoqilgan. User sozlamalaringizga tegmang.

Qaysi faylga yozasiz? Ichida nima bo'ladi?

{
  "editor.tabSize": 4,
  "editor.formatOnSave": true
}

3-mashq (o'rta): Kim yutadi?

User settings.json:

{
  "editor.tabSize": 2,
  "editor.fontSize": 14
}

Loyihaning .vscode/settings.json:

{
  "editor.tabSize": 4,
  "[markdown]": {
    "editor.tabSize": 3
  }
}

Shu loyihada app.js va README.md ochildi. Har birida tabSize va fontSize qancha?

4-mashq (qiyin): Profil va yorliq

1. Yozuv nomli yangi profil yarating ( → Profiles → New Profile...).
2. Unda editor.fontSize ni 18, editor.wordWrap ni "on" qiling.
3. Shu profilning keybindings.json iga Ctrl + Alt + U → katta harfga o'tkazish yorlig'ini qo'shing.
4. Default profilga qayting. Yorliq ishlaydimi?

[
  {
    "key": "ctrl+alt+u",
    "command": "editor.action.transformToUppercase",
    "when": "editorTextFocus"
  }
]

11. Real ishda

• Deyarli har bir jamoa loyihasida .vscode/settings.json va .editorconfig bor. Ishga kirgan kuningiz loyihani ochasiz — qoidalar o'zi ishlay boshlaydi.
• .vscode/ papkasi odatda Git'ga qo'shiladi, lekin faqat jamoaga tegishli fayllari. Git'ni 07-qismda o'rganamiz — hozir "loyiha bilan birga saqlanadigan papka" deb bilsangiz yetadi.
• Formatlash qoidalari bahsi. "2 yoki 4 bo'sh joy?" degan bahs jamoalarda eskidan bor. Yechim — qoidani faylga yozib qo'yish va shaxsiy didni bahs mavzusidan chiqarish.
• Profillar o'qituvchilar va konferensiyada ekran ko'rsatadiganlar uchun ham qulay: katta shriftli "Taqdimot" profili.
• Intervyuda "VS Code'ni qanday sozlagansiz?" degan savol ish muhitingizni qanchalik tushunishingizni ko'rsatadi.

Xulosa

• Har bir sozlama settings.json da kalit-qiymat sifatida saqlanadi; Ctrl + , — uning oynasi.
• Daraja: Default → User → Workspace (.vscode/settings.json) → til sozlamasi. Aniqrog'i yutadi.
• Foydali kalitlar: editor.formatOnSave, files.autoSave, editor.tabSize, files.eol.
• keybindings.json — o'z yorliqlaringiz; band yorliqni tekshiring.
• Profil — alohida to'plam; Settings Sync — shaxsiy sozlamalarning bulutdagi zaxirasi.
• .editorconfig — har qanday muharrir uchun umumiy qoida (VS Code'da kengaytma kerak).

Keyingi dars: Kengaytmalar: tanlash va xavfsizlik — VS Code'ga Prettier va boshqa vositalarni qo'shasiz va soxta kengaytmani qanday tanishni o'rganasiz.

Manbalar

• VS Code: User and Workspace Settings
• VS Code: Profiles
• VS Code: Settings Sync
• EditorConfig