vscode运行页面,vscode项目启动,vscode入门教程之页面启动与代码调试

vscode运行页面,vscode项目启动,vscode入门教程之页面启动与代码调试

VScode是微软推出的一款轻量级编辑器,使用和VS一样的UI,今天边肖给大家带来一个如何使用vscode做最基本工作的小教程。希望你能喜欢。

第一次使用vscode时,并不满足各种要求。好像所有需要用到的功能都需要单独安装才能使用。这让很多第一次使用vscode的朋友无所适从。

我会带朋友们学习如何使用vscode做最基础的工作:——页启动和代码调试。

1.安装vscode(已经安装的朋友忽略,直接进入第二步)

:https://code.visualstudio.com/docs/?官网dv=win

等待几秒钟,下载框会自动弹出。

第二,安装中文插件

默认情况下,Vscode是一个英文菜单。想用中文显示的朋友可以搜索插件【visual studio代码中文(简体)语言包】,如图:

安装后,单击重新加载,或重新启动vscode以中文显示菜单。

第三,页面调试

1.配置launch.json

这里的朋友配置好之后,不要急着尝试,因为当你点击绿色开始按钮调试启动的时候,发现页面打不开了,只是浏览器链接失败的提醒。

此时,我们需要安装apache和iis之类的服务器插件,以支持页面在模拟服务器中运行和显示。

2.安装插件[实时服务器]

这就是上面提到的支持模拟服务器中运行的页面的插件,如图:

完成安装。如果左侧出现[重新载入]提示,点击此按钮重新载入。

3.打开html页面进行调试和测试。

基础工作准备好了。此时,有两种调试模式:

使用本地静态页面进行调试:

选择自己配置的测试选项,打开要调试的页面,按F5开始调试,如图

使用服务器表单调试:

这时候我们安装的直播服务器就派上用场了。同样,打开要调试的页面,在页面任意位置右键单击单机,选择“用live server打开”,如图:

此时,我们要使用vscode来调试代码,这里就完成了!

最后推荐一个不错的vscode文件图标主题插件:[材质图标主题]

效果如图所示:

vscode运行页面,vscode项目启动,vscode入门教程之页面启动与代码调试