搭建JavaScript学习实验环境

1,071 阅读1分钟

JavaScript 实验环境搭建,自动加载JavaScript代码,避免手动刷新

安装vscode

从下面的地址下载和安装vscode,编写html和JavaScript

code.visualstudio.com/

安装 vscode 插件 live server

主要用于JavaScript的热加载,即当我们在js文件中编写代码,保存时,自动加载js文件。 image.png

创建测试工程文件夹和文件

  1. 创建文件夹JavaScript-demo,拖文件夹到编辑区域
  2. 创建文件index.html 通过! + tab 快速创建html模板

<script src="./index.js"></script> 引入index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>aaa</p>
    <script src="./index.js"></script> // 引入index.js
</body>
</html>
  1. 创建index.js

启动 live server

view->command Palette image.png

输入 reload server

image.png 右下角多出go live,点击go live,自动打开浏览器 image.png

这是就可以通过chrome的开发者工具,打开consosle,可以查看js的输出

image.png

另一个插件 Quokka.js

  1. 搜索插件安装
  2. ctrl +shift + p 创建

image.png

效果

image.png

总结

通过以上的配置,当我们在index.js中编写测试案例,console.log输出日志,保存时,能实时在console中看到输出的内容