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

Question

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

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

在这一点上,我只是尝试使用直接从Microsoft检出的"Hello World"欢迎样本,其中有一个手动步骤tsc --sourcemap greeter.ts.我只是希望在我开始运行/调试之前,在VS中自动发生任何需要转换的文件.

有谁知道如何做到这一点？谢谢.

Answer 1

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

1. 文件 - >打开文件夹
2. 在这种情况下,在我的代码目录中创建了一个名为HelloWorld的空子文件夹
3. 创建了一个tsconfig.json文件,并复制了本文中的示例:

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

4. 根据同一篇文章的指示创建了一个helloWorld.ts,它是:

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

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

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

Answer 2

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

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

• 本文将逐步介绍针对Express (Web) 和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文件来运行和调试您的项目，并将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
        }
    ]
}