Как организовать автоматическую проверку стиля кода и валидации при помощи Gulp?

Question

[Евгений Попов]

Столкнулся с проблемой тестирования верстки, кодгайда кода и т.п. Не пойму, как опытные фронтендеры проверяют допустим кодгайд.

Посмотрев на гитхабе некоторые проекты, я заметил что некоторые используют плагин Csscomb для gulp, но он же стилизует уже скомпилируемый css файл, а не исходные sass или less файлы. Не могу никак понять как его настроить или в редакторе или в галпе, чтобы он редактировал исходные файлы. Через редактор у меня получается на половину, не могу только чтобы автоматически между классами был отступ (пустая строка)

.plan {
    background: #007090;
    .plan__title {
        padding-top: 37px;
        padding-bottom: 37px;

        font-size: 50px;
        font-family: KvalikaBold-Bold;
        text-align: center;
        color: #ffffff;
    }
    .plan__button-list {
        display: block;
        max-width: 1170px;
        margin: 0 auto;

        text-align: center;
        .plan__button {
            width: 130px;
            height: 45px;
            margin-right: 6px;
            margin-bottom: 10px;
            margin-left: 6px;
            padding: 1px 20px;

Также многие используют stylelint плагин. Правильно ли я понимаю, что именно он делает некий тест на валидацию css кода. То есть можно сначала отредактировать csscomb и потом проверить через stylelint, так?

И последний плагин который я нашел, это валидация html 'gulp-html5-lint'. С ним в принципе вопрос нет, но его работа на сегодняшний день актуальна?

Цель этих вопросов, стоит ли использовать эти инструменты, чтобы хоть как то уменьшить рутинные задачи по правке кода. Или сервисы валидации w3.org лучше и надежне? Однако пологаю если через gulp все правильно организовать, будет быстрее. Ориентировался на стартовые шаблоны Николая Громова - github.com/nicothin и фирмы glivera github.com/glivera-team. Также есть интересный проект от HMLacademy github.com/htmlacademy/codeguide, но вот не пойму, как это все прикрутить к своему проекту.

Answer 1

[sim3x]

Валидация от w3c давненько уже не в тренде

Да - линтеры актуальны
Они встроены в IDEA и их можно подключить отдельно перед гит коммитом

Макеев - знаю, akella - знаю
Кто такой Громов?

Также непонятно зачем использовать чей-то шаблон - если можно запилить свой

Comments

[Евгений Попов]

Недавно делал небольшую страницу, так мне сделали замечания по поводу валидации, и они как раз проверяли через w3c. Отчасти и задал этот вопрос.

Громов был наставником на курсах HTML academy как я знаю.

Я и хочу свой сделать шаблон, а на другие смотрю, так как люди более опытнее меня.

[sim3x]

12evgen:
Люди пропустили момент, 10 лет назад, когда все стали делать валидацию по браузерам, а не по синтетике

По синтетике стоит фиксить ну вот ошибки ну у совсем начинающего, который пишет в нотепаде, а не IDE

Опытность людей сложно измерять - берите, то что нравится и вам нужно и переделывайте под себя. А опытные люди могут заблуждаться, не знать и, из-за снобизма, не хотеть признавать себя неправым

[Евгений Попов]

sim3x: Спасибо за объяснения, буду знать)

[Максим Калинин]

Кодгайды HTML академии выглядят очень аккуратными. Когда пишу код в css, то пишу свойства в хаотическом порядке, когда пытаюсь поставить блоки на их место, поставить фон, границу, шрифт и т.п. Как писать красиво и систематизировано?

[Евгений Попов]

Об этом я говорил выше, есть плагин для редакторов csscomb, он стилизует css. В статье поищи, там про это написано - html-academy.ru/codeguide