Visual Studio代码：编译打字稿模块

Question

我刚刚下载了新的 Visual Studio 代码，我的第一印象非常好。对于 typescript，intellisense 工作得很好。

但是有个奇怪的问题：VS Code好像不能编译typescript模块

此代码：

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

import React = require("react");

在 cmd 上编译得很好，

tsc --module commonjs main.ts

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

cannot compile external modules unless the "-module" flag is provided

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

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

更新

我添加了 tsconfig.json 文件：

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

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

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

{
    "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"]，没反应

更新

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

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

输出如下：

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

error TS5023: Unknown compiler option 'p'.

"args": ["."],

error TS6053: File '.ts' not found.

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

我今天也遇到了同样的问题。我关注了这个 link 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。

Here are the outputs:

"args": ["-p"],

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

error TS5023: Unknown compiler option 'p'.

"args": ["."],

error TS6053: File '.ts' not found.

我从 npm 获得了 1.5.3 而他使用的是 1.0.3，这是因为我在系统 Typescript 中也安装了 Microsoft SDKs 并且可以从 PATH.

解决方案已从 global 和 user PATH 这个 中删除Microsoft SDK 的 Typescript 从 npm 访问最新的可以管理 -p args.

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

Answer 5

我遇到了同样的问题，并在 Whosebug 上找到了解决方案，由 Steve Fenton 提供： visual studio code compile on save。他的提议很优雅，符合当前的 VS Code 标准，并且可以像描述的那样立即工作。将其添加到文件 -> 首选项 -> 键盘快捷键作为覆盖：

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

Visual Studio代码：编译打字稿模块

Visual Studio Code: compile typescript module

compilation

typescript

visual-studio-code

更新

更新