W3C валидация css написанного scss — какие есть оффлайн инструменты для проверки?

Question

bormor @bormor

W3C валидация css написанного scss — какие есть оффлайн инструменты для проверки?

Ситуация:
Есть проект с SCSS и сборкой на Gulp. Верстальщики используют Sublime и VSCode.
Ищем удобные инструменты проверки валидности css.

Идеальный вариант:
- линтер в ide верстальщика, который прямо в SCSS файле показывает ошибки в CSS.
- плюс npm модуль, который можно повесить на precommit (с поддержкой sourcemap - чтоб показывал ошибки прямо в scss файле)

Какие вообще есть варианты решений?
Пока нашли только scss-lint, но вроде проверяет только ошибки комплияции SCSS и codestyle.
Тоже хорошо, но мало - можно написать нерабочий код css который проходит проверку.

Вопрос задан более трёх лет назад
842 просмотра

Комментировать

Подписаться 3 Простой Комментировать

Решения вопроса 1

5 комментариев

bormor @bormor Автор вопроса

Да, похоже это оптимально решение. Что приятно - работает с sass, scss, less, css.
Протестируем и отпишусь. Может найтем еще какие интересные варианты его использования.

Написано более трёх лет назад
bormor @bormor Автор вопроса
Demian Smith, Отличная штука, почти то что нужно.

Правда запуск по npm run test около 10 секунд - это нормальное явление?
(в тестовом проекте с 1 scss файлом на 3 строки, даже если все тесты ок)
// package.json "scripts": { "test": "stylelint \"app-src/scss/**/*.scss\" && exit 0" },

скрин замера

Верстальщики привыкли, что коммиты делаются мгновенно, а поставив на precommit эта задержка будет всех слегка сбивать с привычного рабочего процесса. Будут сопротивлятся.
Написано более трёх лет назад
Demian Smith @search
bormor, может у вас старый комп? на маке с ссд на небольшом проекте эта команда отрабатывает практически мгновенно. Может слегка запнуться если в файле есть ошибки. Но на самом деле, даже 3 секунды - это мелочь. Верстаки будут ныть полдня максимум, а потом привыкнут.

Для того чтоб не мучать линтерами других разработчиков, не связанных с scss или не всегда коммитящих scss - ставят вот такую штуку https://github.com/okonet/lint-staged . В этом случае линтер срабатывает только на те scss файлы, которые будут закоммичены. На проектах, где и бэкенд и фронтенд в одной репе, бэкендеры могут даже и не знать о существовании линтеров-шмитреров. Но узнают о них сразу же как только пытаются воткнуть портак.

Вот пример, как это всё связать, выдранный из рабочего проекта

{ "scripts": { "precommit": "lint-staged" }, "lint-staged": { "linters": { "app-src/**/*.{scss,css,sass}": [ "stylelint" ] } }, "devDependencies": { "husky": "^0.14.3", "lint-staged": "^4.0.4", "stylelint": "^8.1.1" } }

если воссоздать такую структуру у себя в package.json, то достаточно сделать npm install и всё заработает.

Наслаждайтесь! ;-)

Ах да, `&& exit 0` можно не писать в скриптах.
Написано более трёх лет назад
Demian Smith @search

Demian Smith, есть еще такой вариант что у вас нод староват, поэтому медленно работает.

Написано более трёх лет назад
bormor @bormor Автор вопроса

Спасибо за подсказки.
По скорости - нода последняя, скорее всего это от железа.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

2 комментария

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 3 часа назад
- 16 просмотров
0

ответов
CSS

Простой
Не работает скролл на фоне блока. Как исправить?
- 1 подписчик
- 4 часа назад
- 22 просмотра
1

ответ
HTML

+1 ещё

Средний
Как поместить картинку рядом с текстом?
- 1 подписчик
- 7 часов назад
- 52 просмотра
1

ответ
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 11 часов назад
- 64 просмотра
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 15 часов назад
- 423 просмотра
1

ответ
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- вчера
- 1803 просмотра
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- вчера
- 61 просмотр
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- вчера
- 200 просмотров
4

ответа
CSS

Простой
Почему нет задержки между повторами анимации?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 2 подписчика
- вчера
- 180 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Frontend React

Glob-com

от 100 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Анимация логотипа

24 апр. 2024, в 00:08

20000 руб./за проект

Разработка дизайна раздела «Статьи» на сайте «Мир отходов»

23 апр. 2024, в 23:01

10000 руб./за проект

Дизайн личного кабинета (клиентская часть)

23 апр. 2024, в 22:37

500 руб./в час

Answer 1 · 2017-12-08 12:19:57

Вот пожалуй лучший линтер https://www.npmjs.com/package/stylelint

Прогонять CSS через валидатор W3C - это очень плохая аматорская идея, не дающая абсолютно никаких выигрышей и невероятно изматывающая разработчиков. Вместо того чтоб писать чистый, пригодный, модульный ЦСС, разработчики начинают изворачиваться дабы ублажить валидатор. Линтера и здравого смысла обычно хватает.

Лучший валидатор - это браузер.

UPD

Очень хороший способ держать цсс в вменяемом состоянии: ставите husky ( https://github.com/typicode/husky ) - это утилита, которая добавляет гитхуки. Затем в package.json в секцию scripts добавляет команду precommit, которая будет вызвать stylelint. Каждый раз, когда девелопер коммитит, будет вызываться гитхук и проверять SCSS. Если в нём обнаружились проблемы, то линтер о них сообщит и коммит не пройдёт. Вроде как WebStorm и другие популярные IDE понимают файл .stylelintrc, в котором будут описаны ваши правила валидации.

UPD UPD
Чёрт возьми, Тостер - ресурс для программистов, не поддерживает makrdown и не может распарсить URL. Это просто позор.

Answer 2 · 2017-12-08 12:29:58

scss-lint должен подойти, вам как раз и нужен codestyle

Что вы имеете ввиду под "нерабочий код css" ? Ошибки валидации css по W3C - штука очень спорная

W3C валидация css написанного scss — какие есть оффлайн инструменты для проверки?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт