用Visual Studio Code创建JavaScript运行环境

什么是VSCode

Visual Studio Code (简称 VS Code / VSC) 是一款于2015年由微软免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。一般我们开发web应用都推荐WebStrom,但是目前自己正处于学习阶段觉得没必要装那么大的一个IDE，不知道VSCode之前也想过用Sublime Text 或者EditPlus觉得这些编辑器就够用了，最近部门在做分享的时候看到几个同事都用这个，并且都说非常好用比Sublime功能更加强大，好奇心驱使下下来使用了会 也被它的简洁和功能强大吸引于是想也没想准备把VSCode作为学习RN的编辑器一直使用。下面简单介绍下使用VSCode调试js代码环境的配置。

下载软件

1.可以从官网直接下载vscode，软件很小才60几M，我现在使用的是最新的1.15.1版本
2.咱们调试js需要用到浏览器，配置的插件是用Chrome浏览器，所以没有的话装一个。
3.从官网下完之后一直下一步就安装完成了

安装必要的扩展插件

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

vs01.jpg

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

vs02.jpg

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

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

Paste_Image.png

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

Paste_Image.png

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

Paste_Image.png

7.接下来本来是需要配置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}"
        }
    ]
}

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

Paste_Image.png