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

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

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

vscode 配置javaweb开发环境,超级简单,纯新手带图,学会后真香.宇宙无敌第一编辑器vscode
vscode配置javaweb开发环境 1.vscode配置java环境 2.下载tomcat 在官网中下载https://tomcat.apache.org/download-10.cgi 3.下载 ...
visual code php,vscode(Visual Studio Code)配置PHP开发环境的方法(已测)_编程开发_软件教程...
Visual Studio Code一个轻量且强大的代码编辑器,支持Windows,OS X和Linux.内置JavaScript.TypeScript和Node.js支持,而且拥有丰富的插件生态系统 ...
VSCode配置JAVA开发环境，java初级面试笔试题
我总结出了很多互联网公司的面试题及答案,并整理成了文档,以及各种学习的进阶学习资料,免费分享给大家. 扫描二维码或搜索下图红色VX号,加VX好友,拉你进[程序员面试学习交流群]免费领取.也欢迎各位一起 ...
vscode配置OpenGL开发环境【详细】
vscode配置OpenGL开发环境[详细] 0. 前言本配置过程是参考b站的一位up主文档大嫖客的视频,将其总结为文本文档,以便记忆. up主视频地址为:https://www.bilibili. ...
VSCode配置python开发环境无法找到自己设置的python编译器
VSCode配置python开发环境无法找到自己设置的python编译器前言一. 分别安装VScode和python 二.vscode配置python环境 1.在vscode里安装官方python ...
VScode+PHPstudy配置PHP开发环境详解
这篇文章主要介绍了VScode+PHPstudy配置PHP开发环境的步骤,整理了官方以及优秀第三方的内容,对于学习和工作有一定借鉴意义. 准备安装的软件:VScode和PHPstudy. 链接:htt ...
VScode结合Anaconda配置Python开发环境
VScode结合Anaconda配置Python开发环境 1.选择 [文件]–>[首选项]–>[设置] 2.点击右上角的"打开设置(json)",打开配置文件 Sett ...
Go 学习笔记（1）— Ubuntu 系统 Go 环境搭建、VS Code 配置 Go 开发环境、VS Code 远程开发配置
1. 安装说明 Ubuntu 下直接安装 Go 1.11 版本编译器时需要依赖 Go 1.4 版本.所以如果在使用 apt-get install go安装时参考以下链接安装:https://blog ...
vscode使用教程python-用VScode配置Python开发环境
前言 VScode是一个相当优秀的IDE,具备开源.跨平台.模块化.插件丰富.启动时间快.颜值高.可高度定制等等优秀的特质,不愧是微软爸爸的私生子. 所以用VScode来编写Python,也是相当的好 ...

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

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

最新文章

热门文章