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

用Visual Studio Code创建JavaScript运行环境【2024版】

用Visual Studio Code创建JavaScript运行环境

JavaScript 的历史

JavaScript 最初被称为 LiveScript,由 Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登·艾奇(Brendan Eich)在 1995 年开发。在 Netscape 与 Sun(一家互联网公司,全称为“Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了 JavaScript。
在这里插入图片描述

下载软件

1.可以从官网直接下载vscode,软件很小,我现在使用的是最新的1.80.1版本
2.咱们调试js需要用到浏览器,配置的插件是用Chrome浏览器,所以没有的话装一个。
3.从官网下完之后一直下一步就安装完成了

安装必要的扩展插件

1.VSCode界面很简洁安装完之后所有的功能都一目了然,我们需要安装插件可以点击如图的工具和语言:

在这里插入图片描述

2.安装以下两个插件如图:

在这里插入图片描述
在这里插入图片描述

3.我们要调试一个js,需要创建一个html文档里面添加js方法,简单创建个文件,可以直接拖到编译器上,内容如下:

<!DOCTYPE html>
<html><head><title>JavaScript</title>
</head><body><div id="demo"></div><script>// 在 id 属性为 demo 的标签中添加指定内容document.getElementById("demo").innerHTML = "Hello World";</script>
</body></html>

4. 文件放到编译器之后,我们按下F5会有一个弹出框提示我们使用什么环境,因为我们还没创建所以选择more按钮添加插件能让我们进行调试:

在这里插入图片描述

5.进入扩展商店列表我们可以选择JavaScript Debugger插件进行安装,安装完后我们需要重启环境才会生效,或者点击重新加载:

在这里插入图片描述

6.安装完之后再次按下F5时就可以看到Chrome了,选择之后编译器会在当前html文件同目录下创建一个.vscod文件夹里面有一个launch.json的配置文件,同时在编译器显示出来:

在这里插入图片描述

7.做好这些以后按下F5我们会发现已经可以正常运行啦,可以安心学习我们的js基础知识了

如果调试有问题欢迎留言讨论,希望大家顺利开启JavaScript之旅

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

相关文章:

  • spring-web搭建
  • C++ 之LeetCode刷题记录(二十三)
  • 在ubuntu上在安装Squid代理服务器
  • 如何解决 MySQL 的 socket 错误
  • 5G智慧钢铁厂数字孪生三维可视化,推进钢铁新型工业化数字化转型
  • 万户 ezOFFICE DocumentEditExcel.jsp SQL注入漏洞
  • OpenCV 2 - 矩阵的掩膜操作
  • linux -- 内存管理 -- 页面分配器
  • StarRocks-3.1.0 单节点部署
  • 2023美赛A题之Lotka-Volterra【完整思路+代码】
  • 关于如何将Win幻兽帕鲁服务端存档转化为单人本地存档的一种方法(无损转移)
  • 计算机网络——IP协议
  • Linux命令-ar命令(建立或修改备存文件,或是从备存文件中抽取文件)
  • flask基于python的个人理财备忘录记账提醒系统vue
  • 【leetcode题解C++】257.二叉树的所有路径 and 404.左叶子之和 and 112.路径总和
  • Linux——文本编辑器Vim
  • 以“美”为鉴,探寻香港比特币现货ETF的未来发展
  • Unity项目打包的方法(之一)
  • 如何安装MySQL
  • 如何编写.gitignore文件
  • U-Boot学习(7):内核启动之bootz启动zImage源码分析
  • [GN] DP学习笔记板子
  • GLog开源库使用
  • 微信小程序如何实现点击上传图片功能
  • Windows Qt C++ VTK 绘制三维曲线
  • Android T 远程动画显示流程(更新中)
  • 【计算机网络】【练习题及解答】【新加坡南洋理工大学】【Computer Control Network】
  • 云计算HCIE备考经验分享
  • Threejs API——`OrbitControls`相机控件
  • 远程教育:低代码在教育技术领域的重塑之力