从 TSLint 迁移到 ESLint

TSLint 过去是推荐的 linter,但现在 TSLint 已被弃用,ESLint 正在接管其职责。本文将帮助您从 TSLint 迁移到 ESLint。

ESLint:安装

您需要安装 ESLint。由于 ESLint 原生不支持 TypeScript,因此您还需要安装 eslint-typescript-support

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

或者如果您使用 yarn 作为包管理器

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

上述命令添加了 ESLint,添加了一个使 ESLint 能够理解 TypeScript 的解析器,并添加了一些特定于 TypeScript 的规则。

现在,为了简化实际的迁移过程,请运行 tslint-to-eslint-config 工具。该工具将获取您的 TSLint 配置,并从中创建“最接近”的 ESLint 配置。

npx tslint-to-eslint-config

此命令下载并执行该工具以执行迁移。有关更多选项,请查看该工具的使用指南

现在应该有一个新的 .eslintrc.js 文件、一个日志文件 (tslint-to-eslint-config.log),以及对其他文件(如 .vscode/settings.json)的可能更改。请仔细检查这些更改,特别是对现有文件所做的更改,并查看日志文件。

ESLint:配置

.eslintrc.js 文件通常足以开始使用,但 parserOptions.project 属性很可能仍然设置为您的 tsconfig.json 文件。这意味着 ESLint 规则可以使用语义信息,例如:这个变量是字符串还是数字数组?此配置启用了一些强大的规则,但也意味着 ESLint 计算所需的时间更长。扩展的默认规则不需要语义信息,除非您添加了需要它的规则,否则我们建议您删除 parserOptions.project 属性。

ESLint:运行

您现在可以运行 ESLint 了,但在执行此操作之前,我们建议您禁用 TSLint。为此,请打开“扩展”视图,并在 TSLint 扩展的上下文菜单中选择禁用 (Disable)

现在是进行 lint 的时候了!使用此命令:eslint -c .eslintrc.js --ext .ts <mySrcFolder>(注意 --ext .ts 选项,它告诉 ESLint 检查 TypeScript 文件)。我们建议将此命令放入 package.json 文件的 scripts 部分,如下所示

"lint": "eslint -c .eslintrc.js --ext .ts <mySrcFolder>"

要将 ESLint 与 Visual Studio Code 集成,请执行以下操作

  • 安装 ESLint 扩展。
  • 通过 Tasks: Configure Task 命令创建任务并选择 npm: lint
  • 在生成的 tasks.json 文件中,将问题匹配器 (problem matcher) 配置为 $eslint-stylish

提示:ESLint 在处理方式上有时会“更严谨”,您可能会看到以前没有过的警告,例如指出缺少分号。尝试使用 --fix 选项让 ESLint 为您清理这些问题。

TSLint:移除

恭喜。您现在应该已经有一个可以工作的 ESLint 设置,是时候进行清理了。

TSLint 的移除取决于您的项目,但通常遵循以下步骤

  • 更新 .vscode/extensions.json,推荐 ESLint 扩展,不再推荐 TSLint

    "recommendations": [
      "dbaeumer.vscode-eslint"
    ]
    
  • 移除 tslint.json 文件。

  • 移除 package.json 文件中对 tslint 的依赖。

  • 使用 npm uninstall tslint 卸载 TSLint。

© . This site is unofficial and not affiliated with Microsoft.