当前位置: 首页 > 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.dtcms.com/a/268901.html

相关文章:

  • 第二届虚拟现实、图像和信号处理国际学术会议(VRISP 2025)
  • 网络安全之内网渗透实操
  • SpringBoot-Freemarker导出word
  • 基于pycharm,python,flask,uniapp,sklearn机器学习,orm,mysql,在线恶意流量检测系统开发
  • python数据结构与算法-递归
  • 当“漏洞”成为双刃剑——合法披露与非法交易的生死线在哪里?
  • Kafka 消费者组再平衡优化实践指南
  • HTTP 重定向
  • python 数据分析 单细胞测序数据分析 相关的图表,常见于肿瘤免疫微环境、细胞亚群功能研究 ,各图表类型及逻辑关系如下
  • Python实现文件夹中文件名与Excel中存在的文件名进行对比,并进行删除操作
  • 护照阅读器在酒店应用场景
  • 【机器学习笔记 Ⅱ】8 多标签和多类别
  • 2. 你可以说一下 http 版本的发展过程吗
  • 【PTA数据结构 | C语言版】计算1~n与1~m每一项相互乘积的和
  • ArcGIS 水文分析升级:基于深度学习的流域洪水演进过程模拟
  • windows安装python环境以及对应编辑器的详细流程
  • 告别数据不一致!Spring Boot+Canal+RocketMQ实现精准的MySQL变更监听
  • 【flutter 在最新版本中已经弃用了传统的 apply from 方式引入 Gradle 插件】
  • 源哈希(sh)解析
  • 如果让计算机理解人类语言- One-hot 编码(One-hot Encoding,1950s)
  • Charles 中文版抓包工具详解:加速 API 调试与网络问题排查
  • tensorflow武林志第三卷第一章:天罗剑网
  • 【Java】switch,case,default,break用法
  • 在线学堂-4.媒资管理模块(三)
  • 技术面试题,HR面试题
  • LastActivityView -查看电脑上的所有操作记录
  • 基于MATLAB的图片和视频时间戳识别与可视化系统
  • 国际数字影像产业园:一站式服务,加速企业成长
  • 国产DSP,QXS320F280049,QXS320F28377D,QXS320F2800137,QXS320F28034
  • unity luban接入