Question

我是一个很长一段时间（15年以上）的Visual Studio用户，我很高兴能够学习Typescript和新的更精简的Visual Studio Code。我一直在尝试像VS一样设置VSCode，当你点击F5时，它会转换为Javascript并启动调试器。

我发现在保存时触发它的帖子，或使用另一个快捷方式（通过tasks.json运行） - 但我真的很惊讶没有办法在这样一个基本命令上执行此操作，除非我'我真的错过了一些令人尴尬的事情。

此时我只是尝试使用直接从Microsoft检出的"Hello World" greeter sample，其中手动步骤为PS MarkSweep。我只是想在开始运行/调试之前自动发生，就像在VS中一样，需要转换的任何文件。

有谁知道怎么做？谢谢。

Answer 1

所以，在这里使用回答的帮助是阻力最小的路径。打开vscode后，我：

文件 - ＆gt;打开文件夹
在我的代码目录中创建了一个空子文件夹，在本例中名为HelloWorld

创建 tsconfig.json 文件，并复制this article中的示例：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
    }
}

按照同一篇文章的指示创建 helloWorld.ts ，即：

class Startup {
public static main(): number {
    console.log('Hello World');
    return 0;
    }
}
Startup.main();

点击F5（调试），VSCode询问我是否需要Node.js环境或VSCode环境，我选择 Node.js 。
它为我生成了 launch.json ，我在其中进行了以下编辑：
切换＆＃34;程序＆＃34;：＆＃34; $ {workspaceRoot} /app.js"，到＆＃34; program＆＃34;：＆＃34; $ {workspaceRoot} /的 helloWorld.js ＆＃34;，

将preLaunchTask中的null替换为：＆＃34; preLaunchTask＆＃34;：＆＃34; tsc ＆＃34;，

将 sourceMaps 的3个实例从false替换为 true 。

再次点击F5，VSCode会弹出一条信息，说明没有配置任务运行器。我点击配置并选择 TypeScript - 观看模式。

在我的ts文件中的一行上设置断点

最后一次击中F5，一切正常！

所以tsc编译器似乎很慢，在我2岁的Win10计算机上花费大约4-5秒。我看到TypeScript的好处 - 观看模式，所以当你点击Save时它可以进行转换。否则，如果在调试之前每次都进行转换，它似乎无法检测它是否需要转换，因此这是与Visual Studio开发人员习惯匹配的理想方案。

Answer 2

基本上，VS Code允许您创建任务以自动化开发过程（清理文件/文件夹，编译，捆绑等），还允许您创建环境配置来运行项目。

要让它们协同工作，环境配置允许指定 preLaunchTask ，它将在调试之前运行已定义的任务。要创建类似于Visual Studio的工作流，您可以创建编译任务并在调试器之前通过将其设置为 preLaunchTask 来运行任务。

This article介绍了express（网络）和node.js应用的TypeScript入门过程。

调试前运行 tsc （TypeScript编译器）的示例

1. 使用您选择的编译选项在项目的根目录中创建一个tsconfig.json文件。

示例tsconfig.json文件（您可能需要更改模块设置以最适合您的项目。 amd 通常是一个Web项目， commonjs 通常是node.js项目，但每个人的偏好各不相同：

{
    "compilerOptions": {
        "target": "es6",
        "module": "amd",
        "sourceMap": true,
        "allowSyntheticDefaultImports": true
    },
    "exclude": [
        "node_modules",
        "bower_components",
        "jspm_packages",
        "tmp",
        "temp"
    ]
}

2. 创建 launch.json 文件到run and debug your project并将 preLaunchTask 设置为 tsc 。

最简单的方法是点击 F5 。第一次运行它会询问“选择一个环境”，如果你已经创建了一个launch.json文件并想重新开始，请删除该文件。对于TypeScript，我通常选择node.js，这将允许您使用express等框架在进程中或在Web上下文中运行。

示例 launch.json 文件（此示例属于express应用）：

{ "version": "0.2.0", "configurations": [ { "name": "Launch", "type": "node", "request": "launch", "program": "${workspaceRoot}/bin/www", "stopOnEntry": false, "args": [], "cwd": "${workspaceRoot}", "preLaunchTask": "tsc", "runtimeExecutable": null, "runtimeArgs": [ "--nolazy" ], "env": { "NODE_ENV": "development" }, "console": "internalConsole", "sourceMaps": false, "outDir": null } ] }

Answer 3

简短回答（在新项目目录中）是：

按 Ctrl + Shift + B 在VSCode中构建项目
如果尚未配置.vscode/tasks.json，则会显示一条消息，您可以选择配置任务管理器，然后按该按钮。
选择两个预定义的TypeScript选项之一。
您可以关闭此打开的tasks.json窗口。

在尝试了两种TypeScript选项后，我更喜欢 ...在监视模式下选项。这样，在使用 Ctrl + Shift + B 启动后台进程一次后，每当保存文件时都会发生增量转换，从而更快地启动调试程序......

有关详情，请点击以下链接：http://code.visualstudio.com/docs/languages/typescript#_transpiling-typescript-into-javascript

如果要生成源地图（一个好主意），则需要设置tsconfig.json。从VSCode快速做到这一点的方法是：

按 Ctrl + Shift + C 打开命令行窗口。
键入命令tsc --init --sourceMap以设置模板tsconfig.json
输入命令exit

最后，如果您想在调试时使用源地图，则需要生成并编辑.vscode/launch.json文件。快速做到这一点的方法是：

如果.vscode/launch.json已经存在，按 F5 会提示您选择环境。选择 Node.js 。
使用"sourceMaps": false编辑生成的文件，替换"sourceMaps": true的所有出现。

我不确定为什么默认设置省略了源地图，它似乎是人们开始使用VSCode + TypeScript的最常见的障碍之一。

设置Visual Studio代码以在构建和调试时转换typescript

3 个答案: