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

是时候进行代码检查了！使用这个命令：eslint -c .eslintrc.js --ext .ts （注意--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文件中，将问题匹配器配置为$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。