VSCODE创建JS项目

发布于:2025-07-09 ⋅ 阅读:(12) ⋅ 点赞:(0)

1. 安装 VS Code 和 Node.js

  • 安装 VS Code:如果尚未安装,请从 VS Code 官网 下载并安装。
  • 安装 Node.js:Node.js 是运行 JavaScript 的环境。从 Node.js 官网 下载并安装最新版本(推荐 LTS 版本)。安装后,打开终端运行以下命令验证:
    node -v
    npm -v
    确保输出版本号,确认安装成功。

2. 创建 JavaScript 项目

  1. 新建项目文件夹
    • 在你的电脑上创建一个新文件夹,例如 my-js-project。
    • 打开 VS Code,点击 文件 > 打开文件夹,选择刚刚创建的文件夹。
  2. 初始化 Node.js 项目(可选): 如果你需要使用 npm 管理依赖,运行以下命令初始化项目:
    • 打开 VS Code 的终端(快捷键 Ctrl + ~ 或 View > Terminal)。
    • 在终端中运行:
      npm init -y
      这会生成一个 package.json 文件,记录项目信息和依赖。
  3. 创建 JavaScript 文件
    • 在 VS Code 的文件资源管理器中,右键点击项目文件夹,选择 新建文件,命名为 index.js(或其他名字)。
    • 编写简单的 JavaScript 代码,例如:
      console.log("Hello, World!");


3. 运行 JavaScript 文件

有几种方法可以在 VS Code 中运行 JavaScript 文件:

方法 1:使用 Node.js 直接运行
  1. 确保已安装 Node.js。
  2. 在 VS Code 终端中,导航到项目文件夹(如果尚未在正确目录,运行 cd 你的项目文件夹路径)。
  3. 运行以下命令:
    node index.js
  4. 终端会输出 Hello, World!。
方法 2:使用 VS Code 的 Code Runner 扩展
  1. 安装 Code Runner 扩展
    • 在 VS Code 中,点击左侧活动栏的扩展图标(或按 Ctrl+Shift+X)。
    • 搜索 Code Runner,安装后启用。
  2. 运行代码
    • 打开 index.js 文件。
    • 点击右上角的“运行”按钮(三角形图标),或按 Ctrl+Alt+N。
    • 输出结果会显示在 VS Code 的输出面板或终端中。
4. 调试 JavaScript 文件

VS Code 内置了强大的调试功能:

  1. 点击左侧活动栏的调试图标(或按 Ctrl+Shift+D)。
  2. 点击“创建 launch.json 文件”,选择 Node.js 环境。
  3. VS Code 会生成一个 launch.json 文件,默认配置适用于 Node.js 项目。
  4. 在 index.js 中设置断点(点击代码行左侧的红点)。
  5. 按 F5 启动调试,查看变量值、调用栈等。
    {
        // 使用 IntelliSense 了解相关属性。 
        // 悬停以查看现有属性的描述。
        // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
        "version": "0.2.0",
        "configurations": [
        
            {
                "type": "node",
                "request": "launch",
                "name": "启动程序",
                "skipFiles": [
                    "<node_internals>/**"
                ],
                "program": "${workspaceFolder}/index.js"
            }
        ]
    }


网站公告

今日签到

点亮在社区的每一天
去签到