Config fayllar: vercel.json, netlify.toml, dependabot.yml, renovate.json va JSON/YAML/TOML formatlari

Qisqacha: Hosting platformalari (Vercel, Netlify), repo avtomatikasi (Dependabot, Renovate) va kutubxonalar (shadcn, Turborepo) loyiha ildiziga o'z config faylini qo'shadi. Ular to'rt formatdan birida yoziladi: JSON, JSONC (izohli JSON), YAML yoki TOML. Har formatning o'z tuzog'i bor: JSON'da izoh va oxirgi vergul taqiq, YAML'da tab taqiq, TOML'da satr qo'shtirnoqsiz bo'lmaydi. Faylning boshidagi $schema esa muharrirga avtomatik to'ldirish va xato ko'rsatishni beradi.

Bu darsda

• JSON, JSONC, YAML, TOML va .js/.ts config fayllarni tanib, har birining qoidalarini bilasiz.
• vercel.json, netlify.toml va _redirects ni o'qiysiz: build, sarlavhalar (headers), SPA uchun rewrites.
• dependabot.yml va renovate.json — bog'liqliklarni avtomatik yangilash sozlamalarini o'qiysiz.
• $schema va JSON Schema bilan config faylni tekshirasiz.
• components.json, turbo.json kabi kutubxona fayllarini taniysiz.

Oldin bilishingiz kerak: YAML, TOML, INI va .env, Loyiha ildizidagi fayllar, GitHub Pages'ga avtomatik deploy.

1. Nega bu kerak?

Jasur aka bir kuni so'radi: "vazifalar ni Vercel'ga ham qo'yib ko'rsak-chi?" Sardor internetdagi qo'llanmani ochdi: "ildizga vercel.json qo'shing". Boshqa qo'llanma — Netlify uchun netlify.toml. Uchinchisi — "Dependabot'ni yoqing: .github/dependabot.yml".

Har platforma va har kutubxona — o'z fayli, o'z formati, o'z kalitlari. Ularning hammasini yod olish shart emas va mumkin ham emas. Kerakli ko'nikma boshqa: notanish config faylni ko'rganda uni o'qiy olish, formatini tanish va xatosiz tahrirlash. Bu darsda shuni o'rganamiz. Hammasi «Bahor» ning tasavvurdagi deploy'i misolida.

O'xshatish: turli mamlakat hujjatlari — pasport, viza, bojxona deklaratsiyasi. Har biri o'z shaklida, lekin "ism, sana, imzo" tamoyili bir xil. Config fayllar ham: format — shakl, kalitlar — maydonlar, $schema — to'ldirish namunasi.

2. To'rt format va kod-config

2.1 Qisqa xarita

YAML, TOML, INI va .env darsida formatlar bilan tanishgansiz. Endi ular frontend loyihasida qayerda uchrashini ko'ramiz:

Beshinchi tur — kod-config: vite.config.ts, eslint.config.js, commitlint.config.js. Bu oddiy JavaScript/TypeScript modul: export default bilan obyekt qaytaradi.

2.2 Ma'lumot yoki kod?

Nega ba'zi config — JSON, ba'zisi — .js? Kod-config shart va funksiya yoza oladi. vazifalar ning vite.config.ts i bunga misol: ({ mode }) => … — rejimga qarab boshqa qiymat, .env yo'q bo'lsa throw (Vite III). JSON buni qila olmaydi.

Lekin kodning narxi bor: uni o'qish uchun ishga tushirish kerak. Boshqa dastur (masalan, Dependabot serveri) sizning .js faylingizni bajarmaydi. Shuning uchun platformalar odatda ma'lumot formatini (JSON, YAML, TOML) tanlaydi.

Kod-config kengaytmasi ham ma'noli (package.json pasporti dagi "type" qoidasi):

Next shablonidagi eslint.config.mjs — .mjs, chunki Next loyihasi "type": "module" siz yaratiladi (ESLint II dagi shablon).

2.3 Har formatning xatosi

Kichik tekshiruv dasturi yozdik: u faylni formatiga qarab o'qiydi (JSON — Node'ning o'zi, YAML — yaml 2.9.1, TOML — smol-toml 1.9.1). Atayin buzilgan fayllar bilan haqiqiy xabarlar.

JSON ichida izoh (renovate.json ga // izoh yozdik):

SyntaxError: Expected property name or '}' in JSON at position 4 (line 2 column 3)

"Xususiyat nomi yoki } kutilgan edi". JSON // ni bilmaydi — u uchun bu tushunarsiz belgi. Oxirgi vergul ("extends": [...], dan keyin }):

SyntaxError: Expected double-quoted property name in JSON at position 39 (line 3 column 1)

"Qo'shtirnoqli xususiyat nomi kutilgan edi" — vergul "yana bir maydon bor" degan va'da, } esa uni buzdi. Ikkalasi ham tsconfig.json da mumkin edi — chunki u JSONC. Shu sababli bir xil .json kengaytmali ikki fayl turlicha qoidaga bo'ysunadi.

YAML'da tab bilan chekinish:

YAMLParseError: Tabs are not allowed as indentation at line 3, column 1:

updates:
	- package-ecosystem: "npm"
^

"Chekinishda tab ishlatib bo'lmaydi". YAML faqat bo'sh joyni tan oladi. Muharrir tab'ni bo'sh joyga aylantirmasa, xato shu yerda.

TOML'da qo'shtirnoqsiz satr:

TomlError: Invalid TOML document: invalid value

1:  [build]
2:    command = npm run build
                ^

"Yaroqsiz qiymat". TOML'da satr doim qo'shtirnoqda: command = "npm run build". Son (status = 200) va true/false esa qo'shtirnoqsiz.

Tekshirib ko'ring: .vscode/settings.json da izoh bor va VS Code uni yaxshi o'qiydi. Sardor xuddi shunday izohni package.json ga yozdi. Nima bo'ladi?

3. Hosting platformalari

3.1 GitHub Pages: config fayl yo'q

vazifalar GitHub Pages da turadi va deploy'i pages.yml workflow'ida. Pages'ning o'z config fayli yo'q: sarlavhalar (HTTP headers) va yo'naltirishlarni sozlab bo'lmaydi. Shuning uchun vazifalar dagi Content-Security-Policy index.html ning <meta http-equiv> tegida (XSS va CSP darsi) va Cache-Control — Pages sukuti (max-age=600).

Vercel va Netlify esa bunga ruxsat beradi — config fayl orqali. Ularning ishi ikki bosqichli: avval loyihani yig'ish (build), keyin har so'rovga javob berish. Config fayl ikkalasini ham boshqaradi:

flowchart LR
  P["git push"] --> C["platforma<br/>config'ni o'qiydi"]
  C --> B["buildCommand<br/>npm run build"]
  B --> D["dist/"]
  U["brauzer<br/>so'rovi"] --> R["headers,<br/>rewrites"]
  D --> R
  R --> J["javob"]

Chap qism — bir marta, har push'da. O'ng qism — har bir tashrifchi uchun, millionlab marta. Shuning uchun headers dagi bitta xato (masalan, noto'g'ri kesh) hamma foydalanuvchiga ta'sir qiladi.

3.2 vercel.json

Vite'da yig'iladigan bir sahifali ilova (SPA) uchun:

{
  "$schema": "https://openapi.vercel.sh/vercel.json",
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "headers": [
    {
      "source": "/assets/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ],
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

/assets/(.*) uchun immutable — Code splitting va hash darsidagi g'oya: hash'li fayl nomi tarkib o'zgarsa o'zgaradi, demak, uni bir yilga keshlash xavfsiz. Pages'da buni qilib bo'lmaydi.

rewrites dagi /(.*) → /index.html — SPA fallback: /vazifa/42 kabi har qanday manzilga index.html qaytariladi, marshrutni brauzerdagi JavaScript hal qiladi (History API va SPA router). Usiz sahifani yangilaganda 404 chiqadi.

3.3 netlify.toml va _redirects

Xuddi shu sozlama Netlify'da — TOML'da:

# netlify.toml — build va sayt qoidalari
[build]
  command = "npm run build"
  publish = "dist"

[[headers]]
  for = "/assets/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

TOML o'qish qoidalari:

• [build] — jadval (bo'lim): ostidagi kalitlar build ga tegishli.
• [[headers]] — jadvallar massivi: har [[headers]] ro'yxatga yangi element qo'shadi.
• status = 200 — "yo'naltirma emas, qayta yozish": manzil o'zgarmaydi. 301 bo'lsa — haqiqiy yo'naltirish.

Netlify'ning yana bir eski, ammo keng tarqalgan usuli — dist/ ga tushadigan _redirects fayli, bir qator:

/*  /index.html  200

public/ papkasiga qo'yiladi — Vite uni dist/ ga o'zgarishsiz ko'chiradi (Vite IV: public).

netlify.toml uchun SchemaStore'da JSON sxema yo'q (2026-10-10 holatiga) — shuning uchun biz faqat TOML sintaksisini tekshirdik: build, headers, redirects kalitlari to'g'ri o'qildi.

Tekshirib ko'ring: Nega rewrites da /assets/ uchun alohida qoida kerak emas — /(.*) uni ham index.html ga aylantirmaydimi?

4. Repo avtomatikasi: Dependabot va Renovate

4.1 dependabot.yml

Bog'liqliklarni yangilash darsida avtomatik PR'lar haqida gaplashgansiz. Dependabot — GitHub'ning o'ziga qurilgan bot: paketlarning yangi versiyasi chiqsa, o'zi PR ochadi. Sozlamasi .github/dependabot.yml:

# Dependabot: haftada bir npm paketlarini tekshirib, PR ochadi
version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"
    groups:
      eslint:
        patterns: ["eslint", "@eslint/*", "typescript-eslint"]

YAML'dagi - — ro'yxat elementi. updates — ro'yxat: bitta faylda npm va GitHub Actions'ni ham alohida kuzatish mumkin.

4.2 renovate.json

Renovate — xuddi shu ishni qiladigan mustaqil bot, sozlamasi boyroq:

{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["config:recommended"],
  "minimumReleaseAge": "7 days",
  "schedule": ["before 6am on monday"]
}

extends — tayyor to'plam (ESLint'dagi kabi). minimumReleaseAge: "7 days" — yangi versiya 7 kun "yetilmaguncha" PR ochma. Ta'minot zanjiri darsidagi min-release-age g'oyasining aynan o'zi: zararli versiyalar odatda bir-ikki kunda topilib, o'chiriladi. O'sha darsdagi savdolashuv ham shu yerda: xavfsizlik tuzatishi ham 7 kun kechikadi.

schedule — inglizcha "tabiiy til": "dushanba soat 6 dan oldin".

5. $schema — muharrirdagi yordamchi

5.1 Nima beradi

Config fayllarning ko'pchiligi birinchi qatorda $schema ga havola beradi. Bu — JSON Schema: faylda qaysi kalitlar bo'lishi mumkin, qiymat turi va ruxsat etilgan qiymatlar tavsifi. VS Code uni o'qiydi va:

• kalit yozayotganda ro'yxatdan taklif qiladi;
• noto'g'ri kalit yoki qiymatni qizil to'lqin chiziq bilan belgilaydi;
• sichqonchani kalit ustiga olib borsangiz — tavsifni ko'rsatadi.

$schema bo'lmasa ham, VS Code ko'p fayllarni nomidan taniydi (package.json, tsconfig.json, .github/workflows/*.yml) — ularning sxemasi SchemaStore katalogidan avtomatik olinadi.

5.2 Sxema bilan tekshirish

Sxemani dastur bilan ham tekshirsa bo'ladi. ajv 8.20.0 — JavaScript'dagi eng keng tarqalgan JSON Schema tekshiruvchisi. Biz yozgan fayllarni rasmiy sxemalarga soldik: vercel.json, dependabot.yml, renovate.json, turbo.json, components.json — hammasi sxemaga mos. Endi xatolar. vercel.json da destination o'rniga destnation (bitta harf):

xato/vercel.json: /rewrites/0 must have required property 'destination'
xato/vercel.json: /rewrites/0 must NOT have additional properties

"/rewrites/0 da majburiy destination yo'q" va "ortiqcha xususiyat bor". JSON'ning o'zi to'g'ri — sintaksis xatosi emas. Lekin Vercel uni tushunmasdi. /rewrites/0 — xato joyi: rewrites massivining 0-elementi.

dependabot.yml da interval: "haftalik":

xato/dependabot.yml: /updates/0/schedule/interval must be equal to one of the allowed values

"Ruxsat etilgan qiymatlardan biri bo'lishi kerak". Kalit qiymatlari inglizcha — bu tarjima qilinmaydi.

Diqqat: Sxema faqat shaklni tekshiradi. "outputDirectory": "dits" (xato yozilgan papka) sxemaga mos — u shunchaki satr. Deploy esa "papka topilmadi" bilan yiqiladi. Sxema — birinchi himoya, oxirgisi emas.

6. Kutubxonalarning config fayllari

6.1 components.json — shadcn/ui

shadcn/ui — React uchun tayyor komponentlar to'plami (17-qismdan keyin uchratasiz). U komponentni npm paket sifatida emas, kodingizga nusxalab qo'yadi. Qayerga va qanday — components.json aytadi:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/index.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  },
  "iconLibrary": "lucide"
}

aliases ga qarang — Path alias darsidagi @/. shadcn o'zi yaratgan fayllarda shu importlarni yozadi, shuning uchun tsconfig va Vite'da @/ sozlangan bo'lishi shart. tailwind bo'limi — Tailwind CSS (Tailwind darsi) bilan bog'lanish.

6.2 turbo.json — monorepo

Turborepo (2.11.7) — bir repoda bir nechta paket (monorepo) bo'lganda vazifalarni to'g'ri tartibda va keshlab bajaradi:

{
  "$schema": "https://turborepo.com/schema.json",
  "tasks": {
    "build": { "dependsOn": ["^build"], "outputs": ["dist/**"] },
    "lint": {}
  }
}

"dependsOn": ["^build"] — "bu paketni build qilishdan oldin, u bog'liq paketlarni build qil" (^ — "bog'liqliklarim"). outputs — natija keshlanadigan papka. Monorepo — keyingi qismlarda.

6.3 Allaqachon tanish ikkitasi

• manifest.webmanifest (boshqa loyihalarda ko'pincha site.webmanifest) — PWA pasporti: nom, ikonlar, ranglar. vazifalar da 13-qismdan beri public/ da. JSON formatida, $schema siz.
• knip.json — ishlatilmagan kodni topuvchi knip'ning sozlamasi. vazifalar da u kerak bo'lmaydi — knip darsida ko'ramiz, nega.

7. Ko'p uchraydigan xatolar

8. Mashqlar

Mashq papkasi: kurs/mashqlar/16/45-config-fayllar/. npm i -D -E yaml@2.9.1 smol-toml@1.9.1 ajv@8.20.0 ajv-formats@3.0.1 va tekshiruv dasturi tekshir.mjs:

// tekshir.mjs — config faylni o'qiydi (JSON/YAML/TOML)
// va sxemaga solishtiradi
// Ishlatish: node tekshir.mjs <fayl> [sxema.json]
import { readFileSync } from "node:fs";
import { parse as parseYaml } from "yaml";
import { parse as parseToml } from "smol-toml";
import Ajv from "ajv";
import addFormats from "ajv-formats";

const [file, schemaFile] = process.argv.slice(2);
const text = readFileSync(file, "utf8");
const data = file.endsWith(".toml")
  ? parseToml(text)
  : /\.ya?ml$/.test(file)
    ? parseYaml(text)
    : JSON.parse(text);
if (!schemaFile) {
  const keys = Object.keys(data).join(", ");
  console.log(`${file}: o'qildi, kalitlar — ${keys}`);
} else {
  const schema = JSON.parse(readFileSync(schemaFile, "utf8"));
  const ajv = new Ajv({
    strict: false,
    allErrors: true,
    validateSchema: false,
  });
  addFormats(ajv);
  const validate = ajv.compile(schema);
  if (validate(data)) {
    console.log(`${file}: sxemaga mos`);
  } else {
    for (const e of validate.errors.slice(0, 3)) {
      console.log(`${file}: ${e.instancePath || "/"} ${e.message}`);
    }
    process.exitCode = 1;
  }
}

Sxemani yuklab olish: curl -sSL -o sxema/vercel.json https://openapi.vercel.sh/vercel.json (qolganlari — fayllarning $schema manzilidan). validateSchema: false kerak: Vercel sxemasi o'zini eski standart deb e'lon qiladi, lekin yangiroq kalitlar ishlatadi va ajv buni xato deydi.

1-mashq (oson): formatni toping

Har fayl qaysi formatda va izoh yozish mumkinmi?

• netlify.toml —
• .github/dependabot.yml —
• tsconfig.json —
• renovate.json —

2-mashq (o'rta): uchta xatoni tuzating

Quyidagi fayllarda bittadan xato bor. Avval ko'z bilan toping, keyin node tekshir.mjs bilan tasdiqlang.

netlify.toml:

[build]
  command = npm run build
  publish = "dist"

dependabot.yml (ikkinchi qatordagi chekinish — tab):

version: 2
updates:
	- package-ecosystem: "npm"

renovate.json:

{
  "extends": ["config:recommended"],
}

3-mashq (o'rta): Vercel uchun sozlama

«Bahor» menyusi Vite + SPA, natija dist/. vercel.json yozing: build buyrug'i, chiqish papkasi, /assets/ ga bir yillik immutable kesh va SPA fallback. Sxema bilan tekshiring. Keyin destination ni xato yozib, xabarni o'qing.

xato/vercel.json: /rewrites/0 must have required property 'destination'
xato/vercel.json: /rewrites/0 must NOT have additional properties

4-mashq (qiyin): Dependabot — ikki ekotizim

vazifalar uchun .github/dependabot.yml yozing: npm paketlari har hafta (ESLint oilasi bitta guruhda), GitHub Actions (pages.yml dagi actions/checkout@v7 kabilar) har oy. Sxema bilan tekshiring. Yordam: updates — ro'yxat, ikkinchi element uchun package-ecosystem: "github-actions".

# Dependabot: npm — haftada, GitHub Actions — oyda bir PR
version: 2
updates:
  - package-ecosystem: "npm"
    directory: "/"
    schedule:
      interval: "weekly"
    groups:
      eslint:
        patterns: ["eslint", "@eslint/*", "typescript-eslint"]
  - package-ecosystem: "github-actions"
    directory: "/"
    schedule:
      interval: "monthly"

9. Real ishda

• Deploy muammolarining katta qismi — config faylda: noto'g'ri outputDirectory, unutilgan SPA fallback (yangilaganda 404), noto'g'ri kesh sarlavhasi.
• Dependabot/Renovate PR'lari — ochiq loyihalarda har hafta keladi. Ularni ko'rib birlashtirish — kichik, lekin muntazam ish.
• Notanish config — avval $schema yoki hujjat, keyin tahrir. Muharrirdagi qizil chiziq — tekin yordam.
• Intervyu: "JSON va JSONC farqi?", "SPA fallback nima?", "Dependabot va Renovate nima qiladi?".

Xulosa

• Formatlar: JSON (izohsiz, oxirgi vergulsiz), JSONC (tsconfig), YAML (tab yo'q, - ro'yxat), TOML ([jadval], [[massiv]], satr qo'shtirnoqda); kod-config — .js/.mjs/.cjs/.ts.
• Hosting: vercel.json / netlify.toml / _redirects — build, sarlavhalar, SPA fallback; GitHub Pages'da config yo'q (CSP — <meta> da).
• Avtomatika: dependabot.yml (GitHub'da tayyor), renovate.json (minimumReleaseAge — ta'minot zanjiri dagi g'oya).
• $schema — muharrirda avtomatik to'ldirish va xato; ajv bilan dasturda tekshirish; sxema faqat shaklni tekshiradi.
• Kutubxonalar: components.json (shadcn, @/ aliaslar), turbo.json (monorepo vazifalari).

Keyingi dars: Begona repoda orientatsiya — haqiqiy ochiq kodli loyihani ochib, 15 daqiqada uning stack'i, skriptlari va qoidalarini ildiz fayllaridan aniqlaymiz.

Manbalar

• Vercel: vercel.json — Project Configuration
• Netlify: File-based configuration, Redirects and rewrites
• GitHub: Dependabot options reference
• Renovate: Configuration options, minimumReleaseAge
• JSON Schema, SchemaStore, Ajv
• TOML v1.0.0, YAML 1.2