从 TSLint 迁移到 ESLint
TSLint 过去一直是推荐的代码检查工具,但现在 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 <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文件中,将问题匹配器配置为$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。