整合 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
使用 package.json 檔案初始化專案
npm
npm init -y
yarn
yarn init -y
pnpm
pnpm init -y
bun
bun init -y
將 eslint 套件安裝為依賴項（不是開發依賴項）
npm
npm install eslint
yarn
yarn add eslint
pnpm
pnpm add eslint
bun
bun add 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：檢查與修正檔案
要檢查檔案，請使用 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;
}
步驟 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 類別來檢查檔案並取得結果的要點。這些知識可以應用於建立自訂整合，例如程式碼編輯器插件，以針對程式碼品質提供即時回饋。
查看教學程式碼
您可以在這裡查看本教學的帶註解原始碼。