Rumah > alat pembangunan > VSCode > vscode如何配置js运行环境

vscode如何配置js运行环境

王林
Lepaskan: 2019-12-14 17:31:16
asal
20804 orang telah melayarinya

vscode如何配置js运行环境

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

d3496617bc5f88cabfc7d31610b3dfb.png

安装以下两个插件如图:(你也可以选择其他这里只是示例)

6e0f4fbf44300bfa8fa39e25c838138.png

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

<html>    
    <body>
        <script>windows.alert(&#39;Hello World&#39;)</script>
    </body>
</html>
Salin selepas log masuk

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

f5f631d66559e5b434f66ae153681d9.png

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

6043da7a7cc565bef1c2e13b867f4a4.png

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

e5e3f55d6eab33c970c6b86365542e4.png

接下来本来是需要配置IIS的,但是目前处于学习阶段,后面也不是为了学习web,所以我们就不去配置什么本机的IIS服务了,可以直接在url对应的值填上路径,不知道路径是什么可以先自己用浏览器打开,直接复制浏览器的地址到 url对应的值里面如下:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "file:///C:/Users/xfdg/Desktop/jsCode/helloworld.html",
            "webRoot": "${workspaceRoot}"
        }
    ]}
Salin selepas log masuk

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

d154e36c2d19e22c8e374454638b278.png
相关文章教程推荐:vscode教程

Atas ialah kandungan terperinci vscode如何配置js运行环境. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan