配置环境 VScode

https://www.jianshu.com/p/4030be25c98e

跟着写:

菜鸟http://www.runoob.com/js/js-tutorial.html

廖雪峰

https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143449917624134f5c4695b524e81a581ab5a222b05ec000

w3school:http://www.w3school.com.cn/js/js_intro.asp

 

用Visual Studio Code创建JavaScript运行环境

转载:https://www.jianshu.com/p/4030be25c98e

下载软件

https://code.visualstudio.com/Download

安装必要的扩展插件

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

JS_JavaScripts学习笔记1-配置及工具开发helloworld

 

 

 

 

 

 

 

 

 

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

Code Runner

HTML CSS Support

Debugger for Chrome

JS_JavaScripts学习笔记1-配置及工具开发helloworld

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

<html>
    <body>
        <script>windows.alert('Hello World')</script>
    </body>
</html>

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

JS_JavaScripts学习笔记1-配置及工具开发helloworld

Paste_Image.png

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

JS_JavaScripts学习笔记1-配置及工具开发helloworld

 

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

JS_JavaScripts学习笔记1-配置及工具开发helloworld

 

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

(把其中的url换成自己的helloworld.js的路径)

{
    "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}"
        }
    ]
}

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

JS_JavaScripts学习笔记1-配置及工具开发helloworld

相关文章:

  • 2021-09-28
  • 2021-10-28
  • 2021-08-24
  • 2021-05-05
  • 2021-09-02
  • 2021-12-05
  • 2021-12-25
猜你喜欢
  • 2021-04-02
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-12-11
  • 2022-01-13
  • 2021-10-01
相关资源
相似解决方案