与 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
1
2

使用 package.json 文件初始化项目

npm init -y
1

将 eslint 包安装为依赖项（不是开发依赖项）

npm install eslint
1

在项目根目录中创建一个名为 example-eslint-integration.js 的新文件

touch example-eslint-integration.js
1

步骤 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,
  });
}
1
2
3
4
5
6
7
8
9
10
11
12

步骤 3：整理和修复文件

要整理文件，请使用 ESLint 实例的 lintFiles 方法。传递给 ESLint#lintFiles() 的 filePaths 参数可以是字符串或字符串数组，表示要整理的文件路径。文件路径可以是通配符或文件名。

静态方法 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

步骤 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

步骤 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 };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

以下是 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 };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

结论

在本教程中，我们介绍了使用 ESLint 类在项目中整理文件并检索结果的基本知识。这些知识可以应用于创建自定义集成（例如代码编辑器插件）以提供有关代码质量的实时反馈。

查看教程代码

您可以查看教程的带注释的源代码此处。

编辑此页面