vscode新建html运行js,用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
vscode新建html运行js,用Visual Studio Code创建JavaScript运行环境相关推荐
- Visual Studio Code如何编写运行C、C++
Visual Studio Code如何编写运行C.C++ 作者:知乎用户 链接:https://www.zhihu.com/question/30315894/answer/154979413 来源 ...
- Visual Studio Code下c语言环境的安装与运行
Visual Studio Code下c语言环境的安装与运行 在我们以往的c语言的学习中,c语言的编写代码用的最多的是c free5.0或者vc++6.0,这种软件的学习是我们最初使用的,也是经典的. ...
- 使用Visual Studio Code搭建TypeScript开发环境
使用Visual Studio Code搭建TypeScript开发环境 1.TypeScript是干什么的 ? TypeScript是由微软Anders Hejlsberg(安德斯·海尔斯伯格,也是 ...
- Visual Studio Code搭建TypeScript开发环境
转载 http://www.cnblogs.com/sunjie9606/p/5945540.html 使用Visual Studio Code搭建TypeScript开发环境 1.TypeScrip ...
- 配置Visual Studio Code的SciLab开发环境
配置Visual Studio Code的SciLab开发环境 引言 整体思路 插件安装 设置环境变量 设置setting.json 引言 由于美国将一批中国高校列入了实体清单制裁,近日Mathwor ...
- visual studio code安装shadertoy特效环境
vscode安装shadertoy特效环境搭建教程 visual studio code安装shadertoy特效环境搭建教程 shadertoy介绍 搭建shadertoy环境 下载拓展插件 GLS ...
- Visual Studio Code 配置 Java开发环境
第一步:下载vscode 官网:Visual Studio Code - Code Editing. Redefined 第二步:下载Java 官网:Java Downloads | Orac ...
- 在Visual Studio Code配置GoLang开发环境
在Visual Studio Code配置GoLang开发环境 作者:chszs,未经博主允许不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs Visu ...
- linux .net 控制台应用程序,使用 Visual Studio Code 创建 .NET 控制台应用程序 - .NET | Microsoft Docs...
教程:使用 Visual Studio Code 创建 .NET 控制台应用程序Tutorial: Create a .NET console application using Visual Stu ...
最新文章
- R语言ggplot2可视化小提琴图(violin plot)并使用ggsignif添加分组显著性(significance)标签
- PHP zval内存回收机制和refcount_gc和is_ref_gc
- 有什么值得推荐的Java Web练手项目?
- Python必学内容:格式化输出的三种方式
- Altium designer中导入CAD文件
- 【C/C++12】天气APP:不同数据建表入表,数据交换(exptables.cpp,ftpputfiles.cpp)
- java 对象加密_java.security包实现对象加密
- 实战案例丨分布式系统中如何用python实现Paxos
- 一个老程序员的心里话---想创业的技术人员可以看
- 解决docker容器开启端口映射后,会自动在防火墙上打开端口的问题
- python中lower()函数的用法
- 那些年 我们都在...
- CSS里 @import用法
- txt格式单词导入有道词典生词本
- Excel宏的基本逻辑语句
- 关于word中如何生成自动目录以及页码编排
- 哈尔滨计算机管理,哈尔滨戴斯酒店计算机管理系统.doc
- 米兔机器人第三代测评_米兔智能机器人——年轻人的第一台 31313?
- 普通人现在入局做抖音短视频晚么 选择项目的标准是什么
- zstu新生赛 Problem A: Baby Coins(折半枚举+二分)