0Pricing
TypeScript Academy · 课时

ESLint 与 @typescript-eslint

使用 @typescript-eslint 插件配置 ESLint，以发现类型相关问题并保持统一的代码风格。

ESLint 与 @typescript-eslint 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 3 节课。

简介

目标：在 TypeScript 项目中结合使用 ESLint 和 @typescript-eslint，发现错误并统一代码风格。

安装

安装 ESLint 核心包，以及 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin。

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

配置

配置 ESLint 使用 TS 解析器和推荐规则。根据需要添加项目专用规则。

// .eslintrc.js
module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  rules: {
    "@typescript-eslint/no-unused-vars": "warn"
  }
};

代码检查示例

使用支持 TS 的解析器时，ESLint 会标记缺少参数、未使用的变量和风格问题。

// demo.ts
function greet(name: string) {
  console.log("Hello", name)
}

greet("Ada")

greet() // ESLint error: missing arg

类型感知规则

在 parserOptions 中关联 tsconfig.json，以启用需要类型信息的规则，例如检测未处理的 Promise。

// tsconfig.json must be linked for type-aware rules
{
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

// Example: no-floating-promises
async function f() {
  fetch("/api") // ESLint error: unhandled promise
}

运行代码检查

对代码库运行 ESLint。添加 --fix 可自动应用安全的修复。

npx eslint "src/**/*.{ts,tsx}" --fix

问题

快速检查：为什么除了 ESLint 核心功能外，还要使用 @typescript-eslint？

回顾

回顾：安装 ESLint 和 @typescript-eslint，配置解析器，扩展推荐规则，并使用类型感知规则运行代码检查工具，以保持代码整洁。

常见问题解答

「ESLint 与 @typescript-eslint」课时是免费的吗？

是的 — 「ESLint 与 @typescript-eslint」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 3 节课。

「ESLint 与 @typescript-eslint」这节课中我会学到什么？

使用 @typescript-eslint 插件配置 ESLint，以发现类型相关问题并保持统一的代码风格。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。

「ESLint 与 @typescript-eslint」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. ESLint 与 @typescript-eslint
  2. Prettier 集成与规则冲突
  3. 常见的实际规则集
← 返回 TypeScript Academy