3

Microsoft 刚刚发布了适用于 Mac OS X 平台的新 Visual Studio Code。它支持 TypeScript，因为它可以获得 TypeScript 代码的自动完成和错误报告。

我的问题：我们如何在 Visual Studio Code 中编译 TypeScript 文件（以生成相应的 JavaScript 文件）？我已按照建议创建了一个默认的 tsconfig.json 文件，仅使用 {}，并尝试调用 shift+command+B 但这不会生成更新的 JavaScript 文件。

4

4 回答 4

5

您需要设置一个任务来执行此操作。

如果我在使用不同的操作系统时弄错了捷径，我提前道歉。对于任何使用 Windows 的人来说，这将是CTRL- 我认为 OSX 版本只是意味着使用CMD。

如果按CTRL+ SHIFT+ P，您应该会出现一个操作菜单，允许您搜索所有命令。

键入Configure Task Runner。如果您还没有，这将在设置文件夹中为您创建一个 tasks.json 文件。否则，它将打开现有的 tasks.json 文件。

你可以取消注释内置的 TypeScript 任务 - 它看起来像这样（我的主文件是 app.ts，这个文件中的默认是 HelloWorld.ts）：

// A task runner that calls the Typescipt compiler (tsc) and 
// Compiles a HelloWorld.ts program
{
    "version": "0.1.0",

    // The command is tsc.
    "command": "tsc",

    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent",

    // Under windows use tsc.exe. This ensures we don't need a shell.
    "windows": {
        "command": "tsc.exe"
    },

    // args is the HelloWorld program to compile.
    "args": ["app.ts"],

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

CTRL然后，您可以使用++按需执行此SHIFT任务B。

如果您定义了多个任务，您可以使用CTRL+E并键入task（注意“任务”后面的空格），它将为您提供所有任务的列表供您选择。

您的手无需为此离开键盘！

最后...如果您仍然一无所获，请检查窗口底部的此图标，因为您可能遇到编译器错误...（下面的图标显示一个错误 - 在编辑器中单击它以获取详细信息）。

构建/错误/警告

于 2015-04-30T19:15:54.003 回答
2

我遇到了与 tsc 转译器相同的问题（因为它将源代码从一种格式编译为另一种格式）没有生成“.js”文件。

解决方法：

尝试在 Windows 命令提示符（ cmd.exe - 以管理员身份运行）中执行以下命令：

tsc test.ts

确保您位于正确的文件夹路径中，否则请提供“.ts”文件的绝对路径

在此处输入图像描述

希望它应该在与“.ts”文件相同的文件夹中生成“.js”文件。

既然生成了“.js”文件，为了避免每次修改都执行上面的命令，可以在tsc中执行一个auto-transpilation watch命令。

要对“.ts”文件执行自动转换，请尝试运行以下命令：

tsc test.ts --watch

现在，如果您返回“.ts”文件并进行更改并点击Save，它将执行自动转换并立即更新您的“.js”文件。请记住保持命令提示符运行。

我尚未探索 tsc 转译器为何无法在 Visual Studio Code 的Ctrl + Shift + B按键上工作的原因，但我最好的猜测是我的 Visual Studio Code 安装使用的tsc版本或定义的环境 PATH 变量或安装的 npm的问题不同的 tsc 版本.. 原因可能是多方面的。

输出：

在此处输入图像描述

但对于那些想要快速完成工作的人来说，我希望这种解决方法有所帮助。

于 2015-09-15T20:31:35.647 回答
1

您需要一个tsconfig.json文件来定义 TypeScript 编译器的所有选项，并需要一个tasks.json文件来设置编译器选项。

tsconfig.json

{
    "compilerOptions": {
        "target": "ES5",
        "module": "amd",
        "sourceMap": false
    }
}

tasks.json ... 查看带有 ${file} 的“args”行来编译打开的文件。

{
    "version": "0.1.0",

    // The command is tsc.
    "command": "tsc",

    // Show the output window only if unrecognized errors occur. 
    "showOutput": "silent",

    // Under windows use tsc.exe. This ensures we don't need a shell.
    "windows": {
        "command": "tsc.exe"
    },

    // args is the HelloWorld program to compile.
    "args": ["${file}"],

    // Use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

更多信息：http: //blogs.msdn.com/b/typescript/archive/2015/04/30/using-typescript-in-visual-studio-code.aspx

于 2015-05-14T10:09:12.570 回答
0

我找到了适用于 Mac 的解决方案。在 args 行中，我输入了要编译的 TypeScript 文件的完整路径名。然后，使用 CMD + SHIFT + B 启动构建确实成功地运行了 tsc 编译器并成功生成了相应的 JavaScript 文件。

于 2015-05-02T02:05:00.617 回答