Question

所以我对大多数网络托管技术都很赞，所以这可能是一个非常基本的问题。我对一般的编码以及CSS，Javascript和HTML如何协同工作有一定的了解，但是在托管/运行某些东西并附加到它上面的概念已经丢失了，而不仅仅是打开浏览器打开文件（file：//） /C:/Test/index.html）。我知道您可以使用tasks.json文件，该文件可以跳转到您喜欢的浏览器并在其中打开一个页面：How to view my HTML code in browser with Visual Studio Code?。但是，这并没有在localhost上创建一个运行进程来附加。

我一直在尝试查看Visual Studio Code教程：https://code.visualstudio.com/docs/editor/debugging。但他们似乎认为我有能力让一个进程在localhost上运行并附加到它，当我不这样做时。

我下载了Chrome调试器的扩展程序，我的launch.json现在看起来像这样：

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000",
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    }
]
}

我已经尝试根据教程更改此内容以启动内容，但它不起作用，因为教程指定他们使用node.js作为示例，并且好奇如果你只能做一个基本的。

如何使用Visual Studio Code托管纯jane html，javascript和css的代码？我想在没有NPM，Gulp或其他平台的情况下一遍又一遍地开始测试一些javascript。我可以劫持这个或另一个文件，以便在IIS或其他托管平台上运行它吗？或者没关系？我正在使用NPM为Angular 2做一个教程，并且在你的位置你只需要在你的位置执行'npm start'的控制台命令然后，bam它为你完成所有工作并在本地主机上保留一个端口并完成所有工作（{ {3}}现在显示我的内容）。我可以使用VS Code中的某个进程或我可以创建的某个命令吗？

Answer 1

您需要某种Web服务器。 angular 2快速入门指南使用lite-server。这是一个基于小节点的Web服务器。你可以用npm安装它。

npm init

npm install lite-server --save-dev

比在package.json中将其添加到脚本

"start": "lite-server"

确保您在此文件夹中有一个index.html文件，而不仅仅是运行

npm start

您的网络服务器将启动并在浏览器中显示您的网页。

您也可以创建自己的Web服务器，然后将调试器附加到该服务器，但这确实涉及使用节点或其他一些工具。

一个简单的方法是使用简单的快速服务器创建server.js文件。

初始化npm：npm init

使用npm安装express：npm install express --save

创建一个server.js文件：

var express = require('express');
var app = express();

app.listen(3000, function() {
    console.log('Listening on port 3000');
});

//Change the './' to point to the root of your angular app
app.use(express.static(path.resolve('./')));

//Send everything to your index.html page
app.get('/*', function(req, res) {
  res.sendFile(path.resolve('./index.html'));
 });

现在在你的launch.json中添加正确的配置。例如：

 {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/index.js",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "preLaunchTask": null,
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "console": "internalConsole",
        "sourceMaps": false,
        "outDir": null
    },

如果您启动visual studio代码调试器，您的网页将从localhost：3000

提供

希望这就是你要找的东西：）

Answer 2

为此，我使用名为reload的节点包。这样做的好处是它会自动刷新文件更改，而您不需要任何配置文件。因此，提供简单的静态html内容很容易。

首先你需要安装重装：

npm install [-g] [--save-dev] reload

然后cd进入index.html的文件夹以提供索引文件。

reload -b

如何使用Visual Studio代码创建在localhost上运行的基本内容？

2 个答案: