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这个样子


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基础知识了
