Сравнение утилит форматирования JavaScript кода: JSLint vs JSHint vs JSCS vs ESLint

Инструмент для форматирования кода помогает мне избегать глупых ошибок при написании JavaScript. Несмотря на мой многолетний опыт, я по-прежнему неправильно набираю имена переменных, делаю синтаксические ошибки и забываю правильно обрабатывать их. Хороший инструмент для линтинга или лентер расскажет мне об этом, прежде чем я потрачу свое время, или, что еще хуже, время моего клиента. Хороший инструмент для линтинга также может помочь убедиться, что проект соответствует стандарту кодирования.

Есть много линтеров, доступных для JavaScript, но как вы выбираете, какой из них использовать? Давайте посмотрим как на особенности и плюсы и минусы четырех популярных альтернатив: JSLint, JSHint, JSCS и ESLint.

Обзор

Эти четыре инструмента работают одинаково. У них есть набор правил, которые они используют для анализа и отчета о проблемах в файлах JavaScript. Они могут быть установлены через npm. Они используются из командной строки путем передачи файлов, доступны в виде плагинов для таких инструментов, как Grunt, или интегрированы в редакторы. Все они поддерживают использование комментариев для конфигурации.

Но на этом сходства заканчиваются. У каждого инструмента есть свои плюсы и минусы - просто у некоторых есть больше плюсов, чем у других.

JSLint

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

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

Плюсы

• Приходит настроенный и готовый к работе (если вы согласны с действующими правилами)

Минусы

• JSLint не имеет конфигурационного файла, что может быть проблематичным, если вам нужно изменить настройки
• Ограниченное количество опций конфигурации, многие правила не могут быть отключены
• Вы не можете добавлять пользовательские правила
• Недокументированные функции
• Трудно узнать, какое правило вызывает ошибку

JSHint

JSHint был создан как более настраиваемая версия JSLint (форком которого он является). Вы можете настроить каждое правило и поместить их в файл конфигурации, что упрощает использование JSHint в больших проектах. JSHint также имеет хорошую документацию для каждого из правил, поэтому вы точно знаете, что они делают. Интеграция его в редакторы также проста.

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

Плюсы

• Большинство настроек можно настроить
• Поддерживает конфигурационный файл, что упрощает его использование в крупных проектах
• Имеет поддержку многих библиотек из коробки, таких как jQuery, QUnit, NodeJS, Mocha и т. Д.
• Базовая поддержка ES6

Минусы

• Трудно узнать, какое правило вызывает ошибку
• Имеет два типа опций: принудительное и простое (что может быть использовано для более строгой настройки JSHint или для подавления его предупреждений). Это может сделать конфигурацию немного запутанной
• Поддержка пользовательских правил

JSCS

JSCS отличается от других тем, что ничего не делает, если вы не дадите ему конфигурационный файл или не сообщите ему, чтобы он использовал пресет. Вы можете загружать конфигурации со своего веб-сайта, поэтому это не большая проблема, и у него есть несколько пресетов, например пресет набора jQuery и пресет Google.

Он имеет более 90 различных правил, и вы можете создавать собственные с плагинами. JSCS также поддерживает пользовательские правила, что упрощает интеграцию с инструментами, которые требуют их ввода в определенном формате.

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

Плюсы

• Поддержка пользовательских правил, которые могут упростить интеграцию с другими инструментами
• Предустановки и готовые файлы конфигурации могут упростить настройку, если вы следуете одному из доступных стилей кодирования
• Имеет флаг для включения имен правил в отчеты, поэтому легко понять, какое правило вызывает причину ошибки
• Может быть дополнен пользовательскими плагинами

Минусы

• Только распознает нарушения стиля кодирования. JSCS не обнаруживает потенциальных ошибок, таких как неиспользуемые переменные или случайные глобальные переменные и т.д.
• Самый медленный из четырех, но это не проблема в типичном использовании

ESLint

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

Документация ESLint немного неполная. Список правил легко отслеживается и сгруппирован в логические категории, но инструкции по настройке немного запутаны в некоторых местах. Тем не менее, он предлагает ссылки на интеграцию редакторов, плагины и примеры в одном месте.

Плюсы

• Гибкость: любое правило может быть переключено, и во многих правилах есть дополнительные настройки, которые можно настроить
• Очень расширяемый и доступно много плагинов.
• Легко понять результат
• Включает множество правил, недоступных для других линтеров, что делает ESLint более полезным при выявлении проблем
• Лучшая из возможных поддержка ES6, а также единственный инструмент для поддержки JSX
• Поддержка пользовательских репортеров

Минусы

• Требуется некоторая конфигурация
• Медленная, но не помеха

Мои рекомендации

Мой выбор из этих четырех - ESLint. 

JSLint является строгим и не настраивается, тогда как JSHint не имеет механизма расширения. JSCS - хороший выбор, если вы хотите проверить стиль кодирования, но ESLint делает это, и он проверяет ваш код на наличие ошибок и других проблем.

ESLint также является очевидным выбором, если вы хотите использовать ES6 (или ES2015, как они, называют его сейчас). Из всех упомянутых инструментов он имеет самую широкую поддержку функций ES6.

JSHint является альтернативой. Если вам не нужны расширенные функции ESLint, JSHint поймает большое количество проблем после правильной настройки. JSCS, обладающие огромным количеством доступных правил, является лучшим выбором, если вам не нужно ничего, кроме проверки стиля кодирования (отступы, фигурные скобки и т.д.).

Я не решаюсь рекомендовать JSLint вообще. Другие инструменты выполняют те же действия, но не накладывают никаких особых ограничений на пользователя. Единственное исключение здесь - если вы согласны со всеми правилами, которые он применяет, и в этом случае его может быть интересно изучить.

Инструмент для перевязки - это хороший шаг к решению проблем, но он видит только столько ошибок, сколько позволяют его правила. Для более надежного автоматического обнаружения ошибок я рекомендую использовать модульные тесты. Для этой цели также могут быть полезны обзоры кода.

Как вы и ваша команда обеспечиваете качество своего кода?