如何配置VS Code的"tasks.json"文件以构建所有.ts文件

Question

如果这个问题之前被问过，我很抱歉重复发帖，请直接将我重定向到其他线程。

是否可以配置VS Code的"tasks.json"文件，以编译文件夹中的所有.ts文件。我知道我可以手动添加.ts文件的路径，就像这样：

"args": [ HelloWorld.ts ],

它确实能正确编译 HelloWorld.ts，但我无法弄清楚如何设置 tasks.json 以使文件夹中的所有 .ts 文件都被编译。

我查看了一些教程，它们都建议简单地删除 "HelloWorld.ts"，但这并不起作用，因为根本没有编译任何 .ts 文件。

下面是我在 VS Code 中拥有的完整 tasks.json 文件：

{
    "version": "0.1.0",

    // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
    "command": "tsc",

    // The command is a shell script
    "isShellCommand": true,

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

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

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

- Vladimir Amiorkov

---

很抱歉，我现在没有带全套的项目环境，但我知道我可以通过一个名为"tsconfig.json"的文件来完成这个任务。只需将TSC指向包含该文件的文件夹，并使用"-p"参数即可。VS Code可能能够帮助您填写tsconfig.json的各种选项。 - Katana314

Answer 1

在您的tasks.json文件中，删除“args”键的方括号内容：

"args": []

请确保您已经准备好了tsconfig.json文件。这个文件能够成功地为我编译所有的.ts文件。

- mishap

Answer 2

这可能对你的任务来说有点过度，但对于我的项目，我使用gulp，并且它在VSCode中得到了很好的支持。

首先，您应该为项目设置tsconfig.json，在其中可以排除不必要的文件。我发现排除不需要的内容比包含所需的内容更容易。特别是对于大型项目而言。

{ 
     "compilerOptions": { 
         "emitDecoratorMetadata": true, 
         "experimentalDecorators": true,
         "module": "commonjs", 
         "target": "es5",
         "sourceMap": true,
         "outDir": "dist",
         "declaration": true
     },
     "exclude": [
         "node_modules",
         "dist",
         ".vscode",
         "docs"
     ]
}

这是您的 tasks.json 可能看起来的样子：

This is how your tasks.json might look like:

{
    "version": "0.1.0",
    "command": "node",
    "windows": {
        "command": "node.exe"
    },
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "build-debug",
            "args": ["${workspaceRoot}/node_modules/gulp/bin/gulp.js", "build-debug"],
            "isBuildCommand": true,
            "suppressTaskName": true,
            "problemMatcher": [
                "$tsc"
            ]
        }
    ]
}

请注意，我在这里使用了本地安装的gulp。

以下是示例gulpfile.js：

"use strict";

var gulp = require('gulp');
var ts = require('gulp-typescript');
var merge = require('merge2');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');

var tsProject = ts.createProject('tsconfig.json');

gulp.task('build-debug', function() {
    del.sync("dist");

    var tsResult = tsProject.src()
        .pipe(sourcemaps.init())   
    .pipe(ts(tsProject));

    return merge([
        //Build typescript to dist folder 
        // tsResult.dts
        //     .pipe(gulp.dest('dist')),
        tsResult.js
            .pipe(sourcemaps.write("./", { sourceRoot: __dirname }))
            .pipe(gulp.dest('dist')),
});

不要忘记在package.json中添加相应的开发依赖：

  "devDependencies": {
    "gulp": "latest",
    "gulp-typescript": "latest",
    "gulp-sourcemaps": "latest",
    "merge2": "latest",
    "del": "latest"
  } 

希望这能帮到您。

- Amid

Answer 3

与其完全删除args，这对我有用。

"args": ["-p", "${workspaceRoot}"]

有一些预定义变量可供使用，这些变量将在运行时替换。请访问此页面了解更多信息：https://code.visualstudio.com/docs/editor/tasks#_variable-substitution

- pmcilreavy

---

你可以多说一些详细的信息吗？贴上一行代码对任何人都没有帮助。 - Vladimir Amiorkov

Answer 4

创建一个_all.ts文件，添加您想要编译的所有文件的引用，并将其传递给args参数。

它将输出一个包含所有转换代码的单个文件。

希望这可以帮助到您。

- Nabeel Hassan

---

实际上，这样做可以将所有的ts代码编译成js代码，但之后我就不得不在我的html中引用一个单独的.js文件，这有点违背了"关注点分离"的思想。 - Vladimir Amiorkov

Answer 5

正如 @mishap 所说，但他的答案遗漏了一个空格应该留给 "args"，像这样：

"args": [ ]

而不是：

"args": []

由于这些参数是传递给执行tsc的cmd/终端，因此在tasks.json的“args”中有一个空格“ ”非常重要。

- Vladimir Amiorkov

Answer 6

--==========================
  - VS Code - Setup TypeScript Compiler 
  - source : https://code.visualstudio.com/Docs/languages/typescript
--==========================
1/ create a file "tsconfig.json"

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

2/ Create tasks.json : 
    - Ctrl+Shift+P ==> Configure Task Runner
    - Select TypeScript - tsconfig.json.
    {
        // See http://go.microsoft.com/fwlink/?LinkId=733558
        // for the documentation about the tasks.json format
        "version": "0.1.0",
        "command": "tsc",
        "isShellCommand": true,
        "args": ["-p", "."],
        "showOutput": "silent",
        "problemMatcher": "$tsc"
    }

3/ Run the Build Task : Ctrl+Shift+B (Run Build Task)

- boubkhaled