如何使用 Visual Studio Code 创建基本内容以在 localhost 上运行？

Posted 2023-02-25

【中文标题】如何使用 Visual Studio Code 创建基本内容以在 localhost 上运行？

【英文标题】：How do you create basic content to run on localhost with Visual Studio Code?

【发布时间】：2017-02-14 06:31:37

【问题描述】：

所以我对大多数网络托管技术都不熟悉，所以这可能是一个非常基本的问题。我对一般编码以及 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。但他们似乎认为我有能力让进程在本地主机上运行并附加到它，而我没有。

我为 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 您只需在您的位置执行“npm start”的控制台命令，然后，bam 它会为您完成所有操作并在本地主机上保留一个端口并完成所有操作（@ 987654323@ 现在显示我的内容）。我可以通过 VS Code 中的某些进程或我可以创建的某些命令来做到这一点吗？

【问题讨论】：

vscode 不像 Visual Studio 那样提供开箱即用的开发网络服务器，但您可以在此处找到一些关于如何使用 chrome 调试器进行 angular 或 react 开发的示例：github.com/Microsoft/vscode-chrome-debug/wiki/Examples 所有这些示例都使用节点基于网络服务器，因此这并不能完全回答您的问题。但我建议看看这些项目。它们易于设置，并提供了开发基于 JavaScript 的网站的基本架构。用于开发的基于节点的 Web 服务器非常方便，可以提供热重载 (webpack) 等功能。

【参考方案1】：

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

首先你需要安装reload：

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

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

reload -b

【讨论】：

你能解释一下如何使用它吗？我找不到让它工作的方法。

【参考方案2】：

您将需要某种网络服务器。 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 提供服务

希望这就是你要找的:)

【讨论】：

不幸的是，这假设我想使用 Node.js，我只是想为 IIS 的现有实例或仅 HTML、javascript 和 css 的其他实例创建到 localhost 的内容。顺便说一句，我真的很喜欢 Node.js 并将其用于另一个项目的 lite 服务器。我只是好奇您是否可以直接发布某种类型的启动配置或任务配置。也许我不能，在这种情况下我可以为这个项目初始化节点。我希望我能做到这一点。

这是个好主意，我可能会这样做。但是我认为在包 json 中你需要这个：“scripts”：“start”：“lite-server”，而不是“start”：“lite-server”。