Visual Studio Code：编译打字稿模块

Question

我刚刚下载了新的 Visual Studio Code，我的第一印象非常好。对于打字稿，智能感知效果很好。

但是，有一个奇怪的问题：VS Code 似乎无法编译 typescript 模块。

这段代码：

/// <reference path="../definitions/react.d.ts"/>

import React = require("react");

在 cmd 上编译得非常好，使用

tsc --module commonjs main.ts

但在 VS Code 中，第二行以红色突出显示，编辑器抱怨：

除非提供“-module”标志，否则无法编译外部模块

当然，任何使用模块的打字稿代码都必须使用此标志进行编译。但是如果 IDE 知道模块的使用，为什么不设置标志呢？没有模块的打字稿代码在保存时编译，没有问题。

我想我缺少一些编译器设置配置文件。有这样的事吗？我在哪里可以找到它？

更新

我已经添加了 tsconfig.json 文件：

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

这实际上消除了错误。不幸的是，IDE 不再编译我的代码。起初我认为 config.json 只会使错误消息静音，但它的作用不止于此。 Intellisense 现在可以在示例文件中使用。如果我输入 React 会触发自动完成，并且显然知道 React，因为会显示有意义的建议。

现在，为什么 VS Code 不将文件编译为 js ？我尝试配置任务运行器来完成这项工作，但它似乎不起作用：

{
    "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": ["--module commonjs","${file}"],

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

如果我保存文件，什么都不会发生，即使我明确地运行构建任务，也没有响应。我编辑的任务的名称是“tsc”，我也尝试运行它。没有效果。然后我把参数改成"args": ["--module commonjs","main.ts"]，没有回应。

更新

任务运行器似乎工作的唯一方法是使用以下两个设置：

"args": ["${file}"], 
"isShellCommand": true, 

这里是输出：

• "args": ["-p"],
• "args": ["-p", "."],

错误 TS5023：未知的编译器选项“p”。

• "args": ["."],

错误 TS6053：找不到文件“.ts”。

Answer 1

您需要在项目的根目录中创建一个 tsconfig.json 文件。

设置"module": "commonjs"

基本示例：

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

Answer 2

关于编译代码，tasks.json 文件应如下所示：

{
    "version": "0.1.0",
    "command": "tsc",    
    "showOutput": "silent",
    "windows": {
        "command": "tsc.exe"
    },
    "args": ["-p", "."],    
    "problemMatcher": "$tsc"
}

如果您在 Windows 下运行并且已将 tsc 安装为全局节点模块，请将 windows 部分更改为：

"windows": {
    "command": "tsc",
    "isShellCommand": true
}

-p . 参数告诉 tsc 编译器在根文件夹中查找 tsconfig.json 文件并使用它来编译您的项目。

Answer 3

我今天也遇到了同样的问题。我跟着这个链接 http://blogs.msdn.com/b/typescript/archive/2015/04/30/using-typescript-in-visual-studio-code.aspx 完成所有设置步骤后，我在命令行上运行此命令并开始生成 JavaScript 文件

npm install -g typescript

我们需要确保我们已经安装了 node 和 npm 并且可以通过命令行访问。 我发现它不起作用的原因是在tasks.json 我们指定了以下选项

"command": "tsc"
"isShellCommand": true,

因此，Visual Studio 代码尝试在命令行上运行命令tsc，但找不到tsc。因此，使用 npm 全局安装 typescript 解决了这个问题。

Answer 4

我在另一个 VS Code 项目中遇到了同样的问题，我发现 VS Code 使用的是不同版本的 Typescript。

这里是输出：

• "args": ["-p"],
• "args": ["-p", "."],

错误 TS5023：未知的编译器选项“p”。

• "args": ["."],

错误 TS6053：找不到文件“.ts”。

我有 npm 的 1.5.3 而他使用的是 1.0.3，这是因为我已经在系统中安装了 1.5.3 em>Typescript 也在 Microsoft SDKs 中，并且可以从 PATH 访问。

解决方案已从 global 和 user PATH 这个 Typescript 的 Microsoft SDKs 中删除strong> 从 npm 访问可以管理 -p 参数的最新参数。

尝试仅使用 -v 参数执行 tsc 命令以验证它是否是正确的版本。

Answer 5

我遇到了同样的问题，并在 Steve Fenton 提供的 stackoverflow 上找到了解决方案： visual studio code compile on save 。 他的提议很优雅，符合当前的 VS Code 标准，并且按照描述立即工作。将此添加到 File -> Preferences -> Keyboard Shortcuts 作为覆盖：

[
    {
        "key": "ctrl+s",          
        "command": "workbench.action.tasks.build" 
    }
]