我遵循本教程制作了一个在浏览器上运行的JavaScript游戏。本教程在CodeSandBox中工作，但我想在VScode中尝试一下。
链接：https://www.youtube.com/watch?v=3EMxBkqC4z0&t=329s
2:40中显示了一行代码，它只能在CodeSandBox中工作，但不能在VScode中工作。
// index.js
let canvas = document.getElementById("gameScreen");
它弹出
"ReferenceError:文档未定义"；
并且我似乎需要一些扩展来使JS DOM在VS代码中工作。我应该安装哪些扩展才能使其正常工作？HTML文件只是一个带有JS脚本的普通文件。
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1 class="style1">Block Game</h1>
<canvas id="gameScreen" width="800" height="600"></canvas>
<script type="module" src="src/index.js" ></script>
</body>
</html>
您不能在VS代码中运行JS
(好吧，你可以，因为你可以用JavaScript编写VS代码的扩展，但这不是你的目标(。
VS Code是一个IDE。它的主要功能是编辑代码。
如果你想运行JavaScript，你需要将其加载到一个可以运行的工具中。最常见的方法是：
- 使用Node.JS执行JS
- 在web浏览器中打开包含
<script>元素的HTML文档
JavaScript程序通常被设计为在其中一个或另一个中运行，但不能同时在两者中运行。(实用程序模块通常设计为在两者中运行(。
您有一个HTML文档。它有一个<script>元素。JS试图访问document对象，该对象是由web浏览器提供的，而不是由Node.JS提供的。
不要试图用Node.js打开它。不要点击VS代码中的一个按钮，该按钮旨在用Node.js.打开js
您可以安装Live Server扩展，以提供为项目运行HTTP服务器、打开浏览器并将其指向项目的选项。
我建议您在VScode的左侧安装Live Server Extension。然后你会在bottoom的右角有一个"上线"文本，这样你就可以在"真实"服务器上打开你的文件。
然后使用：
let context = canvas.getContext('2d');
然后你将拥有所有的画布方法，如fillRect、fillText、globalAlpha等…
只是不要在VSCode中使用控制台日志。它显然不起作用，因为它服务器环境。只需使用浏览器控制台(F12，然后单击控制台(，它肯定会在那里工作。您可以使用console.log来检查您正在处理的内容的一部分是否正常工作，因为它将显示在浏览器的控制台上。
我已经处理这个问题一段时间了，但我认为我所说的就是答案。
太晚了，但我希望这能有所帮助。
您的js文件不是type="module"。删除
<script src="src/index.js" ></script>
PS：如果是index.js和index.html，你也可以像src="./index.js"一样访问