Skip to main content

旧版 ESLint 设置

快速入门​

¥Quickstart

这些步骤将使你尽快在 TypeScript 代码上运行符合我们推荐规则的 ESLint。

¥These steps will get you running ESLint with our recommended rules on your TypeScript code as quickly as possible.

注意

本页适用于 ESLint 的旧配置格式。参见 入门 了解 ESLint 的新 "扁平" 配置格式。

¥This page is for ESLint's legacy config format. See Getting Started for ESLint's new "flat" configuration format.

步骤 1：安装​

¥Step 1: Installation

首先，安装 ESLint、TypeScript 和此插件所需的软件包：

¥First, install the required packages for ESLint, TypeScript, and this plugin:

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

步骤 2：配置​

¥Step 2: Configuration

接下来，在项目的根目录中创建一个 .eslintrc.cjs 配置文件，并使用以下内容填充它：

¥Next, create a .eslintrc.cjs config file in the root of your project, and populate it with the following:

.eslintrc.cjs
/* eslint-env node */
module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
};
信息

如果你的项目不使用 ESM，则将文件命名为 .eslintrc.js 就可以了。请参阅 ESLint 的配置文件文档 以了解更多信息。

¥If your project doesn't use ESM, naming the file as .eslintrc.js is fine. See ESLint's Configuration Files docs for more info.

步骤 3：运行 ESLint​

¥Step 3: Running ESLint

打开项目根目录的终端并运行以下命令：

¥Open a terminal to the root of your project and run the following command:

npx eslint .

ESLint 将检查当前文件夹中的所有 TypeScript 兼容文件，并将结果输出到你的终端。

¥ESLint will lint all TypeScript compatible files within the current folder, and will output the results to your terminal.

详情​

¥Details

  • parser: '@typescript-eslint/parser' 告诉 ESLint 使用你安装的 @typescript-eslint/parser 包来解析你的源文件。

    ¥parser: '@typescript-eslint/parser' tells ESLint to use the @typescript-eslint/parser package you installed to parse your source files.

    • 这是必需的，否则 ESLint 在尝试像常规 JavaScript 一样解析 TypeScript 代码时会抛出错误。

      ¥This is required, or else ESLint will throw errors as it tries to parse TypeScript code as if it were regular JavaScript.

  • plugins: ['@typescript-eslint'] 告诉 ESLint 将 @typescript-eslint/eslint-plugin 包作为插件加载。

    ¥plugins: ['@typescript-eslint'] tells ESLint to load the @typescript-eslint/eslint-plugin package as a plugin.

    • 这允许你在代码库中使用 typescript-eslint 的规则。

      ¥This allows you to use typescript-eslint's rules within your codebase.

  • extends: [ ... ] 告诉 ESLint 你的配置扩展了给定的配置。

    ¥extends: [ ... ] tells ESLint that your config extends the given configurations.

    • eslint:recommended 是 ESLint 的内置 "recommended" 配置 - 它打开了一组小而合理的规则，这些规则针对众所周知的最佳实践进行 lint。

      ¥eslint:recommended is ESLint's inbuilt "recommended" config - it turns on a small, sensible set of rules which lint for well-known best-practices.

    • plugin:@typescript-eslint/recommended 是我们的 "recommended" 配置 - 它与 eslint:recommended 类似，只是它从我们的插件中打开了 TypeScript 特定的规则。

      ¥plugin:@typescript-eslint/recommended is our "recommended" config - it's similar to eslint:recommended, except it turns on TypeScript-specific rules from our plugin.

  • root: true 是一种通常很好的 ESLint 实践，表示此文件是项目使用的根级文件，ESLint 不应在此目录之外搜索配置文件。

    ¥root: true is a generally good ESLint practice to indicate this file is the root-level one used by the project and ESLint should not search beyond this directory for config files.

下一步​

¥Next Steps

如果你在运行此功能时遇到问题，请查看我们的 故障排除和常见问题解答。

¥If you're having problems getting this working, please have a look at our Troubleshooting & FAQs.

其他配置​

¥Additional Configs

我们建议你考虑启用以下两个配置：

¥We recommend you consider enabling the following two configs:

  • strict：recommended 的超集，包含更多有态度的规则，这些规则也可能捕获错误。

    ¥strict: a superset of recommended that includes more opinionated rules which may also catch bugs.

  • stylistic：强制一致样式的附加规则，不会显著捕获错误或更改逻辑。

    ¥stylistic: additional rules that enforce consistent styling without significantly catching bugs or changing logic.

.eslintrc.cjs
/* eslint-env node */
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/strict',
    'plugin:@typescript-eslint/stylistic',
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
};

你可以在我们的 共享配置文档 中阅读有关这些内容的更多信息。

¥You can read more about these in our shared configurations docs.

类型化检查​

¥Typed Linting

我们还提供大量强大的规则，利用 TypeScript 类型信息的强大功能。访问下一页获取类型化规则设置指南。

¥We also provide a plethora of powerful rules that utilize the power of TypeScript's type information. Visit the next page for a typed rules setup guide.

文档资源​

¥Documentation Resources