当前位置: 首页 > news >正文

VSCODE创建JS项目

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"}]
    }

http://www.lryc.cn/news/582246.html

相关文章:

  • 常见问题与最佳实践——AI教你学Docker
  • 【力扣(LeetCode)】数据挖掘面试题0002:当面对实时数据流时您如何设计和实现机器学习模型?
  • EPLAN 电气制图:项目的创建(多功能天车系统案例)
  • 摄影后期:使用Photoshop进行暗角控制
  • 分布式生成 ID 策略的演进和最佳实践,含springBoot 实现(Java版本)
  • 【R语言】Can‘t subset elements that don‘t exist.
  • LastActivityView -查看电脑上的所有操作记录
  • 初识Neo4j之入门介绍(一)
  • 【Linux系统】Linux权限 | Shell命令以及运行原理
  • Python爬虫图片验证码和滑块验证码识别总结
  • Taro+Vue3实现微信小程序富文本编辑器组件开发指南
  • OpenCV人脸分析------绘制面部关键点函数drawFacemarks()
  • 虚幻引擎UE5 GAS开发RPG游戏-02 设置英雄角色-18 改成网络多人游戏
  • turborepo 如何解决git管理包过大的问题
  • 5、Receiving Messages:Message Listener Containers
  • Python实现文件夹中文件名与Excel中存在的文件名进行对比,并进行删除操作
  • 【无标题】三维拓扑量子色动力学模型:理论重构与实验验证
  • day16——Java集合进阶(Collection、List、Set)
  • windows安装python环境以及对应编辑器的详细流程
  • 从依赖地狱到依赖天堂PNPM
  • VmWare 安装 mac 虚拟机
  • 大模型在肾囊肿诊疗全流程预测及应用研究报告
  • 【保姆级喂饭教程】Git图形化客户端Sourcetree安装及使用教程
  • Linux系统从入门到精通!第四天(shell编程和Docker)
  • codeforces Round 1021-1030(部分题解)
  • 【Note】《Kafka: The Definitive Guide》第7章 Building Data Pipelines
  • 源哈希(sh)解析
  • etcd-cpp-apiv3 二次封装
  • [学习] C语言数学库函数背后的故事:`double erf(double x)`
  • 【数据分析】R语言基于虚弱指数的心血管疾病风险评估