从 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 <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。