让 ESLint 来约束你的 TypeScript 代码：配置与规则集介绍-TypeScript入门指南

当前位置:　首页>> 技术小册>> TypeScript入门指南

TypeScript提供了类型系统、类、接口等特性，可以帮助我们更好地管理和维护代码。但是 TypeScript 本身并不能完全解决代码质量问题，例如代码风格、变量命名、代码复杂度等问题。这时候就需要 ESLint 来进行代码检查和规范。

-----------------------------

ESLint 是一个插件化的 JavaScript 代码检查工具，它可以根据配置文件和插件来定义规则集，检查代码的错误、风格和潜在问题，帮助我们提高代码质量和可读性。

在使用 TypeScript 时，我们可以使用 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 插件来扩展 ESLint 的功能，从而实现对 TypeScript 代码的检查和规范。

**配置**

在使用 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 插件之前，我们需要先安装它们：

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

```

然后在 .eslintrc.js 配置文件中添加以下内容：

```javascript
module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: ['plugin:@typescript-eslint/recommended'],
};

```

这里我们配置了 parser 为 @typescript-eslint/parser，表示使用 TypeScript 解析器，plugins 为 @typescript-eslint，表示使用 TypeScript 插件，extends 为 plugin:@typescript-eslint/recommended，表示使用 @typescript-eslint 推荐的规则集。

同时，我们可以添加自定义的规则集，例如：

```javascript
module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
  rules: {
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
  },
};

```

这里我们添加了 prettier 规则集，同时禁用了 @typescript-eslint/explicit-module-boundary-types 规则和修改了 @typescript-eslint/no-unused-vars 规则，忽略了参数名称为 _ 开头的未使用变量。

**规则集**

ESLint 和 @typescript-eslint/eslint-plugin 支持大量的规则集，涵盖了代码风格、错误检查、最佳实践等方面。下面列举一些常用的规则集及其用法。

@typescript-eslint/no-explicit-any
禁止使用 any 类型，any 类型会使代码丧失类型安全性，增加调试难度。例如：

```javascript
function foo(arg: any) {
  // ...
}

```

将会被报错。

@typescript-eslint/explicit-function-return-type
要求函数返回值的类型必须显式声明，避免隐式类型推断带来的错误和混乱。例如：

```javascript
function sum(a: number, b: number): number {
  return a + b;
}

```

会被要求加上返回类型。

@typescript-eslint/no-unused-vars
禁止定义未使用的变量，避免代码冗余和浪费。例如：

```javascript
const foo = 'bar';

```

会被报错。

@typescript-eslint/no-use-before-define
禁止在变量定义之前使用变量，避免出现不可预期的行为。例如：

```javascript
foo();
const foo = () => {
  // ...
}

```

将会被报错。

@typescript-eslint/no-empty-interface
禁止定义空的接口，避免出现无意义的代码。例如：

```javascript
interface IEmpty {}

```

会被报错。

@typescript-eslint/no-var-requires
禁止使用 require 语句引入模块，而是应该使用 import 语句。例如：

```javascript
const module = require('./module');

```

会被报错。

@typescript-eslint/member-delimiter-style
要求对象和接口的成员之间必须有分号分隔，或者没有分号分隔。例如：

```javascript
interface IMyInterface {
  foo: string;
  bar(): void;
}

```
会被要求加上分号。

@typescript-eslint/indent
要求缩进使用指定的空格数，避免出现混乱的缩进。例如：

```javascript
function foo() {
∙∙console.log('foo');
}

```

会被要求使用 2 个空格缩进。

示例
下面给出一个 TypeScript 代码示例：

```javascript
interface IMyInterface {
  foo: string;
  bar(): void;
}

class MyClass implements IMyInterface {
  foo = 'bar';

public bar() {
    console.log(this.foo);
  }
}

const myObject: IMyInterface = new MyClass();

myObject.bar();

```

运行 ESLint 可以发现没有报错和警告，符合我们的规范要求。

**小结**
ESLint 可以帮助我们在 TypeScript 代码中检查和规范代码风格、错误检查、最佳实践等方面，帮助我们提高代码质量和可读性。使用 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin 插件，可以扩展 ESLint 的功能，使其支持 TypeScript 代码的检查和规范。同时，我们可以根据自己的需求，添加或修改规则集，以符合项目的规范要求。

该分类下的相关小册推荐：

TypeScript 全面进阶指南

剑指TypeScript

TypeScript开发实战