Инструменты проверки
| Инструмент | Что проверяет | Как пользоваться |
|---|---|---|
| W3C Markup Validator | Соответствие HTML спецификации | validator.w3.org — по URL, файлом или вставкой кода |
| W3C CSS Validator | Синтаксис и значения CSS | jigsaw.w3.org/css-validator |
| HTMLHint | Линт HTML: дубли id, нижний регистр тегов, обязательный alt | npx htmlhint "**/*.html" |
| Stylelint | Линт CSS: опечатки, дубли, порядок свойств | npx stylelint "**/*.css" |
| VS Code | Подсветка ошибок в редакторе | Панель Problems + расширения линтеров |
| CI check | Авто-проверка перед merge | npm run lint в пайплайне |
Как пользоваться W3C Validator
Три способа подачи кода на странице validator.w3.org:
- Validate by URI — для опубликованной страницы (укажите адрес).
- Validate by File Upload — загрузить локальный
.html. - Validate by Direct Input — вставить код в поле (удобно для черновиков и фрагментов).
В ответ валидатор выдаёт список с номером строки, текстом ошибки и категорией: Error (нарушение спецификации) или Warning (стоит проверить, но не блокирует).
Линтеры в редакторе и CI
Линтер проверяет код по настроенным правилам, не открывая браузер. В VS Code установите расширения HTMLHint и Stylelint — ошибки появятся в панели Problems и подчёркиванием прямо в коде. В проекте конфигурация хранится в файле правил и запускается одной командой:
📄 package.json (фрагмент)
"scripts": {
"lint:html": "htmlhint \"src/**/*.html\"",
"lint:css": "stylelint \"src/**/*.css\""
}⚠️ Проверить по документации: имена пакетов, ключи CLI и формат конфигов HTMLHint/Stylelint меняются между версиями. Сверяйтесь с актуальной документацией соответствующего инструмента.