Question

我最近一直在尝试学习TypeScript，并且在安装了＆＃39; Web Essentials＆＃39;之后我一直在观看的一些视频中。使用.ts文件时的扩展程序visual studio为您提供了一个预览面板，以便您在键入时查看JavaScript。

这些视频似乎正在使用VS 2012。

然而，在VS 2017上安装Web Essentials似乎没有这个选项，有没有人知道如何在VS 2017中使用它？它是否对TypeScript有相同的支持？

Answer 1

因此默认情况下，VSX17会安装TypeScript（Update 2将为您提供最新版本的2.3并允许并排安装）。如果您没有它，可以通过Visual Studio Installer添加它 - 从安装程序中单击汉堡菜单并选择Modify，然后单击Individual Components，在SDKs，Libraries and Frameworks下可以添加TypeScript。

安装完成后，您可以添加一个tsconfig.json文件来告诉TypeScript编译器如何操作，例如：

{
    "compileOnSave": true,
    "compilerOptions":
    {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5"
    },
    "exclude":
    [
        "node_modules"
    ]
}

重要的设置是compileOnSave，它告诉VS在你保存ts时编译js文件。

您现在应该会在TypeScript文件中看到嵌套的Javascript文件：

现在您只需要并排打开这两个文件，当您保存ts时，js将自动更新（如果VS提示您将更改的文件加载到磁盘上，则有助于勾选始终更新选项。）

Answer 2

我看到你的问题是VS 2017，我在VS 2017上找不到任何文件来确认它是否已被添加回来。但是，我确实发现这已在VS 2015中删除。请参阅Github

上的此链接

TS预览窗格已从Web Essentials 2015中删除，因为在新版本发布时与TS编译器不断发生冲突。 TS团队已经意识到这一点，我希望他们将来可以将这个功能添加到TS工具中。在实施预览窗格时，此功能可能会包含在全新的Web编译器扩展（https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c）中。

Answer 3

我有一个解决方法，它有点工作，但在我想检查输出的奇怪场合有帮助。

我正在运行vs2017我安装了网络基础知识和网络编译器，但从15.4开始它似乎仍然不支持ts并且我无法使tsconfig.json工作。

简要显示项目中的隐藏文件并选择相应的js文件，然后将选项卡向右拖动，以便有一个分屏

当您更改并保存ts文件时，您可能会弹出一个说法＆＃34;文件已更改＆＃34;或类似的东西，你可以在那里选择一个复选框，如果没有检测到变化，则显示＆＃34; AutoRestore＆＃34; （再次，我可能会解释，我试图找到选项，所以我可以重置它以获取截图，但我找不到它！），检查，然后选择＆＃34;是全部＆＃34;这会刷新js文件。下次更改ts文件时，js文件将更新。

我知道这不是很好，但我发现它非常有用，因为我可以对你在阅读课程时看到的内容进行模拟，并且他们会继续显示javascript的预览。