TypeScript Build设置＆＃34; Compile on Save＆＃34;在VS 2015中不起作用，.js文件仅在构建期间生成

Question

修改

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

我在项目设置中的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文件时生成。

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

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

Answer 1

你找到了＆＃34;工具＆＃34;菜单＆lt;选项......＆lt;打字稿＆lt;项目并检查＆＃34;编译保存＆＃34;复选框？

Answer 2

我最终将"compileOnSave": true添加到tsconfig.json。

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

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

Answer 3

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

Answer 4

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

1. 关注citykid的advise，
2. 自行创建.js.map 文件，
3. 尝试了你的向导 - 它开始起作用了，不过我
   • 比较了稍有不同的PropertyGroup部分，因此我测试了你的配置和
4. 从citykid的建议中重新启用调试器

......它仍然像魅力一样。

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

• Visual Studio Pro 14.0.23107.0
• Microsoft ASP.NET和Web Tools 14.0.60814.0
• TypeScript for MS VS 1.6.3.0（！）
• 已安装Web Essentials 0.5.197
• 安装了Web编译器1.8.270
• Bundler＆amp; Minifier 不已安装
• ReSharper 9.2（？）

为了测试它，我建议：

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

Answer 5

对于 Visual Studio 2019：

步骤 1 工具 > 选项：

在您的 tsconfig.json 中的第 2 步：

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