文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

VSCode在运行tsc后不显示编译的JS文件

VSCode是一款流行的开源代码编辑器，tsc是TypeScript编译器的命令行工具。当我们在VSCode中运行tsc命令后，它会将TypeScript代码编译为JavaScript代码，并生成相应的JS文件。

如果在VSCode中运行tsc后不显示编译的JS文件，可能是由于以下几个原因：

  1. 编译配置问题：请确保在项目根目录下存在tsconfig.json文件，并且配置正确。tsconfig.json文件用于指定TypeScript编译器的编译选项，包括输出目录、编译目标等。可以通过修改tsconfig.json文件中的配置来解决该问题。
  2. 编译错误：如果TypeScript代码中存在语法错误或其他编译错误，tsc命令可能会终止编译过程，并不会生成相应的JS文件。在VSCode的终端中查看编译输出，可以帮助我们找到并修复这些错误。
  3. 文件路径问题：请确保在VSCode中打开的是包含TypeScript文件的正确项目文件夹。如果文件路径不正确，tsc命令可能无法找到需要编译的TypeScript文件，从而导致不显示编译的JS文件。

总结起来，要解决VSCode在运行tsc后不显示编译的JS文件的问题，我们可以检查编译配置、修复编译错误，并确保文件路径正确。这样就能够正常生成并显示编译的JS文件了。

腾讯云相关产品和产品介绍链接地址：

  • 腾讯云云服务器（CVM）：提供弹性计算能力，满足各类业务需求。详情请参考：https://cloud.tencent.com/product/cvm
  • 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务。详情请参考：https://cloud.tencent.com/product/cos
  • 腾讯云人工智能（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。详情请参考：https://cloud.tencent.com/product/ai
  • 腾讯云物联网（IoT）：提供全面的物联网解决方案，帮助连接和管理物联网设备。详情请参考：https://cloud.tencent.com/product/iot
  • 腾讯云区块链（BCBaaS）：提供安全、高效的区块链服务，支持快速搭建和部署区块链网络。详情请参考：https://cloud.tencent.com/product/baas
相关搜索:node.js编译后的文件VSCode >运行typescript文件时找不到对应的JSvscode在单独的文件中找不到c#命名空间片段(编译正常)使用VSCode代码运行器编译C++的头文件在Linux上使用Mono运行编译后的F#程序在Rmarkdown中运行后，绘图不显示在HTML文件中在visual studio中是否有针对.cpp文件的“不编译”#定义？在VSCode中打开".sql“文件时如何隐藏突出显示的行在vscode的集成终端中运行命令后如何获取退出代码在交叉编译的可执行文件上运行valgrind
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

TypeScript快速入门

文件拓展名是ts。 编译时检查，不污染运行时。 如今，TypeScript已经成为微软发展的重点项目，其新版本的发布节奏也加快到平均一个半月一次。...2， 环境搭建 Node.js作为JavaScript的运行环境，大部分的JavaScript工具链都需要它才能运行，TypeScript也不例外。...编译成功之后，会在相同目录下生成一个同名的js文件。当然，tsc命令工具还可以同时编译多个ts文件，多个文件之间用逗号隔开，如下所示。...tsc hello.ts 等待编译完成，会在相同目录下生成一个hello.js文件，然后使用浏览器打开index.html文件，运行效果如图2-2所示。...watch：在监视模式下运行编译器，当文件内容发生改变时会重新编译。

55410

VSCode 使用 Code Runner 插件无法编译运行文件名带空格的文件

使用 Visual Studio Code 写 C++ 程序最烦心的是大概就是使用 Code Runner 插件无法编译运行文件名带空格的文件了，这个问题困扰了我好久，虽然不影响学习，但太多分隔符总觉得不顺眼...No such file or directory 意思是没有这样的文件或目录，fatal error: no input files 的意思是致命错误：没有输入文件，然后就编译已终止了。...根据报错，我们发现 C++ 编译器是把 hello world.cpp 当成了 hello 和 world.cpp 两个文件，我的第一反应就是文件名带空格，要加上双引号。...我又在 CMD 中测试了一下，是能编译通过并运行程序的，问题立马锁定在了 Powershell 上，我想，一定是 CMD 和 Powershell 运行程序的代码不同，所以才会出故障。...加上 & 后，又出现了报错提示： 原来要加上 ".\" 。

1.6K30

使用VS Code开发asp.net core (下)

运行后, 弹出浏览器, 但是页面无法显示: ? 这是因为Chrome Debugger仅仅运行客户端的代码. 而服务器段的代码买有运行. 所以还需要在另外的命令行执行dotnet run命令....也就是说tsc命令还不能用. 所以需要安装typescript: npm install typescript -g 这时在项目目录执行tsc命令就可以生成js文件了: ?...但是, 如果更改了test.ts文件, 保存后. 并没有生成新的js文件. 这是因为在保存的时候vscode不知道应该做什么....最后输入这个档案的名字: SalesDB ? 确定后, VSCode就会开始尝试连接该数据库, 成功后会有提示: ? vscode右下角状态栏也会有显示: ? 这时再写sql语句就会有智能提示: ?...安装后, 该包会出现在bower.json文件中. XML格式化扩展 vscode在不安装扩展的情况下xml文件是无法被自动格式化的. 可以安装扩展Xml Tools: ?

1.7K50

TypeScript必知三部曲（一）TypeScript编译方案以及IDE对TS的类型检查

指定ts代码存放的根目录，这里就是当前目录（项目根目录）下的src文件夹，能够匹配到我们编写的项目根目录/src/index.ts； outDir：指定ts代码经过编译后，生成的js代码的存放目录。...+ "scripts": { + "build": "tsc" + }, ... } 完成搭建以后，项目整体如下： 运行build脚本，能够看到在项目根目录产生dist/index.js：.../dist" } } 再一次编译以后，会看到编译后的js代码则是符合es6模块规范的代码： 对于tsc编译方案，按照TypeScript编译三要素模型简单总结一下：我们准备了ts源码、tsc编译器以及...完成项目搭建以后，整体如下： 运行build脚本，能够看到在项目根目录产生dist/index.js： 这段代码，与上面tsc基于commonjs编译的js代码差别不大。...： VSCode同样也会有： 在同一台电脑上，甚至发现IDEA和VSCode的typescript版本都还不一样（5.0.3和4.9.5）。

63220

可能是开发小程序，最好用的两个编辑器

DingTalk20170925203440-2017925 type 在终端的命令，是 tsc，下一步将 ts 文件编译为 js 文件的时候，也需要这个命令才可以的。...DingTalk20171007104313-2017107 注意:这里 watch 功能，需要 tsc 进程一直在终端运行。可以把它放到后台运行，也可以开启一个新的终端。...5.解决自动编译 上面已经解决了 ts 文件自动编译成 js 文件。但是，每次开启 vscode 之后，需要在终端里面手动输入 tsc 命令，也是很烦的。...，里面有一个tasks.json 上面插件会在 VSCode 每次启动的时候，自动根据 task.json 运行一些命令（当然是运行 tsc 命令喽），这样，编译 ts 的工作就变成完全自动的了。...如果看不到 tsc 构建这个选项，可能需要打开一个 ts 文件后再进行上述操作。ts 文件编译成 js 文件后，微信开发者工具也会自动的编译 js 文件。至此就大功告成了。

10.3K95

如何使用及参与维护Github的LayaAir引擎源码

安装好本地开发环境后，根目录结构如下图所示。 ? 3.3.1 bin目录 bin目录是源码编译后的运行目录，用于引擎示例的快捷切换与调试，包括了两种编译方式的js库调试方式，tsc与rollUp。...通过查看与调试这里的测试示例DEMO，验证引擎是否存在影响运行的BUG。 通用的资源目录res与3D物理js这里就不详细说明了，我们来重点了解一下tsc与rollup模式的入口文件。...tsc调试相关 tsc调试模式是LayaAir开源项目默认配置好的调试模式，在VSCode中使用F5调试的时候，会自动采用tsc模式编译，发布的js就在bin/tsc目录下。...indexTSC.html是tsc模式的示例入口文件。如下图所示。 ? rollUp调试相关 相对于tsc的单文件编译，rollUp编译会形成一个完整的js库。...运行入口文件 无论是tsc编译模式，还是rollup编译模式，开发者任选其一即可。 编译之后的运行，推荐采用anywhere启动一个本地的web服务。

1K40

TypeScript 开发环境搭建

下载 node.js 下载地址：https://nodejs.org/en/ 安装 node.js 无其他特殊操作，选择好安装路径直接安装即可 安装完成后，使用win+R快捷键打开 cmd 命令行窗口，...TS 的工具包，提供了 tsc 命令，实现了 TS -> JS 网速不好 先输入：npm config set registry https://registry.npm.taobao.org（淘宝镜像...新建记事本文件 输入以下代码 console.log('Hello TS') 保存并修改扩展名为 .ts 进入命令行，输入 tsc 文件名.ts 即可将 ts 文件转换为 js 文件 方式二：使用 VScode...进行编写 打开VScode，新建文件夹 打开终端，输入 tsc --init，引入 ts 编译规则配置文件 tsconfig.json 在 tsconfig.json 文件中修改 "outDir":...console.log('Hello TS') 点击菜单栏 -> 终端 -> 运行任务 -> 选择当前文件夹 -> tsc 监视 即可 打开监视可实现实时更新 js 文件 方式三：使用 WebStorm

1.1K60

当你有了技术深度，很可能也同时有了技术广度

提到静态分析，自然会想到 ESLint 和 TypeScript Compiler，它俩不也是做 JS 的静态分析么？也是在编译期间发现一些代码中的问题并报错。...AST 为字符串 ESLint 的静态分析搞明白了，我又在想：TSC 的类型检查不也是对 AST 做静态分析么？...编译搞懂了，那自然会涉及到打包工具，因为我们一般不直接用编译工具，而是声明对什么文件用什么来编译，让打包工具去调用这些编译器，并把生成的代码打成几个 chunk。...因为 Chrome DevTools 是基于 CDP（Chrome Devtools Protocol）和 JS 运行时通信的： Node.js 之前的调试都是在命令行，没有 UI，所以对接了 CDP...也可以基于 JS 运行时的 backend，对接 CDP 来实现 frontend 部分。

46740

Node.js 项目 TypeScript 改造指南

/node_modules/.bin/tsc(全局安装忽略，不建议这么做，其他同学可能已经全局安装了，但可能会与你项目所依赖的 typescript 版本不一致)，在 package.json 中添加以下脚本...test.ts 文件： import * as path from 'path' console.log(path); 编译后的 test.js 文件： "use strict"; Object.defineProperty...__esModule:true,标识这是一个 ES6 模块，如果你在 tsconfig 中配置"esModuleInterop":true，编译后的 test.js 文件如下： "use strict...如果你不想在编译后的每个文件中都注入这么一段工具函数，可以配置"importHelpers":true，编译后的 test.js 文件如下： "use strict"; Object.defineProperty...(path) 编译后的 test.js 文件： "use strict"; var __importDefault = (this && this.

8.3K32

VsCode 各场景高级调试技巧，有用！

为了支持调试 Ts 与正在执行的 Js 代码相结合，VS Code 依赖于调试器的source map在 Ts 源代码和正在运行的 Js 之间进行映射，所以需要需要开启sourceMap选项。...image.png 注意，如果你使用的是其他终端(比如cmder)的话，有可能会生成不了，如下图所示，使用默认的powershell即可： image.png 调试的话和上述步骤一样，在有了编译后的文件后...该字段的作用是在执行命令前先执行改task任务。 image.png 注意，如果编译后的js文件不在相应的位置，通过图中的outFiles字段可以指定ts编译后的js路径。...在index.ts文件中按F5启动调试，可以看到调试前已经生成了编译文件，而后就可以正常调试了。...的调试后，我们尝试调试html文件，并且html文件中引入ts文件: 创建html，引入ts编译后的js文件 <!

1.1K20

分享 10 多条超有用的 VsCode 各场景高级调试技巧

为了支持调试 Ts 与正在执行的 Js 代码相结合，VS Code 依赖于调试器的source map在 Ts 源代码和正在运行的 Js 之间进行映射，所以需要需要开启sourceMap选项。...image.png 注意，如果你使用的是其他终端(比如cmder)的话，有可能会生成不了，如下图所示，使用默认的powershell即可： image.png 调试的话和上述步骤一样，在有了编译后的文件后...该字段的作用是在执行命令前先执行改task任务。 image.png 注意，如果编译后的js文件不在相应的位置，通过图中的outFiles字段可以指定ts编译后的js路径。...在index.ts文件中按F5启动调试，可以看到调试前已经生成了编译文件，而后就可以正常调试了。...的调试后，我们尝试调试html文件，并且html文件中引入ts文件: 创建html，引入ts编译后的js文件 <!

1.7K40

Node.js项目TypeScript改造指南

/node_modules/.bin/tsc(全局安装忽略，不建议这么做，其他同学可能已经全局安装了，但可能会与你项目所依赖的 typescript 版本不一致)，在 package.json 中添加以下脚本...test.ts 文件： import * as path from 'path' console.log(path); 编译后的 test.js 文件： "use strict"; Object.defineProperty...__esModule:true,标识这是一个 ES6 模块，如果你在 tsconfig 中配置"esModuleInterop":true，编译后的 test.js 文件如下： "use strict...如果你不想在编译后的每个文件中都注入这么一段工具函数，可以配置"importHelpers":true，编译后的 test.js 文件如下： "use strict"; Object.defineProperty...(path) 编译后的 test.js 文件： "use strict"; var __importDefault = (this && this.

4.4K20

VSCode高效开发工作流配置指南

我们只需要把VSCode当成一个基础的编码工具，编译与调试，不推荐在VSCode中进行（具体原因后面还会讲）。...所以在开发的时候，需要打开两个软件，写代码在VSCode中进行，UI编辑与项目编译及运行调试在LayaAirIDE中进行，两个软件，快速切换一下，即可完成一个从编码到运行发布的完整工作流。...此时，先到LayaAirIDE里按快捷键F8编译一下，然后回到VSCode再按快捷键F5，即可启动VSCode中的断点调试，以及调起Chrome，显示运行效果。...这是由于F5只是调试的快捷键，必须要先使用LayaAirIDE的编译（F8），编译生成运行代码后，才能使用VSCode里的F5断点调试。...不要使用VSCode中的tsc编译任务，因为VSCode中的tsc编译与LayaAirIDE的编译及发布流程不一致，所以会有很多地方都要修改，编译后才能运行成功，而且就算是在VSCode中运行成功了，如果修改的和

2.2K30

Node.js项目TypeScript改造指南

/node_modules/.bin/tsc(全局安装忽略，不建议这么做，其他同学可能已经全局安装了，但可能会与你项目所依赖的 typescript 版本不一致)，在 package.json 中添加以下脚本...test.ts 文件： import * as path from 'path' console.log(path); 编译后的 test.js 文件： "use strict"; Object.defineProperty...__esModule:true,标识这是一个 ES6 模块，如果你在 tsconfig 中配置"esModuleInterop":true，编译后的 test.js 文件如下： "use strict...如果你不想在编译后的每个文件中都注入这么一段工具函数，可以配置"importHelpers":true，编译后的 test.js 文件如下： "use strict"; Object.defineProperty...(path) 编译后的 test.js 文件： "use strict"; var __importDefault = (this && this.

4.6K10

TypeScript是如何工作的

LSP 协议在语言插件和编辑器之间做了一层隔离，插件不再直接和编辑器通信，而是通过 LSP 协议进行转发。这样在遵循了 LSP 的编译器中，相同功能的插件，可以一次编写，多处运行。...tsserver TypeScript 插件的语言服务器其实就是一个在独立进程中运行的 tsserver.js 文件。...我们可以在 typescript 源码的 src 文件下面找到 tsserver 文件夹，这个文件夹编译之后，就是我们项目中的 node_modules/typescript/lib/tsserver.js...由于 TypeScript 插件不需要将 TS 文件编译成 JS 文件，所以 typescript-core 只会运行到检查器这一步。...三、TypeScript 与 babel 在开发过程中，错误提示功能由 VSCode 提供。但是我们的代码需要经过编译之后才能在浏览器中运行，这个过程中是什么东西处理了 TypeScript 呢？

5.4K30

【TypeScript】的安装方式

安装步骤如下： 1.npm install typescript 安装typescript *注意：没有安装node.js需要去官网下载node.js 并安装 2.tsc -v 查看typescript...4.HBuilder   新建空白文件   尾椎   xxxxx .ts Vscode  有自带ts文件模板 5.写完 ts 代码之后  cmd 命令行 或者终端 编译 tsc 后面是...TS文件的名字 如：tsc typescript.ts  并在文件目录生成一个同名的js文件，那么就是编译成功了 6.编译好目录自动生成一个同名js文件 如果有同名js文件(如： typescript.js...)，说明编译正确 可以使用了， 如果没有说明步骤出错，或者代码写错了 7.最后一步 把生成好的js文件（同名的js文件 如：typescript.js）引入html文件中 <script src=...8.文件浏览器运行查看打印日志

88060

十分钟搞定 TypeScript + webpack 配置

Web 应用程序，我们需要将两组文件编译到目录 build/ 中： TypeScript 文件存储在 ts/中。...在另一个命令行中，我们现在可以启动一个在本地主机上提供 build/ 内容的 Web 服务器： npm run serve 如果转到 Web 服务器输出的 URL，则可以看到正在运行的 Web 应用程序...可选：在 .vscode/tasks.json 设置适当的问题匹配器： "problemMatcher": ["$tsc-watch"], 现在我们可以从 “Terminal” 菜单执行 “Run Build...wp：运行 webpack 一次编译所有内容。 wpw：用 webpack 监视，并仅编译修改过的文件。 serve：运行服务器 http-server 并提供目录 build/ 的内容。...在没有加载器的情况下使用 webpack：`webpack-no-loader.config.js` 除了依赖于 ts-loader 之外，我们还可以先将所有 TypeScript 文件编译为 JavaScript

2.8K21
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券