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

首页

编程语言

热心网友

转载

2026-05-08

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直接忽略。

来源:https://www.php.cn/faq/2414896.html

免责声明：游乐网为非赢利性网站，所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系youleyoucom@outlook.com。

上一篇：Composer中国镜像回退操作指南与配置取消步骤详解下一篇：Composer锁定文件自动更新方法详解与项目维护技巧

相关攻略

编程语言

VSCode复制粘贴时代码缩进错乱解决方法

在VSCode中粘贴代码后出现缩进格式混乱，这通常不是编辑器本身的问题。其根本原因往往在于自动格式化功能被启用，但相应的格式化工具链未正确配置，或者多个编辑器设置之间产生了冲突。具体来说，formatOnPaste、autoIndent和detectIndentation这几个功能的设置不当或相互干

热心网友

05.07

编程语言

VSCode拼写检查如何设置忽略特定英文单词

在使用 VSCode 进行开发时，一个常见的困扰是拼写检查插件会在自定义的变量名或 API 名称上标记红色波浪线。例如，当你输入“ReactQuery”或“ZodSchema”这类专有名词时，编辑器却提示“拼写错误”。这通常是因为 Code Spell Checker 扩展默认仅识别标准英文词汇。

热心网友

05.07

编程语言

VSCode调试Flutter性能使用Dart DevTools工具栏教程

在VSCode中调出Flutter性能分析工具需正确配置FlutterSDK绝对路径并重启编辑器。启动Flutter项目后，通过命令或调试控制台获取链接，在浏览器中打开DevTools。进入后需切换至Performance标签页并开始分析，确保应用处于交互状态以获取实时性能数据。

热心网友

05.07

编程语言

VSCode运行代码前如何设置自动保存功能

VSCode默认不会在运行代码前自动保存文件，可能导致执行旧版本代码。核心解决方案是配置files autoSave为onFocusChange，当焦点移出编辑器时自动保存。使用code-runner插件可开启独立选项，在运行前强制保存。对于原生调试功能，建议结合检查未保存标记或设置自动保存。需注意工作区设置可能覆盖全局配置。

热心网友

05.07

编程语言

VSCode隐藏侧边栏文件与文件夹的详细操作指南

在VSCode中隐藏侧边栏特定文件或文件夹，需配置files exclude而非search exclude。两者语法一致但独立生效，需分别设置。路径使用glob模式，如 "** node_modules "可递归隐藏。使用 "! "可设置例外，但需注意规则顺序。配置建议写入项目settings json，修改后通常无需重启。注意路径匹配以斜杠为界，避免误写。

热心网友

05.07