vscode中装js解释器_h5学习记录（1）--vscode配置js开发环境

文笔不是很好，第一次写东西，主要为了记录h5的学习过程。今天记录的是vscode配置js开发环境。

什么是VSCode

Visual Studio Code (简称VS Code/VSC) 是一款于2015年由微软免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。之前用过sublimit text，为何选择VSCode主要是简洁，功能强大，适合新手学习使用。(下载链接：https://code.visualstudio.com)

安装必要的扩展插件

下载插件都在图中红框位置

下载安装好之后是英文的，如果需要转换成中文，可以先在搜索框中搜索chinese点击install就可以了。

1.在图中位置选择工具和语言，我们使用的是JavaScript，其他语言如有需求自行选择。

2.需要两个必要的扩展插件：Code Runner、HTML CSS Support。还有一个是后面会用的Debugger for Chrome，调试的时候用谷歌浏览器运行需要用这个插件，可以提前安装好。

配置调试环境

1.在任何位置创建一个新的文件夹，我选择在桌面创建了一个测试文件夹。

2.在vscode中点击新建文件

3.在图中红框内可以看到我们新建的文件untitled-1，没有任何后缀的文件，这时需要保存文件至刚才创建的文件夹里面。

4.在给文件保存的时候重命名为test.html，同样需要创建css文件后缀就改为.css

5.保存好后可以看到文件已经是html格式的文件，然后点击打开文件夹，打开的是你创建的文件夹(上图中的h5test文件夹)，不是文件夹里面刚才保存的html文件，打开后可以看到图2这个样子

1

2

6.在html文件中输入以下测试内容，输完后保存一下

7.按下F5会有一个弹出框提示我们使用什么环境，前面我提到过安装Debugger for Chrome插件，因此这里会有chrome选项，点击即可。如果没有chrome选项就选择more按钮添加Debugger for Chrome插件，然后再按F5选择Chrome。用其他浏览器的话下载其他浏览器的插件。

8.选择Chrome后可以看到有个launch.josn文件，可以直接在url对应的值填上路径，不知道路径是什么可以先自己用chrome浏览器打开文件夹内的html文件，然后直接复制浏览器的地址到 url对应的值里面如下

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