IlmHamroh
JavaScript Full-stack/4-qism. HTML6/86-dars12 daqiqa
Mundarija (25)

HTML formatlash va validatsiya: Prettier, W3C validator va linterlar

Qisqacha: Brauzer HTML xatolarini jimgina kechiradi, shuning uchun ular ko'zdan yashirinib qoladi. Formatlovchi (Prettier) kodni tartibli tekislaydi. Validator (W3C Nu HTML Checker) va linterlar (html-validate, HTMLHint) esa yopilmagan teg, qo'shtirnoqsiz atribut yoki alt siz rasm kabi xatolarni qatori bilan ko'rsatadi.

Bu darsda

  • Nega brauzer xato ko'rsatmasligi xavfli ekanini tushuntira olasiz.
  • Kodni VS Code'da va Prettier bilan avtomatik formatlaysiz.
  • Sahifani W3C Nu HTML Checker'da tekshirib, xabarlarini o'qiysiz.
  • Terminalda html-validate va htmlhint ni ishga tushirasiz.
  • Har bir vosita qachon kerakligini ajratasiz.

Oldin bilishingiz kerak: Hujjat skeleti, Kengaytmalar: tanlash va xavfsizlik, npm'ga birinchi qadam.

1. Nega bu kerak?

JavaScript'da xato qilsangiz, konsolda qizil xabar chiqadi. HTML'da esa bunday bo'lmaydi. Teg, element va atribut darsida ko'rdik: brauzer yopilmagan teglarni o'zicha "tuzatadi". Yo'qolgan qo'shtirnoq esa sahifaning yarmini yutib yuboradi — va hech qanday ogohlantirish yo'q.

Bu xuddi imlo xatosi bor xatni do'stingizga yuborishga o'xshaydi. Do'stingiz tushunadi va indamaydi. Lekin rasmiy ariza bilan bunday qilib bo'lmaydi. Google, ekran o'quvchi va boshqa brauzerlar "do'st" emas — ular xatoni boshqacha tushunishi mumkin.

Shuning uchun dasturchilar ikki turdagi yordamchidan foydalanadi:

Vosita turi Nima qiladi Misol
Formatlovchi (formatter) Kodni chiroyli tekislaydi VS Code, Prettier
Validator Standartga mosligini tekshiradi W3C Nu HTML Checker
Linter Xato va yomon odatlarni topadi html-validate, HTMLHint

Xato imlo tekshiruvchisi kabi: Word qizil chiziq bilan ko'rsatadi, siz tuzatasiz. Keling, har birini "Bahor" choyxonasi sahifasida sinab ko'ramiz.

2. Tajriba uchun "buzuq" sahifa

choyxona papkasida sinov.html faylini yarating va aynan shunday yozing — chekinishlar ataylab tartibsiz:

html
<!DOCTYPE html>
<html lang="uz">
<head>
<meta charset="utf-8">
      <title>Choyxona «Bahor»</title>
</head>
    <body>
<h1>Choyxona «Bahor»</h1>
        <p>Har kuni <strong>7:00 dan</strong> 23:00 gacha.</p>
  <p title=Kechki menyu>Kabob</p>
<img src="osh.jpg">
    </body>
</html>

Brauzerda oching. Hammasi deyarli normal ko'rinadi — rasm yuklanmasa ham sahifa ishlaydi. Lekin bu faylda ikkita haqiqiy xato va tartibsiz chekinishlar bor. Ularni ko'z bilan topdingizmi? Endi vositalar topsin.

3. Formatlash: kodni tartibga keltirish

3.1 VS Code'ning o'zida

VS Code'da HTML uchun o'rnatilgan formatlovchi bor. Faylni oching va bosing:

  • Windows: Shift + Alt + F
  • macOS: Shift + Option + F
  • Linux: Ctrl + Shift + I

Yoki buyruqlar oynasida (Ctrl + Shift + P) Format Document ni tanlang. Chekinishlar bir zumda tekislanadi.

3.2 Prettier — jamoalar standarti

Prettier — eng ommabop formatlovchi. U HTML, CSS, JavaScript va boshqa ko'p tillarni bir xil uslubda formatlaydi. Jamoadagi hamma dasturchi kodi bir xil ko'rinishi uchun ko'p loyihalar aynan Prettier ishlatadi.

VS Code'ga qo'shish:

  1. Extensions'da Prettier - Code formatter ni toping. Muallifi — Prettier, identifikatori esbenp.prettier-vscode.
  2. O'rnating.
  3. Sozlamalar JSON fayliga (VS Code sozlamalari darsida ko'rgansiz) qo'shing:
json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

Birinchi qator — "standart formatlovchi Prettier bo'lsin". Ikkinchisi — "har saqlaganda avtomatik formatla". Endi Ctrl + S bosishingiz bilan kod tekislanadi.

3.3 Prettier terminalda

Prettier'ni terminaldan ham ishlatish mumkin. npm darsida ko'rgan npx bilan — o'rnatmasdan:

bash
npx prettier --check sinov.html

--check faylni o'zgartirmaydi, faqat tekshiradi:

text
Checking formatting...
[warn] sinov.html
[warn] Code style issues found in the above file. Run Prettier with --write to fix.

Tarjimasi: "Faylda kod uslubi muammolari bor. Tuzatish uchun Prettier'ni --write bilan ishga tushiring." Tuzatamiz:

bash
npx prettier --write sinov.html

Natija — tartibli kod:

html
<!doctype html>
<html lang="uz">
  <head>
    <meta charset="utf-8" />
    <title>Choyxona «Bahor»</title>
  </head>
  <body>
    <h1>Choyxona «Bahor»</h1>
    <p>Har kuni <strong>7:00 dan</strong> 23:00 gacha.</p>
    <p title="Kechki" menyu>Kabob</p>
    <img src="osh.jpg" />
  </body>
</html>

Uch narsaga e'tibor bering:

  1. Hamma chekinishlar tekislandi.
  2. Prettier o'z uslubini qo'lladi: <!doctype html> kichik harfda, bo'sh elementlar /> bilan. Ikkalasi ham to'g'ri — Teg, element va atribut darsida gaplashgan edik.
  3. Eng muhimi: title=Kechki menyu qatori title="Kechki" menyu ga aylandi. Prettier xatoni tuzatmadi — lekin uni ko'rsatib qo'ydi. Endi aniq ko'rinib turibdi: menyu — alohida atribut.

Diqqat: Formatlovchi xato topuvchi emas. U faqat kodni tekislaydi va ma'noni o'zgartirmaydi. Formatlash chiroyli ko'rinish beradi, lekin to'g'rilikni kafolatlamaydi. Buning uchun validator kerak.

Tekshirib ko'ring: formatOnSave yoqilgan bo'lsa, faylni saqlaganingizda nima bo'ladi?

Javob

VS Code faylni saqlashdan oldin standart formatlovchi (bizda Prettier) bilan tekislaydi. Chekinishlar, qo'shtirnoqlar va bo'sh qatorlar avtomatik tartibga keladi. Kodning ma'nosi esa o'zgarmaydi.

4. W3C Nu HTML Checker — rasmiy validator

Validator sahifani HTML standartiga solishtiradi. Eng rasmiysi — W3C tashkilotining Nu HTML Checkeri: validator.w3.org/nu.

U uch xil usulda tekshiradi:

Usul Qachon kerak
Address — sayt manzili Sayt internetda bo'lsa
File Upload — fayl yuklash Fayl kompyuteringizda bo'lsa
Text Input — kodni joylashtirish Kichik parchani tez tekshirish

sinov.html ning asl (formatlanmagan) nusxasini "Text Input" oynasiga joylashtiring va Check bosing. Validator shunday javob beradi:

text
Error: Attribute “menyu” not allowed on element “p” at this point.
From line 10, column 3; to line 10, column 24
Error: An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
From line 11, column 1; to line 11, column 19
There were errors.

Har bir xabarni o'qiymiz:

  1. "p elementida menyu atributiga bu yerda ruxsat yo'q." Ya'ni validator ham menyu ni alohida atribut deb ko'rdi. Sabab — qo'shtirnoq yo'q. From line 10, column 3 — xato 10-qatorning 3-belgisidan boshlanadi.
  2. "img elementida alt atributi bo'lishi shart." alt — rasm ko'rinmaganda uning o'rniga chiqadigan matn. Ekran o'quvchi ham aynan shuni o'qiydi. Uni Yaxshi alt matn yozish darsida o'rganamiz.

Tuzatilgan qatorlar:

html
<p title="Kechki menyu">Kabob</p>
<img src="osh.jpg" alt="Bir tarelka osh">

Qayta tekshiring — validator yashil rangda "The document validates according to the specified schema(s)." deb yozadi. Ya'ni "hujjat standart qoidalariga mos".

4.1 Error va Warning farqi

  • Error — standart buzilgan. Albatta tuzating.
  • Warning — xato emas, lekin shubhali joy. Masalan, Hujjat skeleti darsida ko'rgan "lang atributini qo'shishni o'ylab ko'ring". Ko'p hollarda uni ham tuzatgan ma'qul.

Maslahat: Validator ro'yxatning boshidagi xatoni birinchi tuzating. Ko'pincha bitta yopilmagan teg keyingi o'nta "xato"ni keltirib chiqaradi. Birinchisini tuzatib, qayta tekshirsangiz, qolganlari o'zi yo'qoladi. Xato xabarini o'qish darsidagi qoida HTML'da ham ishlaydi.

5. html-validate — terminaldagi validator

Veb-validator qulay, lekin har safar kodni ko'chirib o'tkazish kerak. html-validate esa xuddi shu ishni terminalda, bir buyruq bilan qiladi. U Node.js'da ishlaydi.

choyxona papkasida turib yozing (Windows, macOS va Linux'da bir xil):

bash
npx html-validate sinov.html

Birinchi marta npm paketni yuklashga ruxsat so'raydi:

text
Need to install the following packages:
html-validate@11.4.0
Ok to proceed? (y)

y bosing. Versiya raqami siznikida boshqacha bo'lishi mumkin. Natija:

text
C:\Users\Aziz\Documents\choyxona\sinov.html
  10:6  error  Attribute "title" using unquoted value     attr-quotes
  11:2  error  <img> is missing required "alt" attribute  wcag/h37

✖ 2 problems (2 errors, 0 warnings)

Har bir qator to'rt qismdan iborat:

Qism Misol Ma'nosi
Qator:ustun 10:6 10-qator, 6-belgi
Daraja error Xato (yoki warning)
Xabar Attribute "title" using unquoted value "title atributi qo'shtirnoqsiz qiymat ishlatyapti"
Qoida nomi attr-quotes Qaysi qoida buzildi

Qoida nomini qidiruvga yozsangiz, html-validate.org saytida uning to'liq tushuntirishi chiqadi. wcag/h37 — accessibility qoidalari to'plamidan (alt haqida).

Xato bo'lmasa, html-validate hech narsa yozmaydi. Exit code darsida ko'rgan qoida bu yerda ham ishlaydi: xato bo'lsa — kod 1, bo'lmasa — 0. Shuning uchun uni avtomatik tekshiruvlarga ulash oson.

5.1 Qo'shimcha qoidalarni yoqish

html-validate'ni loyiha papkasidagi .htmlvalidate.json fayli bilan sozlash mumkin:

json
{
  "extends": ["html-validate:recommended"],
  "rules": {
    "heading-level": "error"
  }
}

extends — "tavsiya etilgan qoidalar to'plamidan boshla". rules — qo'shimcha qoidalar. heading-level sarlavhalar tartibini tekshiradi. Uni keyingi darsda sinab ko'ramiz.

Tekshirib ko'ring: html-validate 4:12 error ... close-order deb yozdi. Xatoni qayerdan qidirasiz?

Javob

4-qatorning 12-belgisidan. close-order qoidasi nomidan taxmin qilish mumkin: teglar yopilish tartibi buzilgan. Masalan, p strong dan oldin yopilgan. Qoida nomini html-validate.org'da qidirsangiz, to'liq tushuntirish va misol topasiz.

6. HTMLHint — yana bir linter

HTMLHint — html-validate'ga o'xshash, lekin boshqa qoidalar to'plamiga ega linter:

bash
npx htmlhint sinov.html
text
L10 |  <p title=Kechki menyu>Kabob</p>
          ^ The value of attribute [ title ] must be in double quotes. (attr-value-double-quotes)

Scanned 1 files, found 1 errors in 1 files

Tarjimasi: "title atributining qiymati qo'shtirnoq ichida bo'lishi kerak." HTMLHint alt siz rasmni ko'rsatmadi — uning standart qoidalari boshqacha. Shuning uchun bitta vositaga to'liq ishonmang.

HTMLHint'ning VS Code kengaytmasi ham bor (HTMLHint). U xatolarni yozish paytidayoq to'lqinli chiziq bilan ko'rsatadi — xuddi Word'dagi imlo tekshiruvi kabi.

7. DevTools ham ogohlantiradi

Chrome DevTools'da Console panelidan tashqari Issues paneli bor. Brauzer sahifada muammo sezsa, u yerda ko'rsatadi. Masalan, formadagi maydon nomi bo'lmasa: "A form field element should have an id or name attribute" — "Forma maydonida id yoki name atributi bo'lishi kerak."

Lekin DevTools hamma HTML xatolarini ko'rsatmaydi — yopilmagan teg yoki qo'shtirnoqsiz atribut haqida jim turadi. Shuning uchun asosiy tekshiruv — validator va linter.

8. Ish tartibi: qaysi vosita qachon

Qachon Nima qilasiz Vosita
Har saqlashda Avtomatik formatlash Prettier (formatOnSave)
Yozish paytida Xatoni darhol ko'rish HTMLHint kengaytmasi
Sahifa tayyor bo'lganda To'liq tekshiruv npx html-validate yoki Nu Checker
Internetga chiqarishdan oldin Yakuniy tekshiruv Nu Checker (Address usuli)

Bu qismdagi har bir mashqdan keyin sahifangizni npx html-validate bilan tekshirishni odat qiling. Bir oydan keyin xatolarni vositadan oldin o'zingiz ko'ra boshlaysiz.

9. Ko'p uchraydigan xatolar

9.1 PowerShell'da npx ishlamayapti

text
npx : File C:\Program Files\nodejs\npx.ps1 cannot be loaded because running scripts is disabled on this system.

Tarjimasi: "npx.ps1 faylini yuklab bo'lmaydi, chunki bu tizimda skriptlarni ishga tushirish o'chirilgan." Bu Windows PowerShell'ning xavfsizlik sozlamasi. PowerShell asoslari darsida uning sababini ko'rgansiz.

Tuzatish: npx o'rniga npx.cmd yozing: npx.cmd html-validate sinov.html. Yoki Git Bash'da ishlang — u yerda bu muammo yo'q.

9.2 Prettier faylni formatlamayapti

--write bosdingiz, lekin shunday xabar chiqdi:

text
[error] sinov.html: SyntaxError: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag.

Tarjimasi: "Kutilmagan yopuvchi p tegi. Bu teg allaqachon boshqa teg tomonidan yopilgan bo'lsa yuz beradi." Prettier juda buzuq HTML'ni formatlashdan bosh tortadi. Bu ham foydali signal: faylda tuzilma xatosi bor. Tuzatish: xabardagi qator raqamiga boring, teglar yopilish tartibini tekshiring.

9.3 "Validator xato demadi — demak hammasi yaxshi"

Validator faqat grammatikani tekshiradi. U h1 o'rniga p ishlatganingizni yoki alt matni yomon yozilganini bilmaydi. alt="rasm" — validator uchun to'g'ri, foydalanuvchi uchun esa foydasiz. Ma'noni to'g'ri tanlash — sizning ishingiz. Keyingi darslar aynan shunga o'rgatadi.

10. Mashqlar

1-mashq (oson): Xabarni o'qing

html-validate shunday yozdi:

text
  7:3  error  <img> is missing required "alt" attribute  wcag/h37
  1. Xato nechanchi qatorda?
  2. Qaysi atribut yetishmayapti?
Yechim
  1. 7-qatorda, 3-belgidan boshlab.
  2. alt — rasmning matnli tavsifi. Tuzatish: <img src="..." alt="Rasmning qisqa tavsifi">.

2-mashq (o'rta): Hamma xatolarni tuzating

Quyidagi faylni mashq.html ga saqlang. Uni npx html-validate va Nu Checker bilan tekshirib, xatolar ro'yxatini yozing. Keyin hammasini tuzating.

html
<!DOCTYPE html>
<html>
<head>
<title>Menyu</title>
</head>
<body>
<h1>Menyu</h1>
<p>Osh <strong>35 000 so'm</p></strong>
<img src="kabob.jpg">
</body>
</html>
Yechim

Vositalar topadigan muammolar:

  1. html da lang yo'q. Nu Checker buni warning deydi, html-validate esa error (element-required-attributes).
  2. strong va p noto'g'ri tartibda yopilgan (html-validate — close-order, Nu Checker — "End tag “p” seen, but there were open elements").
  3. img da alt yo'q (ikkalasi ham).

Yana bitta muammoni vositalar ko'rsatmasligi mumkin: meta charset yo'q. Nu Checker'ning "Text Input" usulida matn allaqachon UTF-8 deb qabul qilinadi, shuning uchun u jim turadi. Lekin Hujjat skeleti qoidasi bo'yicha u shart — uni ham qo'shamiz. Vosita jim bo'lishi hammasi joyida degani emas.

Tuzatilgan fayl:

html
<!DOCTYPE html>
<html lang="uz">
  <head>
    <meta charset="utf-8">
    <title>Menyu — Choyxona «Bahor»</title>
  </head>
  <body>
    <h1>Menyu</h1>
    <p>Osh <strong>35 000 so'm</strong></p>
    <img src="kabob.jpg" alt="Sixdagi kabob">
  </body>
</html>

Qayta tekshirganda html-validate hech narsa yozmasligi, Nu Checker esa "The document validates..." deyishi kerak.

3-mashq (qiyin): Loyihani to'liq tekshirish

choyxona papkasidagi hamma HTML fayllarni tekshiring:

  1. Papkaga .htmlvalidate.json qo'shing (5.1-bo'limdagi kabi).
  2. Bitta buyruq bilan barcha .html fayllarni tekshiring.
  3. Bitta buyruq bilan hammasini Prettier bilan formatlang.

Maslahat: ikkala vosita ham fayl nomi o'rniga naqsh (pattern) qabul qiladi — "*.html". Fayl va matn qidirish darsida naqshlarni ko'rgansiz.

Yechim
bash
npx html-validate "*.html"
npx prettier --write "*.html"

Naqshni qo'shtirnoqqa olish muhim: shunda uni terminal emas, vositaning o'zi ochadi. Bu Windows va macOS/Linux'da bir xil ishlashini ta'minlaydi.

html-validate har bir fayl uchun xatolarni alohida sarlavha ostida chiqaradi. Prettier esa har bir formatlangan fayl nomini va vaqtini yozadi, masalan index.html 63ms. O'zgarmagan fayllar yonida (unchanged) turadi.

11. Real ishda

  • Prettier deyarli har bir zamonaviy loyihada bor. Jamoaga qo'shilganingizda birinchi ko'radigan fayllardan biri — .prettierrc (Prettier sozlamalari). Uslub haqida bahslashish o'rniga hamma bitta vositaga ishonadi.
  • Avtomatik tekshiruv. Katta loyihalarda linterlar kod GitHub'ga yuborilganda o'zi ishga tushadi. Xato bo'lsa, kod qabul qilinmaydi. Bu CI deb ataladi — kursda alohida o'rganamiz.
  • Accessibility va SEO auditi validatordan boshlanadi. Ko'p mijozlar "saytimizni tekshirib bering" deganda, dasturchining birinchi qadami — Nu Checker.
  • Intervyuda "HTML'ni qanday tekshirasiz?" degan savolga "brauzerda ochib ko'raman" — zaif javob. "Validator va linter bilan, formatlash esa Prettier'da" — kuchli javob.

Xulosa

  • Brauzer HTML xatolarini jimgina kechiradi — shuning uchun ularni vositalar bilan qidiramiz.
  • Formatlovchi (VS Code, Prettier) kodni tekislaydi, lekin xatoni tuzatmaydi; formatOnSave bilan har saqlashda ishlaydi.
  • W3C Nu HTML Checker — rasmiy validator: manzil, fayl yoki matn bilan tekshiradi.
  • npx html-validate va npx htmlhint — terminaldagi linterlar; xabarda qator:ustun, xabar va qoida nomi bor.
  • Error — albatta tuzating; warning — ko'pincha tuzatgan ma'qul.
  • Validator grammatikani tekshiradi, ma'noni emas — to'g'ri teg tanlash sizning ishingiz.

Keyingi dars: Sarlavhalar va paragraflar — h1 dan h6 gacha sarlavhalar ierarxiyasi va nega sarlavha "katta matn" emas.

Manbalar

  • W3C Nu HTML Checker — validator.w3.org/nu
  • html-validate hujjatlari — html-validate.org
  • HTMLHint hujjatlari — htmlhint.com
  • Prettier hujjatlari — prettier.io
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
HTML formatlash va validatsiya: Prettier, W3C validator va linterlar — IlmHamroh