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

是时候起绒了！使用此命令：（eslint -c .eslintrc.js --ext .ts <mySrcFolder>注意--ext .ts告诉 ESLint 查看 TypeScript 文件的选项）。我们建议将命令放在-filescripts的部分中package.json，如下所示：

"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文件。

  • tslint删除文件中的依赖关系package.json。

  • 使用 卸载 TSLint npm uninstall tslint。

11/1/2023