TypeScript 构建设置“保存时编译”在 VS 2015 中不起作用，.js 文件仅在构建期间生成答案

【问题标题】：TypeScript Build setting "Compile on Save" does not work in VS 2015, .js file is generated only during buildTypeScript 构建设置“保存时编译”在 VS 2015 中不起作用，.js 文件仅在构建期间生成
【发布时间】：2015-10-20 02:48:31
【问题描述】：

编辑

为什么这个问题非常痛苦？到目前为止，当我调试/测试我的 Web 应用程序时，我刚刚在 VS IDE 中编辑了 .ts，保存，然后重新加载页面并测试了更改。现在我必须建造。但是，当调试会话在 VS IDE 中运行时，构建未启用。所以现在我必须做一个完整的往返：编辑 .ts -> 保存 -> 停止调试 -> 构建 -> 启动调试。再次，这是非常痛苦的。 结束编辑

我在我的项目设置中取消选中/保存/选中了 TypeScript Build 选项卡中的设置。

相应的<PropertyGroup> 已生成并保存到我的 .csproj 文件中。

（请注意，在不更改任何 TypeScript Build 设置的情况下，此 <PropertyGroup> 不存在（当使用先前使用 VS 2013 创建的现有项目时），并且 build 默认值与IDE UI 上的默认值，所以你被误导了。）

无论如何，在此更改/保存活动之后，我的 .csproj 文件与 IDE UI 同步：

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
  <TypeScriptRemoveComments>True</TypeScriptRemoveComments>
  <TypeScriptTarget>ES5</TypeScriptTarget>
  <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
  <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
  <TypeScriptModuleKind>None</TypeScriptModuleKind>
  <TypeScriptOutFile />
  <TypeScriptOutDir />
  <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
  <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
  <TypeScriptSourceMap>True</TypeScriptSourceMap>
  <TypeScriptMapRoot />
  <TypeScriptSourceRoot />
</PropertyGroup>

正如它显示的那样，保存时编译肯定是启用的。 .js 文件仍然只在构建期间生成，而不是在保存 .ts 文件时生成。

顺便说一句：关于 TypeScript 编译是 VS 2015 实现中的一个 msbuild 任务，有趣的是这个 Compile on save 设置甚至可以工作......

更多诊断：有趣的是，如果我删除整个属性组，那么它实际上会在保存时编译。（UI 保持不变，.map 文件不会在保存时生成，仅在构建时生成。）

【问题讨论】：

我在我的打字稿项目中创建了一个输出 js 文件。如果我构建，它仍然会为每个 ts 文件创建一个 js 文件。如果我在保存时编译，它会正确输出到单个 js 文件。奇怪、错误、耗时且令人沮丧的体验。有时 ts 文件会乱序，如果我打开 _references.ts 并保存在该文件中，它会遵循引用顺序并且 js 输出再次正确。我还没有找到将多个 ts 文件编译为单个 js 文件的“正确”方法 - 如果有的话。

标签： visual-studio typescript visual-studio-2015

【解决方案1】：

您是否在寻找“工具”菜单

【讨论】：

我没有这个选项...只有我一个人？
不，我没有那个选项/类别..（@2015 更新 1）
Typescript 的设置存在于Tools -> Options -> Text Editor -> Typescript -> Project下
这应该被标记为答案......工具 -> 选项 -> 文本编辑器 -> 打字稿 -> 项目是启用保存时自动编译的地方
这仍然不起作用。现在我正在与 VS 2017 解决同样的问题。现在我有了自动编译选项，但是说“自动编译......这是项目的 not 一部分”。顺便说一句，它不起作用。

【解决方案2】：

我终于通过将"compileOnSave": true 添加到我的tsconfig.json 来实现它。

所以你的 tsconfig 应该是这样的：

{
    "compilerOptions": {
         ....
    },
    "compileOnSave": true
}

【讨论】：

【解决方案3】：

当我在tsconfig 文件中将compileOnSave 移动到之前 compilerOptions 时为我工作。

【讨论】：

确实，这是我的问题。我在选项下方有compileOnSave ，想知道为什么它不起作用。谢谢。

【解决方案4】：

我有同样的问题，所以我：

关注citykid的advise，
自己创建了 .js.map 文件，
试过你的指南 - 它开始工作，但我
- 比较的 PropertyGroup 部分略有不同，因此我测试了您的配置并
根据 citykid 的建议重新启用调试器

...它仍然像魅力一样起作用。

这可能无关紧要，但我有：

Visual Studio Pro 14.0.23107.0
Microsoft ASP.NET 和 Web 工具 14.0.60814.0
TypeScript for MS VS 1.6.3.0 (!)
已安装 Web Essentials 0.5.197
已安装 Web 编译器 1.8.270
Bundler & Minifier未安装
ReSharper 9.2 (?)

为了测试它，我建议：

打开 .js.map，
通过添加函数来修改 .ts - .js.map 重新加载，
在 IE 中调试，
通过添加函数来修改 .ts - .js.map 重新加载，
重新加载页面，它应该反映调试器和浏览器的变化。

【讨论】：

【解决方案5】：

对于 Visual Studio 2019：

第 1 步工具 > 选项：

第 2 步在您的 tsconfig.json 中：

{
  "compileOnSave": true,    <---- insert before compilerOptions
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ESNext",
    "outDir": "./wwwroot/js"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

【讨论】：