如何在VSCode中配置TypeScript开发环境？【教程】

狼影

发布时间：2026-01-17 10:11:03

820人浏览过

来源于php中文网

原创

VSCode中TypeScript开发需手动配置本地tsc版本、精简tsconfig.json（如Node项目设"module":"NodeNext"、"isolatedModules":true）、禁用冲突扩展，并校准sourceMap与outFiles路径。

如何在vscode中配置typescript开发环境？【教程】

TypeScript 开发环境在 VSCode 中基本开箱即用，但真正稳定高效需要手动干预几个关键点——尤其是 tsc 版本、tsconfig.json 配置和编辑器行为对齐。

确认 VSCode 使用的是项目本地 TypeScript 版本

VSCode 默认可能使用内置的 TS 语言服务（版本常滞后），导致类型提示、自动补全与你实际运行的 tsc 行为不一致。最常见现象是：终端里 tsc --build 报错，但编辑器里没红线；或反之。

打开命令面板（Ctrl+Shift+P / Cmd+Shift+P），输入并选择 Typescript: Select TypeScript Version...
选 Use Workspace Version（前提是项目已安装 typescript 到 devDependencies）
验证方式：打开任意 .ts 文件，底部状态栏应显示类似 TS 5.3.3 (Workspace)

必须手写 `tsconfig.json`，不能依赖默认生成

VSCode 的 tsc --init 生成的配置过于宽泛，尤其 "lib"、"target"、"moduleResolution" 等字段若不显式指定，会引发隐性兼容问题（比如 Node.js 项目误含 DOM 类型、ESM 项目仍用 commonjs 模块解析）。

最小必要字段示例（Node.js 后端项目）：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "lib": ["ES2020"],
    "moduleResolution": "NodeNext",
    "allowSyntheticDefaultImports": false,
    "strict": true,
    "skipLibCheck": false,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "resolveJsonModule": true,
    "esModuleInterop": false,
    "isolatedModules": true,
    "noEmit": false
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

"isolatedModules": true 是关键——它让每个文件能被单独编译，配合 esbuild 或 vite 等工具时不会出错
删掉所有注释行（VSCode 的 tsc --init 会加大量注释），TS 编译器不解析 JSON 注释，但某些插件会误读

禁用可能干扰的扩展和设置

某些流行扩展（如 Auto Import、Path Intellisense）在 TS 项目中会与内置语言服务冲突，表现为自动导入路径错误、类型丢失、保存时意外重排 import。

Android 开发者指南第一部分：入门

Android文档-开发者指南-第一部分：入门-中英文对照版 Android提供了丰富的应用程序框架，它允许您在Java语言环境中构建移动设备的创新应用程序和游戏。在左侧导航中列出的文档提供了有关如何使用Android的各种API来构建应用程序的详细信息。第一部分：Introduction(入门) 0、Introduction to Android(引进到Android) 1、Application Fundamentals(应用程序基础) 2、Device Compatibility(设备兼容性) 3、

下载

临时禁用所有非必需扩展，只留官方 ESLint、Prettier（需配 eslint-config-prettier）和 TypeScript Hero（可选，仅用于重构）

检查 settings.json 中是否含以下高危项：

"typescript.preferences.includePackageJsonAutoImports": "auto",
"editor.suggest.insertMode": "replace",
"typescript.preferences.useAliasesForBuiltinClasses": true

—— 建议设为 false 或删掉，它们在 monorepo 或路径映射场景下极易出错

启用 "typescript.preferences.quoteStyle": "single" 可避免格式化时引号反复切换

调试时注意 `sourceMap` 和 `outFiles` 路径匹配

断点无法命中、变量显示 undefined，大概率是 launch.json 中的 outFiles 没对上实际生成路径，或 sourceMap 未正确生成。

确保 tsconfig.json 含：

"sourceMap": true,
"inlineSources": false,
"declaration": false

launch.json 中 outFiles 必须是 glob 路径，且相对于 cwd（不是工作区根目录）：
```
"outFiles": ["${workspaceFolder}/dist/**/*.js"]
```
如果用 ts-node 直接运行，别配 outFiles，改用 "type": "node" + "runtimeArgs": ["-r", "ts-node/register"]，否则 source map 会失效