Инструмент для рисования помогает мне избежать глупых ошибок при написании JavaScript. Несмотря на мой многолетний опыт, я все еще неправильно набираю имена переменных, делаю синтаксические ошибки и забываю правильно обрабатывать свои ошибки. Хороший инструмент для подкладки, или подкладка, расскажет мне об этом до того, как я потрачу время — или, что еще хуже, время моего клиента. Хороший инструмент для раскрашивания также может помочь обеспечить соответствие проекта стандарту кодирования.
Для JavaScript доступно много линтеров, но как выбрать, какой использовать? Давайте рассмотрим как функции, так и плюсы и минусы четырех популярных альтернатив: JSLint , JSHint , JSCS и ESLint .
обзор
Четыре инструмента работают одинаково. У них есть набор правил, которые они используют для анализа и сообщения о проблемах в файлах JavaScript. Их можно установить через npm. Они используются из командной строки путем передачи файлов, доступны как плагины для таких инструментов, как Grunt, или интегрированы в редакторы. Все они поддерживают использование комментариев для конфигурации.
Но на этом сходство заканчивается. У каждого инструмента есть свои плюсы и минусы — просто у одних больше плюсов, чем у других.
JSLint
JSLint является старейшим из четырех. Дуглас Крокфорд создал его в 2002 году для обеспечения того, что, по его опыту, является хорошей частью JavaScript. Если вы согласны с хорошими деталями, JSLint может быть хорошим инструментом — вы установите его, и он готов к работе.
Недостатки в том, что JSLint не настраивается и не расширяется. Вы не можете отключить многие функции вообще, а некоторые из них не имеют документации. Официальный сайт не очень полезен, например, ему не хватает информации о том, как интегрировать его с вашим редактором.
Pros
- Поставляется настроенным и готовым к работе (если вы согласны с применяемыми правилами)
Cons
- JSLint не имеет файла конфигурации, который может быть проблематичным, если вам нужно изменить настройки
- Ограниченное количество параметров конфигурации, многие правила не могут быть отключены
- Вы не можете добавить пользовательские правила
- Недокументированные функции
- Трудно понять, какое правило вызывает какую ошибку
JSHint
JSHint был создан как более конфигурируемая версия JSLint (из которой он является форком). Вы можете настроить каждое правило и поместить их в файл конфигурации, что упрощает использование JSHint в больших проектах. JSHint также имеет хорошую документацию для каждого из правил, так что вы точно знаете, что они делают. Интегрировать его в редакторы также просто.
Небольшой недостаток JSHint заключается в том, что он поставляется с упрощенной конфигурацией по умолчанию. Это означает, что вам нужно сделать некоторые настройки, чтобы сделать его полезным. При сравнении с ESLint также сложнее узнать, какие правила необходимо изменить, чтобы включить или отключить определенные сообщения об ошибках.
Pros
- Большинство настроек можно настроить
- Поддерживает файл конфигурации, облегчая использование в больших проектах
- Имеет встроенную поддержку многих библиотек, таких как jQuery, QUnit, NodeJS, Mocha и т. Д.
- Базовая поддержка ES6
Cons
- Трудно понять, какое правило вызывает ошибку
- Имеет два типа опций: принудительное и расслабляющее (которые могут использоваться для ужесточения JSHint или для подавления его предупреждений). Это может сделать конфигурацию слегка запутанной
- Нет поддержки пользовательских правил
ОНК
JSCS отличается от других тем, что он ничего не делает, если вы не дадите ему файл конфигурации или не скажете ему использовать пресет. Вы можете загрузить конфигурации с их веб-сайта, так что это не составляет большой проблемы, и у них есть ряд предустановок, таких как предустановка стиля кодирования jQuery и предустановка Google.
В нем более 90 различных правил, и вы можете создавать собственные с помощью плагинов. JSCS также поддерживает нестандартных репортеров, что облегчает интеграцию с инструментами, которым требуется их ввод в определенном формате.
JSCS является проверкой стиля кода. Это означает, что он только улавливает проблемы, связанные с форматированием кода, а не потенциальные ошибки или ошибки. В результате, он менее гибок, чем другие, но если вам нужно применить определенный стиль кодирования, это хорошо работает JSCS.
Pros
- Поддержка пользовательских репортеров, которые могут упростить интеграцию с другими инструментами
- Предварительные настройки и готовые файлы конфигурации могут упростить настройку, если вы будете следовать одному из доступных стилей кодирования
- Имеет флаг для включения имен правил в отчеты, поэтому легко определить, какое правило вызывает какую ошибку
- Может быть расширен с помощью пользовательских плагинов
Cons
- Обнаруживает только нарушения стиля кодирования. JSCS не обнаруживает потенциальных ошибок, таких как неиспользуемые переменные или случайные глобальные переменные и т. Д.
- Самый медленный из четырех, но это не проблема при обычном использовании
ESLint
ESLint является самым последним из четырех. Он был спроектирован так, чтобы его можно было легко расширять, он содержит большое количество пользовательских правил, и его легко устанавливать в виде плагинов. Он дает краткий вывод, но по умолчанию содержит имя правила, чтобы вы всегда знали, какие правила вызывают сообщения об ошибках.
Документация ESLint может быть немного хитом или промахом. Список правил прост в использовании и сгруппирован в логические категории, но инструкции по настройке местами немного запутаны. Тем не менее, он предлагает ссылки на интеграцию редактора, плагины и примеры в одном месте.
Pros
- Гибкость: любое правило может быть переключено, и многие правила имеют дополнительные настройки, которые можно настроить
- Очень расширяемый и имеет много доступных плагинов
- Легко понять, вывод
- Включает множество правил, недоступных в других линтерах, что делает ESLint более полезным для выявления проблем
- Лучшая поддержка ES6, а также единственный инструмент для поддержки JSX
- Поддерживает пользовательских репортеров
Cons
- Требуется некоторая конфигурация
- Медленно, но не помеха
Мои рекомендации
Мой выбор из этих четырех — ESLint. JSLint является строгим и не настраиваемым, тогда как в JSHint отсутствует механизм расширения. JSCS — хороший выбор, если вы хотите проверить только стиль кодирования, но ESLint делает это и проверяет ваш код на наличие ошибок и других проблем.
ESLint также является очевидным выбором, если вы хотите использовать ES6 (или ES2015, как они сейчас его называют). Из всех упомянутых инструментов он обладает самой широкой поддержкой функций ES6.
Если вы хотите попробовать ESLint, я сделал это очень просто, создав краткое руководство из 5 шагов. Вы можете загрузить руководство по быстрому запуску ESLint из 5 этапов с моего веб-сайта .
JSHint сильный второй выбор. Если вам не нужны расширенные функции ESLint, JSHint улавливает большое количество проблем после правильной настройки. JSCS с его огромным количеством доступных правил — лучший выбор, если вам не нужно ничего, кроме проверки стиля кодирования (отступы, фигурные скобки и т. Д.).
Я не решаюсь рекомендовать JSLint вообще. Другие инструменты делают то же самое, но не навязывают никаких конкретных правил пользователю. Единственное исключение здесь, если вы согласны со всеми правилами, которые он применяет, и в этом случае стоит попробовать.
Инструмент для рисования — хороший шаг к выявлению проблем, но он видит столько ошибок, сколько позволяют его правила. Для более надежной автоматической ловушки ошибок я рекомендую использовать модульные тесты. Обзоры кода также могут быть полезны для этой цели.
Как вы и ваша команда гарантируете качество вашего кода?