ESLint + TypeScript 插件：TypeScript 完整指南及示例

引言：什么是 ESLint + TypeScript 插件，为什么需要它们？

\n\n

在现代 Web 开发中，TypeScript 已成为创建可扩展且可靠应用程序的事实标准。然而，即使是最严格的 TypeScript 编译器也无法捕捉到所有在编写代码过程中可能出现的逻辑错误、风格不一致或潜在缺陷。这时，ESLint 就派上了用场——它是一个强大的 JavaScript 代码检查工具，通过专门的插件可以适配 TypeScript。

\n\n

ESLint + TypeScript 插件 并不是传统意义上的独立库（例如 Lodash），而更像是一个工具生态系统。核心包 eslint 负责代码分析，而插件 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser 则增加了对 TypeScript 语法的支持，并提供了数百条 TypeScript 特有的规则。

\n\n

为什么需要它？

\n

\n
• 早期发现错误： 代码检查工具可以发现 TypeScript 编译器可能遗漏的潜在问题（例如未使用的变量、Promise 的错误使用、非语法层面的类型问题）。
\n
• 统一的代码风格： 在开发团队中，代码检查工具确保遵循统一的代码风格（缩进、引号、分号），使代码更具可读性和可预测性。
\n
• 自动修复： 许多 ESLint 规则支持自动修复（--fix），可以自动格式化代码并修复简单错误。
\n
• 与 IDE 集成： 大多数现代代码编辑器（VS Code、WebStorm）都内置了对 ESLint 的支持，可以在编写代码时直接看到错误和警告。
\n

\n\n

在 pythonlib.ru 网站上，我们致力于提供最有用的指南。本文将成为您配置和使用 ESLint 与 TypeScript 的全面参考手册。

\n\n

安装 ESLint 和 TypeScript 插件

\n\n

通过包管理器 npm（或 yarn、pnpm）进行安装。假设您已经有一个包含 package.json 文件的项目，并且已经安装了 TypeScript（typescript）。

\n\n

在项目根目录的终端中执行：

\n\n

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

\n\n

我们来分析一下安装了什么：

\n

\n
• eslint — 代码检查工具的核心。
\n
• @typescript-eslint/parser — 解析器，使 ESLint 能够理解 TypeScript 语法（包括泛型、装饰器、类型等）。
\n
• @typescript-eslint/eslint-plugin — 插件，包含一组 TypeScript 特有的规则（例如 @typescript-eslint/no-unused-vars 替代标准的 no-unused-vars）。
\n

\n\n

额外推荐：

\n

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

\n

这将允许 ESLint 与 Prettier（代码格式化工具）集成，并避免它们之间的冲突。

\n\n

快速入门：配置和首次运行

\n\n

安装后，需要创建一个配置文件。最简单的方法是使用 ESLint 内置的向导生成：

\n\n

npx eslint --init

\n\n

系统会询问您几个问题。请选择：

\n

\n
• 您希望如何使用 ESLint？ — To check syntax, find problems, and enforce code style
\n
• 您使用哪种模块格式？ — JavaScript modules (import/export)
\n
• 您使用哪个框架？ — None of these