Как разработчики, мы всегда задаемся вопросом, как работают плагины ESLint и насколько легко мы можем создать свои собственные. Но у нас никогда не бывает времени, чтобы ознакомиться со сложной документацией и учебными пособиями. Need of the hour - это простое руководство для самостоятельного создания собственного плагина ESList.

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

Спасибо Apurva Jain за руководство, помощь и мотивацию для написания этой статьи.

Подключаемый модуль ESLint - это инструмент, созданный для разработчиков, который помогает определять шаблоны, обнаруженные в коде ECMAScript / JavaScript, делая код более согласованным и свободным от ошибок.

Например:

Создать плагин ESLint почти так же просто, как его использовать, но зачем нужно создавать плагины ESLint?

  1. Он заставляет разработчиков следовать определенному набору правил, определенных плагином.
  2. Это может быть полезно в таких случаях, когда разработчики следуют стандарту пользовательского кода для проекта.
  3. Это облегчает жизнь разработчикам, указывая им предупреждениями о предупреждениях или ошибках для набора рекомендаций по коду.

Многие стандартные правила предопределены в ESLint Core, поэтому нет необходимости писать плагины для обычных правил.

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

В этой статье давайте создадим настраиваемое правило ESLint, которое выдает ошибку / предупреждение при использовании строковых литералов вместо литералов шаблона.

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

Шаги по созданию настраиваемого плагина ESLint

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

Приступим!

1. Прежде всего, создайте папку проекта, в которой вы хотите разместить свой собственный плагин ESLint. Назовем его ПОЛЬЗОВАТЕЛЬСКИЙ ПЛАГИН.

2. Внутри папки проекта создайте другую папку с именем my-eslint-rules, в которой вы должны написать собственное правило ESLint.

3. После создания папки перейдите в нее и создайте пакет узла, набрав команду npm init - yes в терминале . Мы считаем, что npm предварительно -установлен в системе, в противном случае установите npm.

4. В package.json отредактируйте имя пакета: “name”: “eslint-plugin-<plugin-name>”

5. Создайте файл с именем index.js на том же уровне, который экспортирует объект правил с настраиваемым правилом.

Использование узлов AST

Возможно, вам будет полезно узнать больше о типах узлов AST при написании собственного плагина ESLint.

Инструмент AST Explorer предоставляет платформу для запуска и тестирования пользовательских правил ESLint. AST означает абстрактное синтаксическое дерево / синтаксическое дерево, которое представляет собой представление кода javascript в формате анализируемого дерева. Вы также можете использовать этот инструмент для определения типа узла AST, написав образец кода.

  1. Функция для создания правила принимает объект Контекст, который содержит дополнительные функции, которые помогают правилам выполнять свою работу.
  2. Он содержит функцию под названием «отчет», которую мы будем использовать для выдачи предупреждений / ошибок (указываемых в конфигурации).
  3. Кроме того, мы можем при желании передать строку кода редакторам, чтобы точно определить место ошибки, или, при необходимости, передача узла ESTree заставляет редактор выдавать предупреждение / ошибку при первом появлении узла.

Составив правило в проводнике и убедившись, что оно фиксирует условия правила, переместите логику обратно в index.js пакета плагина, и на этом плагин завершен.

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

Тестирование настраиваемого плагина ESLint

Для тестирования настраиваемого плагина ESLint сначала настройте проект узла на корневом уровне. Назовем его узел-приложение.

  1. После того, как проект настроен, перейдите в него и выполните команду npm init - yes, чтобы сгенерировать пакет npm.
  2. Затем создайте файл index.js, содержащий функцию с некоторыми строковыми литералами, чтобы проверить созданный нами плагин и сохранить его.
  3. Установите ESLint, выполнив команду npm i eslint - save-dev
  4. Чтобы проект узла понимал и использовал плагин ESLint, создайте файл конфигурации с именем .eslintrc.
  5. Если ваш редактор кода не настроен на отображение ошибок ESLint сам по себе, выполните двоичный файл ESLint с терминала, передав файл javascript в качестве аргумента для проверки соблюдения правил, используя следующую команду: ./node_modules/.bin/ eslint index.js

Вуаля! Это все, что нужно сделать, чтобы увидеть предупреждение / ошибку ESLint после ее запуска в терминале, если вы используете строковый литерал.

ПРИМЕЧАНИЕ. Важной частью использования подключаемых модулей в проекте является файл конфигурации .eslintrc. Синтаксис для указания правил из плагина - <plugin-name>/<rule-name>: [warn/error].

Обязательно ознакомьтесь с моим плагином пользовательского шаблона и запустите его локально: https://github.com/Meghan1202/custom-eslint

Заключение

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

Идите вперед - определите свои соглашения о кодировании и используйте ESLint, чтобы убедиться, что все им следуют 😎

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