整合 Node.js API 教學

本指南將引導您整合 ESLint 類別，以檢查檔案並檢索結果，這對於建立與其他專案的整合非常有用。

為何建立整合？

如果您正在建立開發人員工具，例如以下工具，您可能需要建立 ESLint 整合

程式碼編輯器和 IDE：將 ESLint 與程式碼編輯器和 IDE 整合，可以即時提供程式碼品質回饋，並在您輸入時自動醒目提示潛在問題。許多編輯器已經有可用的 ESLint 外掛程式，但如果現有的外掛程式不符合您的特定需求，您可能需要建立自訂整合。
自訂 linter 工具：如果您正在建立結合多個 linter 或新增特定功能的自訂 linter 工具，您可能需要將 ESLint 整合到您的工具中，以提供 JavaScript 程式碼檢查功能。
程式碼審閱工具：將 ESLint 與程式碼審閱工具整合，可以協助自動化識別程式碼庫中潛在問題的過程。
學習平台：如果您正在開發學習平台或程式碼教學，整合 ESLint 可以為使用者在學習 JavaScript 時提供即時回饋，協助他們提升程式碼撰寫技巧並學習最佳實務。
開發人員工具整合：如果您正在建立或擴充開發人員工具，例如 bundler 或測試框架，您可能需要整合 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 引數可以是字串或字串陣列，代表您要檢查的檔案路徑。檔案路徑可以是 glob 或檔案名稱。

靜態方法 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 類別來檢查檔案並檢索專案中結果的基本知識。此知識可以應用於建立自訂整合，例如程式碼編輯器外掛程式，以即時提供程式碼品質回饋。

檢視教學程式碼

您可以在此處檢視教學的註解原始程式碼。

編輯此頁面