Опубликовано автор в категориях Верстальщику.

Если вы не используете линтеры — вы плохой разработчик. Сегодня качество разработчика оценивается не только качеством работы его кода, но и красотой кода. О красоте кода написано много и повторять это здесь не будем. В данном посте я хотел бы просто перечислить инструменты для фронт-енд разработчика, которые помогут сделать ваш код лучше, с эстетической точки зрения.

Для начала определимся о каких языках мы будем говорить. Конечно, современный разработчик может работать с различными стеками технологий и пересекаться с большим количеством языков, но в данном посте я рассмотрю три кита фрот-енда: HTML, CSS, JavaScript.

HTML линтеры

С HTML, на самом деле все просто. Среди различных инструментов можно выделить общее — HTML Tidy. Основная задача HTML Tidy — исправление неверного HTML и улучшение внешнего вида и стиля разметки. Библиотека была разработана Дейвом Рэггеттом из Консорциума Всемирной паутины (W3C), позднее приобрела широкую популярность и стала де-факто номер один инструментом проверки качества HTML кода. На сегодняшний день существуют как самостоятельные онлайн ресурсы, так и десктопные приложения, ну, и конечно же, плагины для всех популярных редакторов кода. На сегодняшний день бинарные архивы содержат устаревший код, но, все же рабочий. Актуальные исходники библиотеки можно найти на странице проекта http://tidy.sourceforge.net/

CSS линтеры

С линтерами для CSS ситуация уже куда веселее. Начиналось все довольно банально с CSSTidy.

CSSTidy

По аналогии с HTML Tidy этот открытый синтаксический анализатор и оптимизатор CSS был написан на ранних этапах развития языка Флорианом Шмитцем. На сегодняшний день проект не развивается и последнее обновление датировано 19 июля 2007 года. CSSTidy может исправлять некоторые распространенные ошибки (например, отсутствующие единицы или точки с запятой), форматировать, а также сжимать (оптимизировать) CSS код. Не смотря на почтенный возраст CSSTidy и до сих пор используется во многих онлайн оптимизаторах CSS, редакторах, и даже доступен в виде десктопных утилит. Однако, развитие CSS пре- и постпроцессоров дало толчок развитию инструментов для линтования кода в этих подмножествах языка.

SASS линтеры

Для популярного и лидирующего CSS препроцессора SASS, главным инструментом является scss-lint. Именно этот линтер является лидером в силу того, что большинство фронтендеров предпочитают использовать именно .scss, а не .sass синтаксис. Однако, для тех, кто предпочитает использовать .sass синтаксис, также есть линтер sass-lint (данном случае приведена ссылка на node.js версию линтера).
Естественно, оба линтера имеют плагины для ведущих текстовых редакторов, ссылки на которые вы сможете найти на страницах проектов. Следует также ответить что помимо SASS существуют и другие препроцессоры, самые популярные Stylus и Less и для них тоже есть линтеры.

Линтер для Stylus

Более чем уверен, что существует ни один линтер для Stylus, но, придерживаясь передовых методов разработки, я укажу ссылку лишь на node.js версию — это stylint. На странице проекта есть исчерпывающая документация по плагину, а также в сети ссылки на плагины для популярных редакторов, как минимум для Sublime Text и Atom, я видел точно.

Линтер для Less

Очень давно я не писал на этом препроцессоре, но вижу что проект еще жив. И, конечно же, линтер для Less тоже должен быть. Опять же, я нашел пакет в репозитории npm — less-plugin-linter. Судя по описанию — это просто плагин для node, который вы можете наполнять правилами линта. Также в сети есть ссылка на плагин для редактора Atom, а значит есть и для Sublime Text.

Stylelint

Медленно, но уверенно, мы подошли к самому главному. Stylelint без сомнений достоин отдельного поста, здесь рассмотрим лишь общее описание. Это линтер нового поколения. По сути — это конструктор, который имеет базу и может быть расширен неограниченным количеством плагинов. Stylelint работает на node.js и доступен как в виде CLI, Node API, или… 👏 PostCSS плагина. Да, и это круто. Помимо того, что вы можете запустить этот линтер как PostCSS плагин, он содержит в себе особенности, которые не имеют большинство линтеров для CSS:

  • более ста правил, начиная стилистикой, и заканчивая правилами, которые замечают специфичные ошибки кодинга (например, неправильный индекс свойства цвета или не использование сокращений для свойств);
  • поддержка современного CSS синтаксиса, включая custom properties, контекст диапазонов для media свойств, calc() и наследование;
  • понимает синтаксис подмножества CSS языков (SCSS и другие);
  • очень гибок в настройках;
  • можно делится конфигами;
  • расширяется плагинами;
  • доступна валидация конфига.

Это только краткое описание, на странице проекта вы найдете доки, гайды и прочие плюшки. С уверенностью могу сказать, что уже есть плагины для Sublime Text и Atom. В общем, по моему субъективному мнению — это ведущий линтер для CSS на сегодня.

JavaScript линтеры

Давным-давно, в далекой галактике… Ну можно конечно было бы начать и так, суть в том, что первым в это списке мне хотелось бы выделить JSLint, который был выведен в подмножество JavaScript языка автором бестселлера «JavaScript: сильные стороны» Дугласом Крокфордом, помимо этого линтера хотелось бы выделить JSHint и ESHint.

JSLint

Как и было сказано выше JSLint, является одним из первых линтеров, который полностью наследует идеи описанные в книге «JavaScript: сильные стороны». По моему, один из самых строгих линтеров, но идеи, положенные в его основу нельзя оспорить. Если ваш код не выдаст ошибок в это линтере, то вы красавчик. Очень тяжело придерживаться всех канонов кодинга этого линтера, особенно если вы работаете в большой команде. Поэтому лично для себя я выбрал более гибкий и не столь строгий JSHint.
Как и положено хорошему линтеру, он доступен в качестве плагина для большинства популярных редакторов.

JSHint

Я бы сказал, что JSHint не столь аскетичный и более гибок, нежели его предшественник. Его в качестве контроля кода используют ведущие разработчики и передовые онлайн гиганты. На странице плагина вы найдете исчерпывающую документацию по установке и настройке, а также ссылки на плагина для большинства популярных редакторов кода. Очень популярный и широко поддерживаемый линтер. И стоит сказать что популярность его вполне заслужена.

ESlint

Все хорошее, можно улучшить. Наверное, таким бы мог быть девиз ESlint. Линтер был создан Николасом Закасом в июне 2013 года. Основная особенность этого линтера заключается в том, что он очень гибко настраивается, а также может расширяться за счет плагинов. Линтер написан на node.js. Возможно, на сегодняшний день один из лучших JavaScript линтеров.
Не смотря на, что написан он сугубо на node.js, доступны плагины для популярных редакторов. Вы можете использовать как локальные пакеты плагина в проекте, так и глобально установленные файлы.

Заключение

Данный пост, не претендует на полный и детальный обзор. Его основная цель помочь разработчику выбрать инструмент для контроля качества своего кода, а главное — стимулировать фронтендеров использовать инструменты для контроля качества своего кода. В любом случае, начиная свой новый проект, стоит уделить некоторое время, чтобы настроить свою рабочую среду на контроль качества вашего кода. Думаю, что результат вам порадует.

Оставить комментарий

  • (не будет показан)