Интеграция с Node.js API: Учебник

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

Зачем создавать интеграцию?

Возможно, вам потребуется создать интеграцию ESLint, если вы создаёте инструменты для разработчиков, такие как:

• Редакторы кода и IDE: Интеграция ESLint с редакторами кода и IDE может обеспечить обратную связь в реальном времени о качестве кода и автоматически выделять потенциальные проблемы по мере набора текста. Многие редакторы уже имеют доступные плагины ESLint, но вам может потребоваться создать пользовательскую интеграцию, если существующие плагины не соответствуют вашим конкретным требованиям.

• Пользовательские инструменты проверки кода: Если вы создаёте собственный инструмент проверки кода, который объединяет несколько инструментов проверки или добавляет специфическую функциональность, вам может потребоваться интегрировать ESLint в свой инструмент, чтобы обеспечить возможности проверки JavaScript.

• Инструменты для проверки кода: Интеграция ESLint с инструментами для проверки кода может помочь автоматизировать процесс выявления потенциальных проблем в кодовой базе.

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

• Интеграция с инструментами для разработчиков: Если вы создаёте или расширяете инструмент для разработчиков, например, сборщик или фреймворк для тестирования, вам может потребоваться интегрировать ESLint, чтобы обеспечить возможности проверки кода. Вы можете интегрировать ESLint непосредственно в инструмент или как плагин.

Что вы будете создавать

В этом руководстве вы создадите простой проект Node.js, использующий класс ESLint для проверки файлов на соответствие стилю и получения результатов.

Требования

Предполагается, что вы знакомы с JavaScript и Node.js.

Для выполнения этого руководства вам потребуется:

• Node.js (^18.18.0, ^20.9.0, или >=21.1.0)
• npm
• Текстовый редактор

Шаг 1: Настройка

Сначала создайте новую директорию проекта:

mkdir eslint-integration
cd eslint-integration

Инициализируйте проект с помощью файла package.json:

npm init -y

Установите пакет eslint как зависимость (не как зависимость разработки):

npm install eslint

Создайте новый файл с именем example-eslint-integration.js в корне проекта:

touch example-eslint-integration.js

Шаг 2: Импорт и настройка экземпляра ESLint

Импортируйте класс ESLint из пакета eslint и создайте новый экземпляр.

Вы можете настроить конфигурацию ESLint, передав объект опций конструктору ESLint:

// example-eslint-integration.js

const { ESLint } = require("eslint");

// Create an instance of ESLint with the configuration passed to the function
function createESLintInstance(overrideConfig) {
  return new ESLint({
    overrideConfigFile: true,
    overrideConfig,
    fix: true,
  });
}

Шаг 3: Проверка и исправление файлов

Для проверки файла используйте метод lintFiles экземпляра ESLint. Аргумент filePaths , переданный в ESLint#lintFiles(), может быть строкой или массивом строк, представляющим путь(и) к файлам, которые нужно проверить. Пути к файлам могут быть шаблонами или именами файлов.

Статический метод ESLint.outputFixes() принимает результаты проверки из вызова ESLint#lintFiles(), а затем записывает исправленный код обратно в исходные файлы.

// example-eslint-integration.js

// ... previous step's code to instantiate the ESLint instance

// Lint the specified files and return the results
async function lintAndFix(eslint, filePaths) {
  const results = await eslint.lintFiles(filePaths);

  // Apply automatic fixes and output fixed code
  await ESLint.outputFixes(results);

  return results;
}

Шаг 4: Вывод результатов

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

В этом примере мы просто выведем результаты в консоль:

// example-eslint-integration.js

// ... previous step's code to instantiate the ESLint instance
// and get linting results.

// Log results to console if there are any problems
function outputLintingResults(results) {
  // Identify the number of problems found
  const problems = results.reduce(
    (acc, result) => acc + result.errorCount + result.warningCount,
    0,
  );

  if (problems > 0) {
    console.log("Linting errors found!");
    console.log(results);
  } else {
    console.log("No linting errors found.");
  }
  return results;
}

Шаг 5: Объединение всех элементов

Объедините вышеуказанные функции в новую функцию с именем lintFiles. Эта функция будет основным входным точкой вашей интеграции:

// example-eslint-integration.js

// Put previous functions all together
async function lintFiles(filePaths) {
  // The ESLint configuration. Alternatively, you could load the configuration
  // from a .eslintrc file or just use the default config.
  const overrideConfig = {
    languageOptions: {
      ecmaVersion: 2018,
      sourceType: "commonjs",
    },
    rules: {
      "no-console": "error",
      "no-unused-vars": "warn",
    },
  };

  const eslint = createESLintInstance(overrideConfig);
  const results = await lintAndFix(eslint, filePaths);
  return outputLintingResults(results);
}

// Export integration
module.exports = { lintFiles };

Вот полный пример кода для example-eslint-integration.js:

const { ESLint } = require("eslint");

// Create an instance of ESLint with the configuration passed to the function
function createESLintInstance(overrideConfig) {
  return new ESLint({
    overrideConfigFile: true,
    overrideConfig,
    fix: true,
  });
}

// Lint the specified files and return the results
async function lintAndFix(eslint, filePaths) {
  const results = await eslint.lintFiles(filePaths);

  // Apply automatic fixes and output fixed code
  await ESLint.outputFixes(results);

  return results;
}

// Log results to console if there are any problems
function outputLintingResults(results) {
  // Identify the number of problems found
  const problems = results.reduce(
    (acc, result) => acc + result.errorCount + result.warningCount,
    0,
  );

  if (problems > 0) {
    console.log("Linting errors found!");
    console.log(results);
  } else {
    console.log("No linting errors found.");
  }
  return results;
}

// Put previous functions all together
async function lintFiles(filePaths) {
  // The ESLint configuration. Alternatively, you could load the configuration
  // from an eslint.config.js file or just use the default config.
  const overrideConfig = {
    languageOptions: {
      ecmaVersion: 2018,
      sourceType: "commonjs",
    },
    rules: {
      "no-console": "error",
      "no-unused-vars": "warn",
    },
  };

  const eslint = createESLintInstance(overrideConfig);
  const results = await lintAndFix(eslint, filePaths);
  return outputLintingResults(results);
}

// Export integration
module.exports = { lintFiles };

Заключение

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

Просмотреть код учебника

Вы можете просмотреть анотированный исходный код учебника здесь.