Урок 7.5. Линтеры + Линтеры CSS (ESlint + Stylelint)

Опубликовано: 31 Март 2026
на канале: Web-garage

260

Клон плейлиста на Яндекс.Дзен: https://dzen.ru/suite/3764854c-4f30-4...

Алгоритм:
1. Установить в редактор кода расширение ESLint.
2. Установить ESLint как пакет в проект:
-------------------------------------------------
npm i -D eslint
-------------------------------------------------
3. Интегрировать ESLint и Prettier:
-------------------------------------------------
npm install -D eslint-plugin-prettier eslint-config-prettier
-------------------------------------------------
4. Cоздать конфигурационный файл eslint.config.js
Код: https://github.com/alexeirybak/JavaSc...
5. В settings.json вставить правила:
-------------------------------------------------
"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
}
-------------------------------------------------
6. Секция scripts в файле package,json в конце должна быть такой:
-------------------------------------------------
"scripts": {
"format": "prettier --write .",
"lint:js": "eslint",
"lint:css": "stylelint ./*.css",
"lint": "npm run lint:js && npm run lint:css"
},
-------------------------------------------------
7. Установить расширение stylelint
8. Установить пакеты в проект
-------------------------------------------------
npm install -D stylelint stylelint-config-standard stylelint-prettier
-------------------------------------------------
9. Создать конфигурационный файл .stylelintrc.yml:
https://github.com/alexeirybak/JavaSc...

Если линтеры не работают, перезапускайте редактор кода!

🔗 Посмотреть правила ESLint: https://ru.hexlet.io/blog/posts/rukov...
🔗 Готовый конфиг от ESLint – eslint:recommended: https://eslint.org/docs/latest/rules/
🔗 Посмотреть правила Stylelint: https://stylelint.io/user-guide/confi...

Ссылка на код из урока: https://github.com/alexeirybak/JavaSc...