如何在 VSCode 中使用 TypeScript 和 Node JS 开始开发

Question

我曾经使用 C# 或 Javascript 和 Visual Studio 和 IIS 开发网站。

我决定升级到更新的工具并尝试使用 VSCode、NodeJS 和 TypeScript 创建一个简单的网站，稍后我将部署到 Azure，但每次尝试新示例时，我都会迷失方向，因为我有感觉它没有达到我想要的效果。

我用这个最小值创建了一个 TSConfig.json 文件，我知道它在 TypeScript 中创建了一个“项目”：

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

一个简单的 main.ts 文件：

class Startup {
    public static main(): number {
        console.log('Hello World');
            return 0;
        }
}
Startup.main();

引用生成的 main.js 文件的最简单 index.html 文件

我想 - 使用“$tsc-watch”编译我的网站以从自动重新编译中受益 - 在 NodeJS 中启动网站 - 在 Chrome 中打开网页并能够调试

但我想知道，这是正确的方法吗？应该是一个tasks.json文件，每次运行“$tsc-watch”，在Node中启动网站并打开Chrome？

我从这个 tasks.json 文件开始：

{
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "problemMatcher": [
                "$tsc-watch"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "Chrome",
            "type": "process",
            "command": "chrome.exe",
            "windows": {
                "command": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
            },
            "args": ["./index.htm"],
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }        
    ]
}

然后，VSCode 创建了一个 launch.json 文件，但我不确定它为什么以及它在图片中的位置：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

您能否帮助我理解我在这里做错了什么以及我需要什么才能在 VSCode 中简单地调试我的应用程序，就像我在 VSStudio 中按 F5 一样。

感谢您的帮助，

克劳德

Answer 1

看起来您正在尝试自己创建整个构建链和配置。我建议从为您处理初始引导的工具开始。例如，使用 vue-cli 工具通过 TypeScript 引导 vue.js 项目。虽然在理解 vue.js 时可能需要一些帮助，但 vue-cli 工具可让您选择选项（例如 TypeScript）并为您自动生成项目。然后，只需在 Visual Studio Code 中打开新创建的文件夹并开始玩。

一旦您了解了这一切是如何联系在一起的，您就可以添加 VSCode 特定任务、开始修改配置等。

有许多关于 vue.js 的优秀教程，实际上，在构建任何实际应用程序时，您可能都希望利用前端框架。

有关教程和更多信息，请参阅以下链接：

vue-cli

vue.js