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

Question

我是一名长期（15 年以上）的 Visual Studio 用户，我很高兴学习 Typescript 和新的更精简、更简陋的 Visual Studio Code。我一直在尝试像 VS 一样设置 VSCode，当你按下 F5 时，它会转译为 Javascript 并启动调试器。

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

此时我只是尝试使用直接从 Microsoft 签出的 "Hello World" greeter sample，其中有一个手动步骤 tsc --sourcemap greeter.ts。我只是希望在我开始运行/调试之前在任何需要转译的文件上自动发生这种情况，就像在 VS 中一样。

有人知道怎么做吗？谢谢。

Answer 1

因此，在这里使用响应的帮助是阻力最小的路径。打开vscode后，我：

1. 文件 -> 打开文件夹
2. 在本例中，在我的代码目录中创建了一个名为 HelloWorld 的空子文件夹
3. 创建了一个 tsconfig.json 文件并从this article 复制了示例：

   {
       “编译器选项”：{
           “目标”：“es5”，
           “模块”：“commonjs”，
           “源地图”：真
       }
   }

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

   class Startup {
   公共静态主要（）：数字{
       console.log('Hello World');
       返回0；
       }
   }
   启动.main();

5. 按 F5（调试），VSCode 询问我是想要 Node.js 环境还是 VSCode 环境，我选择了 Node.js。
6. 它为我生成了一个 launch.json，我在其中进行了以下编辑：
7. 已将 "program": "${workspaceRoot}/app.js", 切换为 "program": "${workspaceRoot}/helloWorld.js ",
8. 将 preLaunchTask 中的 null 替换为："preLaunchTask": "tsc",
9. 将 sourceMaps 的 3 个实例从 false 替换为 true。
10. 再次按 F5，VSCode 会弹出一条信息说没有配置任务运行器。我点击配置并选择 TypeScript - Watch Mode。
11. 在我的 ts 文件中的一行放置一个断点
12. 最后一次按 F5，一切正常！

所以 tsc 编译器看起来很慢，在我 2 岁的 Win10 电脑上编译大约需要 4-5 秒。我看到了 TypeScript 的好处 - 观看模式，因此它可以在您点击保存时进行转换。否则，如果每次调试前都进行转译，它似乎无法检测是否需要转译，因此这是符合 Visual Studio 开发人员习惯的理想方案。

Answer 2

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

为了让它们一起工作，环境配置允许指定一个 preLaunchTask，它将在调试之前运行定义的任务。要创建类似于 Visual Studio 的工作流，您可以创建一个编译任务并在调试器之前运行该任务，方法是将其设置为 preLaunchTask。

• This article 介绍了在 express（网络）和 node.js 应用程序中开始使用 TypeScript 的过程。

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

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

示例 tsconfig.json 文件（您可能需要更改 module 设置以最适合您的项目。amd 通常是一个 Web 项目，commonjs em> 通常是 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 选项之后，我更喜欢 ... in watch mode 选项。这样，在使用 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 的人来说，这似乎是最常见的障碍之一。