微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 开发工具 > VSCode > 正文

VSCode中配置TypeScript自动编译

青灯夜游
发布： 2021-02-12 09:25:06
转载
4667人浏览过

VSCode中配置TypeScript自动编译

相关推荐：《vscode教程》

安装TypeScript编译器

Visual Studio Code包含TypeScript语言支持，但不包括TypeScript编译器tsc。您需要在全局或工作区中安装TypeScript编译器，以将TypeScript源代码转换为JavaScript（tsc HelloWorld.ts）。

安装TypeScript的最简单方法是通过npm，即Node.js包管理器,-g表示全局安装。

安装

npm install -g typescript
登录后复制

检查版本-安装成功会输出版本信息

tsc --version
登录后复制
xm@xm-Vostro-3670:~/project$ tsc --version
Version 3.3.3333
登录后复制

新建HelloWorld文件夹和hello_world.ts文件

mkdir HelloWorld
登录后复制
const text:string = 'hello world';
console.log(text);
登录后复制

1.png

新建Tsconfig.json

{
  "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "outDir": "out",
      "sourceMap": true
  }
}
登录后复制

新增任务

Tenimal->Run Task

2.png

一览AI编剧
一览AI编剧

创意生成+情节生成+脚本生成，AI编剧3步走，AI自动帮你搞定剧情！

一览AI编剧 87
查看详情 一览AI编剧

选择tsc:build-tsconfig.json

3.png

配置完成

按下F5

发现目录下多了一个out文件夹配置的是"outDir": "out",DEBUG CONSOLE输出hello world。

4.png

修改text保存按下F5

5.png

更多编程相关知识，请访问：编程视频！！

以上就是VSCode中配置TypeScript自动编译的详细内容，更多请关注php中文网其它相关文章！

相关标签：
vscode JavaScript typescript node.js json npm JS console visual studio vscode visual studio code
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：掘金网
收藏 点赞
上一篇：提升开发效率的实用vscode插件（分享） 下一篇：分享vscode中定位node模块的插件：vscode-goto-node-modules
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
VSCode代码重构工具：重命名与提取函数技巧 掌握VSCode重命名与提取函数功能可显著提升代码质量：通过F2键安全重命名符号，实现跨文件引用同步更新；选中代码右键提取为函数，自动推断参数与返回值；配合语言扩展和引用查找确保重构准确性，定期小规模优化优于后期大改。
2025-11-13 22:35:03
835
VSCode状态栏信息显示与自定义组件 状态栏显示语言模式、编码、Git分支等关键信息，并支持通过API自定义组件，如构建状态、计时器等，提升开发效率与工作流可视化。
2025-11-13 22:31:11
908
如何使用VSCode的Diff编辑器比较文件差异 VSCode内置Diff编辑器可直观对比文件差异，支持代码审查与版本比对，通过Ctrl+Shift+P打开命令面板输入“File:CompareFiles”即可使用。
2025-11-13 22:29:02
644
VSCode时间线功能与版本对比的实用技巧 时间线功能可查看文件历史修改记录，结合版本对比工具能直观比较不同版本差异。通过时间线面板可查看Git提交、本地更改及保存记录，双击提交记录打开diff编辑器，支持逐块接受更改和跨版本对比，便于排查Bug、代码审查与恢复误删内容，提升开发效率。
2025-11-13 22:27:07
278
vscode如何对xml文件执行全局替换_vscodexml文件内容全局替换使用技巧 在VSCode中对XML文件进行全局替换时，需结合正则表达式与文件筛选以提升精确度和效率。首先启用正则模式（.*图标），通过捕获组（如$1、$2）精准定位目标内容，例如替换特定属性值时使用(]*DataSource=")(OLD_SERVER)("[^>]*>)并替换为$1NEW_SERVER$3，确保仅修改预期部分。利用“包含文件”框限定范围（如.xml或config//.xml），排除node_modules等无关目录，减少性能开销。面对大型项目，应分批次操作、避免复杂正则，防止卡顿或崩溃。
2025-11-13 22:23:40
633
使用VSCode的SQL工具连接数据库执行查询 安装SQLTools及对应数据库插件，通过命令面板创建连接并填写主机、端口、用户名等信息，测试成功后在.sql文件中编写语句，选中执行即可查看结果。
2025-11-13 22:15:31
740
vscode如何同步插件布局设置_vscode窗口与面板布局同步设置教程 通过SettingsSync扩展可实现VSCode配置跨设备同步，包括插件、布局与设置；无法联网时可通过导出settings.json和extensions.txt文件手动迁移；团队协作则可利用项目级.workspace文件统一界面布局。
2025-11-13 22:15:07
300
VSCode扩展市场：优质插件生态深度剖析 VSCode的强大在于其扩展生态，通过精选插件可将其转变为全能开发工具。ESLint与Prettier确保代码质量与格式统一，ErrorLens提升错误可见性，RESTClient简化API测试，PathIntellisense精准补全路径，TodoTree集中管理待办事项，Peacock用颜色区分多项目，GitLens增强代码版本追溯能力。
2025-11-13 22:07:19
795
vscode插件怎么下载_vscode插件下载安装详细图文教程 答案：可通过四种方式安装VSCode插件以增强功能。一、在扩展面板搜索并安装；二、从官网Marketplace下载.vsix文件后本地安装；三、离线环境下批量导入多个.vsix文件；四、使用命令行工具code执行安装命令，适用于自动化场景。
2025-11-13 21:55:02
393
VSCode通知系统：事件响应与用户交互设计 VSCode通知系统通过事件驱动架构实现高效信息传递，当扩展运行、文件保存失败等事件触发时，由INotificationService统一管理并按严重等级生成对应类型通知，采用右下角弹窗与活动栏标记结合的分层设计，临时通知自动消失，持久通知可随时查看，并支持键盘导航与自定义操作按钮，兼顾及时性与非侵入性，第三方扩展可通过API接入并添加富文本链接，整体在信息传达与界面简洁间取得平衡。
2025-11-13 21:53:08
504
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部