Visual Studio Code:编译TypeScript模块

30

我刚刚下载了新版的Visual Studio Code,我的第一印象非常好。对于TypeScript,智能感知效果非常出色。

但是,有一个奇怪的问题: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

当然,任何使用模块的TypeScript代码都必须使用该标志进行编译。但是,如果IDE意识到使用模块,为什么它不设置该标志呢?没有模块的TypeScript代码可以在保存时编译,没有问题。

我认为我缺少一些编译器设置配置文件。这种文件存在吗?在哪里可以找到它?

更新

我已经添加了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'。


2
我也一直遇到这个问题,但一直忽略它。我刚刚找到了这个设置,可能会有所帮助... "javascript.validate.module": "commonjs" - Brocco
1
你可以在你的项目中创建一个 tsconfig.json 文件吗?我不使用 Code,所以我不确定是否有 UI 设置来完成这个。 - CodingIntrigue
1
иҜ·дҪҝз”ЁES6жЁЎеқ—иҜӯжі•import * as React from 'react'пјҢ并еңЁtsconfig.jsonж–Ү件дёӯжҢҮе®ҡжӮЁзҡ„жЁЎеқ—зұ»еһӢгҖӮ - einstein
1
@einstein 我相信这个语法只在1.5+版本中可用(目前处于测试版)。 - Brocco
1
打开命令面板 cmd+shift+p 并配置你的任务运行器。它应该在 args 属性下面。 - einstein
显示剩余2条评论
5个回答

17
我今天也遇到了同样的问题。 我按照这个链接 http://blogs.msdn.com/b/typescript/archive/2015/04/30/using-typescript-in-visual-studio-code.aspx 的步骤进行设置后,在命令行上运行了此命令,然后它开始生成JavaScript文件。
npm install -g typescript
我们需要确保已经安装了 Node.js 和 npm 并且可以通过命令行访问。我发现它不起作用的原因是因为在 tasks.json 文件中我们指定了以下选项。
"command": "tsc"
"isShellCommand": true,

所以,Visual Studio Code 尝试在命令行上运行 tsc 命令,但是找不到 tsc。因此,使用 npm 全局安装 TypeScript 解决了这个问题。


当我尝试查看 https://github.com/angular-class/angular2-webpack-starter 的 Angular2 TypeScript 应用程序时,npm install -g typescript 为我解决了问题。 - seangwright
2
我已经安装了TypeScript。它可以工作,因为我可以将单个.ts文件编译为.js文件——但是当我使用模块时,仍然会出现错误(“除非提供--module标志,否则无法编译模块”)。我应该在哪里提供这个标志? - Kokodoko

11

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

以下是输出内容:

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

错误 TS5023:未知编译器选项 'p'。

  • "args": ["."],

错误 TS6053:文件 '.ts' 未找到。

我在npm中安装了1.5.3版本的Typescript,而他正在使用1.0.3版本。这是因为我在系统中还安装了Microsoft SDKs中的Typescript并将其添加到了PATH中。

解决方案是从globaluserPATH中删除来自Microsoft SDKsTypescript,以便访问可以管理-p参数的最新版本。

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


8

关于编译代码,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文件,并使用它来编译您的项目。

这对我不起作用,因为我收到了“未知选项 p”错误。 - Ed Bishop
3
未知选项“-p”可能表示您正在调用较旧版本的tsc。您可能希望检查从命令行或终端调用tsc时运行的路径,具体取决于您所使用的操作系统。请尝试从cmd或终端运行“tsc -v”。如果您看到一个较旧的TypeScript版本,则可能需要升级TypeScript或检查您的路径是否包括多个版本。您可以通过Windows中的“where”命令或终端中的“which”命令来检查运行哪个路径。例如:where tsc或which tsc。 - bingles
1
真的很奇怪!-v 显示 1.0.3.0,但我能找到的唯一文件是 1.5.3... 非常奇怪。 - Ray Suelzer
1
@RaySuelzer - 如果您以前安装过VS,则会将TypeScript放置在您的PATH环境变量中,但从未清除它。由于第一个获胜,因此始终是您安装的旧版本。我建议进入并清除您的PATH以摆脱旧版本。 - Josh

3

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

"module": "commonjs" 设置为:

基本示例:

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

这样可以消除错误消息并使自动完成工作。不幸的是,文件仍未编译。 - lhk
1
所以,我假设你已经按下了 Ctr+Shift+B?然后选择配置任务运行器。在“args”数组中,指定要编译的文件名。例如:"args": [ "main.ts" ] - Ross Scott
1
更多信息请参考此教程:http://blogs.msdn.com/b/typescript/archive/2015/04/30/using-typescript-in-visual-studio-code.aspx - Ross Scott
@RossScott 在每个显示 --modules 错误的文件上按下 Ctrl+Shift+B,这样就可以消除错误了。 - seangwright
你在哪里找到这个信息的?我已经仔细查看了VSCode网站,但文档似乎远未完成。 - Kokodoko

0

我曾经遇到同样的问题,并在Stack Overflow上找到了解决方案,由Steve Fenton提供:visual studio code compile on save。他的建议优雅简洁,符合当前VS Code标准,并且按照描述立即生效。将此添加到“文件” ->“首选项” ->“键盘快捷方式”中以进行覆盖:

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接