从 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 扩展的上下文菜单中选择“禁用”。

现在开始 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 扩展。
• 通过“任务：配置任务”命令创建一个任务，然后选择“npm：lint”。
• 在生成的 tasks.json 文件中，将问题匹配器配置为 $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。