Современные и более быстрые альтернативы ESLint

Автор: Годсон Обиелум✏️

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

Прежде чем перейти к сути статьи, давайте кратко рассмотрим, что предоставляют линтеры и форматоры кода и почему мы можем захотеть использовать их при работе над проектом.

Содержание

• Преимущества линтеров и форматеров кода
• Что такое ESLint?
• Современные альтернативы ESLint
  • Рим
  • quick-lint-js
  • Стандартный JS
  • Putout
  • JSHint

• Библиотеки для интеграции с ESLint

  • Красивее
  • Babel
  • webpack

  Преимущества линтеров и форматоров кода

  Основная цель линтера — помочь вам улучшить ваш код. Это улучшение становится возможным благодаря анализу вашего кода и информированию вас о возникающих проблемах на основе пользовательских или стандартных наборов правил, которые были предварительно настроены. В ESLint эти наборы правил называются rules. По сути, с помощью этих наборов правил линтеры помогают командам разработчиков достичь согласованного стиля кодирования и найти ошибки, которые могут возникнуть из-за несогласованного стиля кодирования. С другой стороны, форматтер кода обеспечивает согласованный стиль, разбирая ваш код и перепечатывая его со своими собственными правилами. Он учитывает настройку максимальной длины строки в вашем редакторе кода и при необходимости сворачивает код. Примером известного форматировщика кода является Prettier; мы подробно рассмотрим его в следующих разделах.

  Что такое ESLint?

  ESLint относится к категории линтера, которую мы рассмотрели в предыдущем разделе. Это один из самых популярных инструментов линтинга JavaScript, который в настоящее время еженедельно загружается около 24 миллионов раз. В первую очередь он делает две вещи: находит проблемы в вашем коде и автоматически их исправляет. ESLint либо встроен в большинство текстовых редакторов, либо доступен в виде расширений, что свидетельствует о его широкой популярности. Он хорошо настраивается, и вы можете расширить правила по умолчанию и написать собственные правила, основанные на потребностях вашего проекта. Парсер ESLint ориентирован на синтаксис (он может понимать взаимосвязь между синтаксисом вашего кода), поэтому вероятность столкнуться с непоследовательными ошибками, возникающими при использовании традиционных алгоритмов поиска и замены, довольно низка. Далее рассмотрим два класса библиотек: те, которые могут служить альтернативой ESLint, и те, которые мы можем интегрировать с ESLint.

  Современные альтернативы ESLint

  Rome

  Rome — это цепочка инструментов, целью которой является унификация функциональных возможностей (таких как форматирование, линтинг, пакетирование и т.д.), предоставляемых несколькими библиотеками. Она призвана заменить ESLint и другие инструментальные библиотеки в экосистеме JavaScript, такие как Babel, webpack, Prettier и другие. Rome нацелен на создание совместной базы для обеспечения надежного опыта обработки кода, отображения ошибок и конфигурации. Rome имеет строгие соглашения, которые он соблюдает, позволяя лишь минимальную конфигурацию. Rome также имеет первоклассную поддержку IDE, со сложным парсером, представляющим исходный текст с полной достоверностью, и первоклассным восстановлением ошибок.

  Преимущества Rome перед ESLint

  Производительность

  Изначально Rome был создан на JavaScript, но сейчас переписывается на Rust; предполагается, что такой фундаментальный сдвиг в архитектуре принесет значительные улучшения в производительности, использовании памяти и безопасности типов без ущерба для других областей, таких как гибкость.

  Сторонние зависимости

  Благодаря Rust разработчики могут создавать внутренние API, которые сосредоточены на основных потребностях, таких как корректность, а не на зависимости от сторонних JavaScript-зависимостей_._ Это результат внимания, уделяемого Rust и его сообществу, которое позволяет Rome использовать зависимости от сообщества, не идя на компромиссы в отношении размера кода и производительности.

  Особенности

  Rome — это не просто линтер, это комбинация нескольких инструментов в рамках одной библиотеки, и поэтому Rome предоставляет гораздо больше функций и возможностей, чем ESLint. Rome все еще находится в разработке, хотя функции парсинга и форматирования кода уже выпущены и доступны через npm. В целом, его цели высоки, и со временем он может существенно изменить инструментарий в экосистеме JavaScript.

  quick-lint-js

  Quick-lint-js — это инструмент линтинга JavaScript; он помогает нам найти ошибки в нашей программе JavaScript и дает нам мгновенную обратную связь по нашему коду, выделяя синтаксические ошибки, где это необходимо. Он минималистичен и позволяет нам использовать инструмент без пользовательских конфигураций или дополнительных плагинов. Quick-lint-js разработан как альтернатива ESLint, и есть определенные аспекты, в которых он превосходит ESLint, поэтому давайте рассмотрим некоторые из них.

  Преимущества quick-lint-js перед ESLint

  Производительность

  Согласно этим бенчмаркам, при определенных ограничениях, таких как задержка ввода, quick-lint-js более чем в 130 раз быстрее ESLint. Бенчмарки также помогают утверждать, что quick-lint-js является самым быстрым JavaScript-линтером и потребляет меньше энергии.

  Маленький дизайн, меньше функций

  Минималистичный дизайн quick-lint-js способствует его производительности, поскольку меньшая инфраструктура и меньшее количество компонентов снижают затраты на синтаксический разбор во время выполнения, а это значит, что quick-lint-js может быстрее дать ответ на синтаксические ошибки.

  Отсутствие конфигурации

  Он работает «из коробки» и не требует никаких пользовательских конфигурационных файлов, чтобы заставить его работать. Quick-lint-js — достойный выбор, особенно если вам важны высокая производительность, простота использования и меньший размер. Однако ESLint по-прежнему остается королем по поддержке сообщества, количеству поддерживаемых правил и возможности настройки/настройки.

  Standard JS

  Standard JS — это лонтер JavaScript, стилизатор кода и форматер. В нем применяется подход с нулевой конфигурацией, а не пользовательская конфигурация, используемая в ESLint через файл .eslintrc.json. Примером этого является тот факт, что пользователи должны отдавать предпочтение соглашениям сообщества, а не личному стилю.

  Преимущества стандартного JS

  Простота

  Standard JS предоставляет простой способ обеспечения качества кода в проекте, полностью устраняя возможность пользовательской настройки. Нет никакого конфигурационного файла .eslintrc.json, которым нужно управлять; Standard JS управляет всем за нас.

  Автоматическое форматирование кода

  Standard JS предоставляет простую команду для исправления непоследовательного кода, выполнив standard --fix. Standard JS стоит рассмотреть, если вы не против использовать соглашения и руководства по стилю, созданные сообществом. Однако, если вам нужна гибкость пользовательской конфигурации, основанной на предпочтениях команды/личных предпочтениях, лучше использовать ESLint.

  Putout

  Putout — это трансформатор кода, основанный на Babel и имеющий встроенную поддержку ESLint. Он очень настраиваемый и использует систему плагинов, то есть все правила доступны в виде плагинов. Это позволяет сохранить первоначальный API минимальным и дает разработчикам возможность расширять его, устанавливая только те правила, которые им нужны. Putout состоит из трех основных модулей: Parser (разбирает код в абстрактном синтаксическом дереве и затем распаковывает его обратно в код), Loader (обрабатывает плагин) и Runner (выполняет плагины). Он работает в основном с JavaScript, но также доступен для использования с другими языками, такими как TypeScript, YAML и Markdown. Давайте рассмотрим сравнение с ESLint и то, где мы можем захотеть использовать его вместо ESLint.

  Преимущества Putout перед ESLint

  Применение исправлений

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

  Минималистичный API

  Благодаря архитектуре plugin-first, исходный API максимально упрощен, что предотвращает ненужное раздувание и дает разработчику возможность выбора расширения. Некоторые правила плагинов также меньше, чем те, которые доступны в ESLint, например, правило отладчика. Мы также можем использовать Putout с ESLint, позволяя Putout обрабатывать преобразования кода, в то время как ESLint обрабатывает любое форматирование, нарушенное после преобразования кода. Мы можем использовать плагин eslint-plugin-putout, чтобы помочь в этой интеграции.

  JSHint

  JSHint был создан как более настраиваемая версия JSLint; он был выпущен в 2011 году Джоном Кроуфордом и, как и ESLint, помогает нам обнаружить синтаксические ошибки в программе на JavaScript. Поскольку JSLint является конфигурируемой версией JSLint, он предоставляет множество опций, которые могут быть отключены или включены через конфигурационный файл, что обеспечивает определенную гибкость. Каждая доступная опция также адекватно документирована. JSHint поставляется с поддержкой многих фреймворков, таких как JQuery, Mocha и Node.js, а также доступен в качестве плагина для многих популярных редакторов кода.

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

  Библиотеки для интеграции с ESLint

  Prettier

  Prettier — это форматировщик кода. Он обеспечивает поддержку экосистемы JavaScript и специфических других языков, таких как Markdown и JSON. Prettier берет наш код и перепечатывает его с нуля, принимая во внимание длину строки и оборачивая код там, где это необходимо. Он удаляет все стили по умолчанию и гарантирует, что отформатированный код соответствует единому стилю. Prettier обеспечивает единый стиль кода во всей кодовой базе, потому что он удаляет все оригинальные стили и перепечатывает разобранное AST (абстрактное синтаксическое дерево) со своими собственными правилами. В отличие от Rome, Prettier не является прямой альтернативой ESLint, но мы можем настроить Prettier для форматирования кода, используя при этом правила качества кода ESLint для поиска ошибок. Давайте рассмотрим, как интегрировать Prettier с ESLint.

  Интеграция Prettier с ESLint

  Должен признать, что в интернете можно найти множество руководств по настройке Prettier для работы с ESLint. Обычно это зависит от JavaScript-фреймворка и среды проекта, но мы рассмотрим простой подход к интеграции обоих в ванильное JavaScript-приложение. Первое, что нужно сделать, это установить ESLint и Prettier для вашего редактора кода. Для редактора VS Code мы можем найти расширения для ESLint и Prettier на рынке расширений VS Code. Далее нам нужно будет установить три пакета; введите в терминале следующую команду:

  npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier
  

  Пакет eslint-config-prettier отключает все правила ESLint, которые могут конфликтовать с Prettier. Это позволяет нам использовать конфигурации ESLint, не мешая им при работе с Prettier. Затем мы можем использовать пакет eslint-plugin-prettier для интеграции правил Prettier в правила ESLint. Наконец, мы должны установить правила Prettier в конфигурационном файле ESLint. Добавьте следующую конфигурацию в файл .eslintrc в корневом каталоге приложения:

  { 
   "extends": ["prettier"],
   "plugins": ["prettier"],
   "rules": { 
   "prettier/prettier": ["error"]
   },
  }
  

  После этого мы сможем использовать Prettier с ESLint в нашем проекте без проблем, и не возникнет никаких проблем, связанных с конфликтами правил между обеими библиотеками.

  Babel

  Babel — это компилятор JavaScript, в основном используемый для преобразования кода из более поздних версий ECMAScript (ES6+) в более ранние версии ECMAScript, поэтому он обеспечивает обратную совместимость для текущих и более старых браузеров или сред. Мы можем использовать Babel для преобразования синтаксиса, обеспечения полифилла для недоступных функций в целевой среде и преобразования исходного кода. Babel поддерживает новейшие возможности ECMAScript через синтаксические трансформаторы; они позволяют нам использовать новейший синтаксис, не дожидаясь поддержки браузера. Как и Prettier, Babel не является альтернативой ESLint, но может использовать функции линтинга ESLint для обеспечения нашего приложения гораздо более надежным набором функций.

  Интеграция Babel с ESLint

  Парсер и правила ESLint по умолчанию поддерживают только последний окончательный стандарт ECMAScript и не работают с экспериментальными функциями. Поэтому мы должны использовать библиотеку npm — @babel/eslint-parser — для запуска ESLint на действительном коде Babel. Давайте рассмотрим простой способ установки этой библиотеки в существующий проект Babel. Перейдите в терминал и выполните эту команду для установки библиотеки:

  npm install eslint @babel/eslint-parser --save-dev
  

  Когда установка завершится, перейдите в файл .eslintrc.js (обычно здесь мы настраиваем ESLint) и установите его в качестве предпочтительного парсера:

  module.exports = {
   parser: "@babel/eslint-parser",
  };
  

  Вуаля, теперь мы можем использовать ESLint для линтинга нашего кода Babel. В документации также есть руководство по расширенным настройкам.

  webpack

  Webpack — это статический модуль-сборщик для современных JavaScript-приложений — это означает, что он берет наш JavaScript-код и его зависимости и собирает их в один файл. Webpack определяет все зависимости (включая изображения и другие файлы, не относящиеся к коду) в приложении и строит граф зависимостей внутри приложения. Затем он превращает его в несколько пакетов, которые можно загрузить в браузер. По умолчанию Webpack не требует никакой конфигурации для работы, но он поддерживает пользовательские конфигурации для более сложных проектов. Давайте рассмотрим, как можно настроить webpack для работы с ESLint.

  Интеграция webpack с ESLint

  Webpack имеет надежную систему плагинов, которая позволяет сообществу предоставлять недоступные в других случаях функции. Чтобы упростить эту задачу, мы воспользуемся популярным плагином сообщества для интеграции webpack с ESLint. В существующем проекте webpack перейдите в терминал и выполните эту команду:

  npm install eslint-webpack-plugin --save-dev
  

  Когда установка завершится, добавьте эту опцию в существующий конфигурационный файл webpack:

  const ESLintPlugin = require('eslint-webpack-plugin');
  module.exports = {
   // ...
   plugins: [new ESLintPlugin(options)], // plugin options
   // ...
  };
  

  Конфигурация плагина также принимает определенные опции; мы можем найти все доступные опции здесь. Вот так просто интегрировать webpack с ESLint!

  Заключение

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