在 VS 2012 中查看 typescript 输出的 js 文件答案

【问题标题】：View typescript output js files in VS 2012在 VS 2012 中查看 typescript 输出的 js 文件
【发布时间】：2013-12-04 09:10:35
【问题描述】：

我已经为 Visual Studio 2012 安装了 TypeScript 和 Web Essential。

在一个新的 TypeScript 项目中创建了 3 个文件：

default.html
app.css
app.ts

在所有教程中，VS 2012 会自动在资源管理器中为 app.ts 文件创建下拉菜单，其中隐藏了 app.js 文件。

如下图所示：

但在我的情况下，“app.ts”和新的 TypeScript 文件“file1.ts”不会发生这种情况：

我需要在 VS 2012 的设置中做些什么来自动创建和查看输出的 js 文件？

【问题讨论】：

如果您查看文件夹，您是否可以看到其中的任何 JavaScript 文件，这些文件可能没有出现在解决方案中？这将告诉我们这是一个编译问题（即 TypeScript 没有编译您的项目）还是只是您的解决方案没有显示文件的问题。
TypeScript 在 JS 文件中编译，但它没有显示在我的解决方案中。

标签： javascript visual-studio-2012 typescript output explorer

【解决方案1】：

有一个快速修复来显示解决方案中的文件。

如果您在解决方案资源管理器中单击“显示隐藏文件”图标，您将看到文件出现，您可以右键单击并选择“将文件添加到解决方案”。

这里的小问题是它们不会正确嵌套在您的 TypeScript 文件中 - 它们会自行出现。您可以通过编辑项目文件以显示文件之间的依赖关系来解决此问题 - 我已经展示了两个都依赖于 app.ts 的文件作为示例，您可能只需要 JavaScript 文件依赖于 TypeScript 文件：

<Content Include="app.d.ts">
  <DependentUpon>app.ts</DependentUpon>
</Content>
<Content Include="app.js">
  <DependentUpon>app.ts</DependentUpon>
</Content>

【讨论】：

【解决方案2】：

有一个 Visual Studio 扩展可以满足您的需要：File Nesting

此扩展允许您在解决方案资源管理器中指定哪些文件嵌套在哪些其他文件下。您可以手动嵌套文件，也可以定义基于文件名的嵌套规则。

以下是您可以使用该插件执行的操作的示例屏幕截图：

【讨论】：

这是一个将文件嵌套到目录中的插件。然而，这个问题是关于在 Visual Studio 中显示已经存在的（正确嵌套的）文件。