首先安装官方typescript插件和ESLint,再配置settings.json启用自动导入与类型检查,最后通过创建.ts文件测试错误提示、类型显示和代码补全功能验证环境搭建成功。

如果您在使用 visual studio Code 进行 TypeScript 开发时发现语言支持不完整或缺少智能提示,可能是由于相关开发插件未正确安装或配置。以下是完成 TypeScript 开发环境搭建的具体步骤:
本文运行环境:MacBook Pro,macos Sonoma
一、安装官方 TypeScript 插件
visual studio code 内置了对 TypeScript 的基础支持,但为确保功能完整,需确认已启用或安装官方插件。
1、打开 vscode 编辑器,点击左侧活动栏中的扩展图标(方块形状)。
2、在搜索框中输入 TypeScript and javaScript Language Features。
3、找到由 microsoft 发布的该插件,若未安装则点击“安装”按钮。
4、安装完成后无需手动启用,插件会随项目加载自动运行。
二、安装辅助开发插件 TSLint 或 ESLint
为了提升代码质量并统一编码规范,建议安装 ESLint 插件以实现语法检查和错误提示。
1、在扩展市场中搜索 ESLint,选择由 Microsoft 提供的版本进行安装。
2、安装后需在项目根目录创建配置文件 .eslintrc.json 并写入规则内容。
3、确保项目中已通过 npm 安装 eslint 和 @typescript-eslint/parser 相关依赖。
4、重启编辑器使插件读取项目中的 ESLint 配置并开始实时检测代码。
三、配置工作区设置以优化 TypeScript 体验
通过修改工作区设置可以定制 TypeScript 服务的行为,例如错误提示频率、自动补全触发条件等。
1、在项目根目录下创建文件夹 .vscode(如不存在)。
2、在该文件夹内新建 settings.json 文件。
3、添加如下配置项以启用自动类型获取和快速修复:
{ “typescript.suggest.autoImports”: true, “typescript.preferences.includePackagejsonAutoImports”: “auto”, “typescript.tsserver.log”: “off” }
4、保存文件后,TypeScript 语言服务器将根据新配置调整行为。
四、验证插件是否正常运行
通过实际操作验证插件是否成功集成到开发环境中。
2、尝试引用一个未导入的模块,观察是否有红色波浪线提示错误。
3、将鼠标悬停在类型标识上,查看是否能显示正确的类型信息。
4、按下 Ctrl+Space 触发代码补全,确认是否包含来自当前项目的类型建议。