Visual Studio Code：编译打字稿模块

Posted 2023-03-13

【中文标题】Visual Studio Code：编译打字稿模块

【英文标题】：Visual Studio Code: compile typescript module

【发布时间】：2015-07-15 00:39:04

【问题描述】：

我刚刚下载了新的 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”。

【问题讨论】：

我也遇到过这种情况，但是一直忽略。我刚刚发现这个可能有帮助的设置... "javascript.validate.module": "commonjs"

您可以在您的项目中创建一个tsconfig.json 吗？我不使用 Code，所以我不确定是否有 UI 设置

请使用 ES6 模块语法 import * as React from 'react' 并在 tsconfig.json 文件中指定您的模块类型

@einstein 我相信语法仅在 1.5+ 版本中可用（目前处于测试阶段）

带上命令面板cmd+shift+p 并配置您的任务运行器。它应该在args 属性下。

【参考方案1】：

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

设置"module": "commonjs"

基本示例：

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

【讨论】：

这将删除错误消息并使自动完成工作。不幸的是，该文件仍未编译

所以，我想你已经完成了 Ctr+Shift+B ？然后选择配置任务运行器。在“args”数组中，指定要编译的文件名。例如“args”：[“main.ts”]

有关更多信息，您可能需要关注本教程：blogs.msdn.com/b/typescript/archive/2015/04/30/…

@RossScott 在显示 --modules 错误的每个文件上键入 Ctrl+Shift+B 为我删除了错误。

您在哪里找到这些信息？我浏览了 VSCode 网站，但文档似乎远未完成。

【参考方案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 文件并使用它来编译您的项目。

【讨论】：

这对我不起作用，因为我收到错误“未知选项 p”

未知选项 -p 可能意味着正在调用旧版本的 tsc。您可能需要检查从命令行或终端调用 tsc 时运行的路径，具体取决于您所在的操作系统。从 cmd 或终端尝试 tsc -v。如果您看到较旧的 TypeScript 版本，您可能需要升级 TypeScript 或检查您的路径以查看是否包含多个版本。您可以通过 Windows 中的 where 命令或终端中的哪个路径来检查正在运行的路径。例如 where tsc 或 which tsc。

真的很奇怪！ -v 显示 1.0.3.0 但我唯一能找到的文件是 1.5.3... 非常奇怪。

@RaySuelzer - 如果您过去安装了 VS，那么它将 TypeScript 放在您的 PATH 环境变量中，但永远不会清除它。由于第一个获胜，它始终是您安装的旧版本。我建议进入并清除您的 PATH 以摆脱旧版本。

【参考方案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 解决了这个问题。

【讨论】：

npm install -g typescript 在我尝试查看 github.com/angular-class/angular2-webpack-starter angular2 typescript 应用程序时为我解决了这个问题。

我已经安装了打字稿。它可以工作，因为我可以将单个 .ts 文件编译为 .js 文件 --- 但是当我使用模块时，我仍然会收到此错误。 （“除非提供了 --module 标志，否则无法编译模块”）。我在哪里提供这个标志？

【参考方案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 命令以验证它是否是正确的版本。

【参考方案5】：

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

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