用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方法,简单创建个文件,可以直接拖到编译器上,内容如下:

javascript 复制代码
<!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之旅

相关推荐
shushushu2 分钟前
Web如何自动播放音视频
前端·javascript
前端进阶者17 分钟前
天地图InfoWindow插入React自定义组件
前端·javascript
扶我起来还能学_19 分钟前
uniapp Android&iOS 定位权限检查
android·javascript·ios·前端框架·uni-app
爱学习的茄子27 分钟前
JavaScript闭包实战:防抖的优雅实现
前端·javascript·面试
前端付豪27 分钟前
9、前端日志埋点系统的架构设计
前端·javascript·架构
源猿人28 分钟前
基于 Cornerstone.js 的 Vue2 DICOM 医学图像浏览器开发实录
前端·javascript
新人11yj41 小时前
如何给网页增加滚动到顶部的功能
前端·javascript
我爱加班、、1 小时前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
香香甜甜的辣椒炒肉1 小时前
vue快速上手
前端·javascript·vue.js
向宇it2 小时前
【unity小技巧】在 Unity 中将 2D 精灵添加到 3D 游戏中,并实现阴影投射效果,实现类《八分旅人》《饥荒》等等的2.5D游戏效果
游戏·3d·unity·编辑器·游戏引擎·材质