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

心安成长

已于 2024-02-20 18:30:40 修改

阅读量793

点赞数 7

分类专栏：前端文章标签： vscode javascript 编辑器

于 2024-01-26 11:42:37 首次发布

本文链接：https://blog.csdn.net/u014739136/article/details/135862538

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用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之旅

心安成长

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
用Visual Studio Code创建JavaScript运行环境【2024版】

JavaScript 最初被称为 LiveScript，由 Netscape（Netscape Communications Corporation，网景通信公司）公司的布兰登·艾奇（Brendan Eich）在 1995 年开发。在 Netscape 与 Sun（一家互联网公司，全称为“Sun Microsystems”，现已被甲骨文公司收购）合作之后将其更名为了 JavaScript。
复制链接

扫一扫