如何在 TypeScript 中使用 ESLint-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，代码的规范性和可读性是十分重要的。为了实现这一点，我们可以使用 ESLint 工具来对代码进行静态检查和代码规范的校验。而对于 TypeScript 项目，我们也可以使用 ESLint 工具来对代码进行检查和规范校验。本文将介绍如何在 TypeScript 项目中使用 ESLint 工具进行代码检查和规范校验。

安装和配置

首先需要确保已经安装了 TypeScript 和 ESLint 工具，可以使用以下命令进行安装：

npm install typescript eslint --save-dev

在项目中安装好 TypeScript 和 ESLint 之后，我们需要配置 ESLint 工具，可以创建一个 .eslintrc.js 文件，并在其中添加以下配置项：

// www.javascriptcn.com code example
module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  plugins: ['@typescript-eslint', 'prettier'],
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    'prettier/prettier': ['error'],
  },
  env: {
    browser: true,
    node: true,
  },
};

其中，parser 表示使用 @typescript-eslint/parser 来解析 TypeScript 代码；extends 表示使用一些预设的规则和插件，如 @typescript-eslint/recommended 和 prettier/@typescript-eslint；plugins 表示使用一些插件，如 @typescript-eslint 和 prettier；rules 表示一些自定义的规则，例如关闭 @typescript-eslint/explicit-function-return-type 和 @typescript-eslint/no-explicit-any 规则，并启用 prettier/prettier 规则；env 表示代码运行环境，如浏览器和 Node.js 等。

配置 VS Code 编辑器

在安装和配置 ESLint 工具之后，我们还需要配置 VS Code 编辑器来支持 ESLint 工具的检查。我们可以通过以下步骤来配置 VS Code 编辑器：

安装 ESLint 插件：在 VS Code 编辑器中搜索并安装 ESLint 插件；
在 .vscode/settings.json 文件中添加以下配置项：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript"]
}

其中，editor.codeActionsOnSave 表示在保存文件时自动修复 ESLint 工具检查出的错误，并且 eslint.validate 表示验证的文件类型，包括 JavaScript 和 TypeScript。

示例代码

以下是一个 TypeScript 代码的示例，可以用于测试 ESLint 工具的检查和规范校验：

// www.javascriptcn.com code example
interface User {
  name: string;
  age: number;
}

function sayHello(user: User) {
  console.log(`Hello, ${user.name}!`);
}

const user = {
  name: 'Jack',
  age: 18,
};

console.log(sayHello(user));

以上代码中，interface 表示定义一个用户对象类型，function 表示一个函数参数接收用户对象，并在控制台输出欢迎语句，const 表示创建一个用户对象，并使用该对象调用函数打印欢迎语句。

在此基础上，我们可以通过运行以下命令进行 ESLint 的代码检查和规范校验：

npx eslint ./src/**/*.ts

如果代码中存在 ESLint 工具定义的错误或警告，则会在控制台输出相应的错误或警告信息，并且可以使用 VS Code 编辑器的自动修复功能来修复部分的错误和警告。代码检查和规范校验可以让我们更好地维护代码质量，从而提高代码的可读性和可维护性。

结语

在 TypeScript 项目中使用 ESLint 工具可以帮助我们对代码进行静态检查和代码规范的校验，并且可以通过自定义规则来满足项目中的具体需求。本文介绍了如何在 TypeScript 项目中使用 ESLint 工具进行代码检查和规范校验，并提供了示例代码和配置文件，希望可以对读者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6a9d9a941bf7134c72e28

如何在 TypeScript 中使用 ESLint

安装和配置

配置 VS Code 编辑器

示例代码

结语

接着读