typescript-eslint

使您能够将 TypeScript 与 ESLint 一起使用的工具

此包是您可以用来使用我们的工具与 ESLint 的主要入口点。

此包导出以下内容

name	description
config	用于创建类型安全扁平配置的实用程序函数
configs	我们的 eslint（扁平）配置
parser	我们的解析器
plugin	我们的插件

安装

npm

npm i typescript-eslint

Yarn

yarn add typescript-eslint

pnpm

pnpm add typescript-eslint

从“传统”配置设置迁移

如果您是从“传统”.eslintrc配置设置迁移过来的，您可能分别安装了我们的插件和解析器。此包包含这些作为依赖项，因此您可以自由卸载本地引用。

npm

npm un @typescript-eslint/parser @typescript-eslint/eslint-plugin

Yarn

yarn remove @typescript-eslint/parser @typescript-eslint/eslint-plugin

pnpm

pnpm remove @typescript-eslint/parser @typescript-eslint/eslint-plugin

有关从“传统”配置设置迁移的更多信息，请参阅 ESLint 的配置迁移指南。

用法

此包最简单的用法是

eslint.config.js

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
);

此配置文件导出一个扁平配置，它同时启用了 核心 eslint 推荐配置 和 我们的推荐配置。

有关tseslint.config函数的更多信息，请参阅下面的config(...)。

高级用法

手动配置我们的插件和解析器

您可以通过此包在您的配置中声明我们的插件和解析器，例如

eslint.config.js

// @ts-check

import eslint from '@eslint/js';
import jestPlugin from 'eslint-plugin-jest';
import tseslint from 'typescript-eslint';

export default tseslint.config({
  plugins: {
    '@typescript-eslint': tseslint.plugin,
  },
  languageOptions: {
    parser: tseslint.parser,
    parserOptions: {
      project: true,
    },
  },
  rules: {
    '@typescript-eslint/no-unsafe-argument': 'error',
    '@typescript-eslint/no-unsafe-assignment': 'error',
    '@typescript-eslint/no-unsafe-call': 'error',
    '@typescript-eslint/no-unsafe-member-access': 'error',
    '@typescript-eslint/no-unsafe-return': 'error',
  },
});

警告

我们强烈建议使用上面所示的命名空间@typescript-eslint声明我们的插件。如果您使用我们的共享配置，这就是它们使用的命名空间。多年来，这是我们插件的标准命名空间，也是用户最熟悉的命名空间。

您可以选择不同的命名空间 - 但请注意，目前 扁平配置允许在多个命名空间下注册、配置同一个插件，并产生重复的报告。

与其他插件一起使用

下面是一个更复杂的示例，说明您如何将我们的工具与扁平配置一起使用。此配置

• 忽略build/dist文件夹的代码检查
• 启用我们的插件、解析器和类型感知代码检查，以及一些我们常用的类型感知规则
• 禁用 JS 文件的类型感知代码检查
• 仅在测试文件上启用推荐的eslint-plugin-jest规则

eslint.config.js

// @ts-check

import eslint from '@eslint/js';
import jestPlugin from 'eslint-plugin-jest';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  {
    // config with just ignores is the replacement for `.eslintignore`
    ignores: ['**/build/**', '**/dist/**', 'src/some/file/to/ignore.ts'],
  },
  eslint.configs.recommended,
  {
    plugins: {
      '@typescript-eslint': tseslint.plugin,
      jest: jestPlugin,
    },
    languageOptions: {
      parser: tseslint.parser,
      parserOptions: {
        project: true,
      },
    },
    rules: {
      '@typescript-eslint/no-unsafe-argument': 'error',
      '@typescript-eslint/no-unsafe-assignment': 'error',
      '@typescript-eslint/no-unsafe-call': 'error',
      '@typescript-eslint/no-unsafe-member-access': 'error',
      '@typescript-eslint/no-unsafe-return': 'error',
    },
  },
  {
    // disable type-aware linting on JS files
    files: ['**/*.js'],
    ...tseslint.configs.disableTypeChecked,
  },
  {
    // enable jest rules on test files
    files: ['test/**'],
    ...jestPlugin.configs['flat/recommended'],
  },
);

config(...)

config 函数是一个可变参数 恒等函数，这意味着它是一个带有扩展参数的函数，可以接受任意数量的扁平化配置对象，并返回未修改的对象。它作为一种快速简便的方式为您的扁平化配置文件提供类型，而无需使用 JSDoc 类型注释。

通过使用此函数，您将获得所有配置属性的自动完成和文档，以及 TypeScript 错误（如果您提供了无效的值）。

使用助手

eslint.config.js

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    /*... */
  },
  // ...
);

不使用助手

eslint.config.js

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

/** @type {import('@typescript-eslint/utils').TSESLint.FlatConfig.ConfigFile} */
export default [
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  {
    /*... */
  },
  // ...
];

注意

我们强烈建议使用此工具来改善配置编写体验，但这完全是可选的。如果您选择不使用它，您将失去编辑器自动完成和配置文件的类型检查，但除此之外，它不会影响您使用我们工具的能力。

扁平化配置 extends

tseslint.config 实用程序函数还添加了对扁平化配置对象上的 extends 属性的处理。这使您可以更轻松地为特定文件模式扩展共享配置，同时还可以覆盖这些配置提供的规则/选项

export default tseslint.config({
  files: ['**/*.ts'],
  extends: [
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
  ],
  rules: {
    '@typescript-eslint/array-type': 'error',
    '@typescript-eslint/consistent-type-imports': 'error',
  },
});

// is the same as writing

export default [
  ...[
    eslint.configs.recommended,
    ...tseslint.configs.recommended,
  ].map(conf => ({
    ...conf,
    files: ['**/*.ts'],
  })),
  {
    files: ['**/*.ts'],
    rules: {
      '@typescript-eslint/array-type': 'error',
      '@typescript-eslint/consistent-type-imports': 'error',
    },
  },
];

我们发现，在编写 ESLint 配置时，这是一种非常常见的操作，这就是我们提供此便利属性的原因。

例如，在具有类型感知代码检查的代码库中，这样的配置对象是禁用 JS 文件上的 TS 特定代码检查设置的一种非常常见的方式

export default tseslint.config([
  {
    files: ['**/*.js'],
    extends: [tseslint.configs.disableTypeChecked],
    rules: {
      // turn off other type-aware rules
      'deprecation/deprecation': 'off',
      '@typescript-eslint/internal/no-poorly-typed-ts-props': 'off',

      // turn off rules that don't apply to JS code
      '@typescript-eslint/explicit-function-return-type': 'off',
    },
  },
]);