VSCode关闭TSLint改用ESLint校验TypeScript代码指南

VSCode如何彻底关闭废弃的TSLint改用ESLint进行TypeScript代码校验

如果你仍在VSCode中保留着TSLint的配置，它不仅无法提供帮助，反而会严重干扰ESLint的正常运行。明确地说，TSLint已被官方完全废弃，若不彻底清理，将导致规则失效、错误提示缺失、保存时无法自动修复等一系列“诡异”问题。整个迁移过程，核心在于三个关键步骤：彻底卸载残留、正确配置新工具、关闭所有干扰源。

卸载 TSLint 相关插件和依赖

第一步，需要从内到外彻底移除TSLint。首先，打开VSCode的扩展面板，搜索关键词“TSLint”，将所有相关的扩展插件全部卸载，尤其是经典的 eg2.tslint。无论其是否显示为“已启用”，只要名称包含该关键词，都应立即禁用并移除。

仅卸载插件是不够的，项目依赖中可能仍存在“残留”。打开你的 package.json 文件，仔细检查是否还包含 tslint 或 tslint-config-* 等依赖项。一个快速的验证方法是，在终端中运行以下命令：

• npm ls tslint 或 yarn list tslint

如果命令没有任何输出，恭喜你，这一步已成功完成。如果仍有输出，请执行对应的卸载命令，例如 npm uninstall tslint --sa ve-dev（或使用yarn的 remove 命令）。最后，别忘了删除项目根目录下孤立的 tslint.json 或 tslint.yml 配置文件。

确认 ESLint 正确加载 TypeScript 解析器

清理完旧工具后，接下来必须确保ESLint能够正确校验TypeScript代码。许多人误以为安装了 @typescript-eslint/parser 即可，实则不然。VSCode可能因配置缺失而跳过对.ts文件的代码检查。以下三个关键点必须逐一核对：

• 在ESLint配置文件（推荐使用 .eslintrc.cjs 或新的 eslint.config.js）中，必须明确设置 parser: '@typescript-eslint/parser'。
• 确保已安装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin，并尽量保持版本匹配（目前推荐使用v7及以上版本）。
• 打开VSCode设置，检查 eslint.validate 选项，确保其包含 "typescript" 和 "typescriptreact"（如果你的项目包含.tsx文件）。

一个标准的 .eslintrc.cjs 配置示例如下：

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  rules: {
    '@typescript-eslint/no-explicit-any': 'warn'
  }
};

关闭 VSCode 内置 TS/JS 校验与 TSLint 遗留开关

这一步是许多问题的根源：VSCode内置的TypeScript语言服务会与ESLint产生冲突。你看到的红色波浪线错误提示，可能并非来自ESLint，而是内置校验的结果。为避免混淆，需要手动关闭这些内置功能。

• 在VSCode的 settings.json 配置文件中，添加以下两条设置："typescript.validate.enable": false 和 "ja vascript.validate.enable": false。
• 随后，在设置中搜索所有以 tslint. 开头的选项（例如 tslint.autoFixOnSa ve），并将其全部禁用。这些设置虽已失效，但残留在配置中仍可能干扰启动流程。
• 完成上述操作后，务必重启整个VSCode窗口（而非仅重载窗口），以确保旧的语言服务进程被彻底终止。

验证 ESLint 是否真正接管 .ts 文件

所有配置完成后，如何确认ESLint已成功接管TypeScript代码校验？可以通过以下几种方法进行验证：

• 随意打开一个 .ts 文件，查看编辑器右下角的状态栏，确认语言模式显示为 TypeScript，而非 Plain Text 或其他模式。
• 按下 Ctrl+Shift+P，运行命令 ESLint: Show Output Channel，查看输出日志。若配置正确，你将看到类似 Using configuration from /path/to/.eslintrc.cjs 的提示信息。
• 最后，进行一次“压力测试”：故意在文件中写入一行代码，如 const a: any = 1;。若配置无误，ESLint应立即标记出 @typescript-eslint/no-explicit-any 规则违规。若无反应，很可能是前述 eslint.validate 设置中遗漏了 typescript。

另一个常见陷阱：如果你的项目是多根工作区（Multi-root Workspace），请务必检查 eslint.workingDirectories 设置，必须明确列出包含TypeScript配置的子项目目录，否则子项目中的.ts文件将被ESLint直接忽略。