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中打开网页并能够进行调试

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

我从这个task.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}"
        }
    ]
}

您能帮助我了解我在这里做错了什么，以及像在VSStudio中按F5一样，只需在VSCode中调试应用程序的必要条件。

谢谢您的帮助，

克劳德

Answer 1

您似乎正在尝试自己创建整个构建链并进行配置。我建议从为您处理初始引导程序的工具开始。例如，使用vue-cli工具使用TypeScript引导vue.js项目。尽管在了解vue.js时可能包括一些改进，但vue-cli工具可让您选择选项（例如TypeScript）并自动为您生成项目。然后，只需在Visual Studio Code中打开新创建的文件夹并开始播放即可。

一旦感觉到它们如何结合在一起，就可以添加特定于VSCode的任务，开始修改配置等。

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

请参阅以下链接以获取教程和更多信息：

vue-cli

vue.js

Answer 2

我想我确实找到了我需要的东西，lite-server是一个很棒的组件，它创建了运行我的网站的服务器应用程序，非常简单...

我阅读了这篇文章：Steps to run node http server in visual studio code

谢谢，克洛德

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

2 个答案: