在VSCode中配置TypeScript编译与错误检查

先安装项目本地TypeScript并创建tsconfig.json，再启用VSCode错误检查与自动编译任务，可实现实时类型检测与代码编译。

在 VSCode 中配置 TypeScript 编译与错误检查，能帮助你在开发过程中及时发现类型错误并自动编译代码。以下是具体配置方法。

安装 TypeScript

VSCode 自带 TypeScript 支持，但建议使用项目本地安装的版本以确保一致性。

npm install --save-dev typescript

创建 tsconfig.json 配置文件

该文件用于定义 TypeScript 编译选项。在项目根目录创建 tsconfig.json 文件：

npx tsc --init

生成默认配置后，可根据需要修改关键字段：

• "target": "ES2020" —— 指定编译后的 JavaScript 版本
• "outDir": "./dist" —— 指定输出目录
• "rootDir": "./src" —— 源码目录
• "strict": true —— 启用所有严格类型检查选项
• "noEmitOnError": false —— 即使有错误也生成 JS 文件（可选）
• "sourceMap": true —— 生成 source map，便于调试

启用实时错误检查

VSCode 默认会在你编写代码时显示类型错误。

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

28

查看详情

打开 VSCode 设置（Ctrl + ,），搜索 TypeScript: Validate，确认以下选项已启用：

• Typescript › Validate: Enable
• Typescript › Suggestions: Unresolved Variable

配置自动编译（使用任务）

你可以设置一个构建任务，保存文件时自动编译。

按 Ctrl+Shift+P，输入 “Tasks: Configure Task”，选择 “Create tasks.json file from template”，然后选择 “TypeScript watch - tsconfig.json”。

这将创建一个监听模式的任务，当保存 .ts 文件时自动重新编译。

基本上就这些。配置完成后，你可以在编码时实时看到类型错误，同时代码也会自动编译到指定目录。不复杂但容易忽略的是本地 TypeScript 安装和 tsconfig 的路径设置，务必确认无误。

以上就是在VSCode中配置TypeScript编译与错误检查的详细内容，更多请关注php中文网其它相关文章！