vscode入门使用教程(页面调试)

摘要:
第一次使用vscode时,似乎所有需要使用的功能都需要单独安装插件。这让很多第一次使用vscode的朋友有点不知所措。现在我将带您学习如何使用vscode进行最基本的工作页启动和代码调试。我将安装官方vscode网站的下载地址:https://code.visualstudio.com/docs/?

初次使用vscode时各种不适应,所有需要用到的功能貌似都需要单独安装插件才能用。这让很多初次使用vscode的朋友有点无所适从。

下面本人就带各位朋友学习下如何使用vscode来进行最基本的工作——页面启动与代码调试

一、安装vscode(已经安装的朋友忽略,直接进行第二步)

官网下载地址:https://code.visualstudio.com/docs/?dv=win

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

二、安装中文插件

vscode默认是英文菜单,想以中文形式来显示的朋友可以搜索插件【Chinese (Simplified) Language Pack for Visual Studio Code】,如图:

vscode入门使用教程(页面调试)第1张

安装之后,点击重新加载,或者重启vscode,既可以中文形式显示菜单。

三、页面调试

1. 配置launch.json

vscode入门使用教程(页面调试)第2张

配置完此处的朋友先不要着急进行尝试,因为此时点击绿色的开始按钮调试启动后,发现页面并打不开,只是个浏览器链接失败的提示。

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

2. 安装插件【Live Server】

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

vscode入门使用教程(页面调试)第3张

安装完成如果左侧有【重新加载】的提示,则点击该按钮以重新加载。

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

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

使用本地静态页面调试:

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

vscode入门使用教程(页面调试)第4张

vscode入门使用教程(页面调试)第5张

使用服务器形式进行调试:

此时我们安装的live server就派上用场了,同样打开要调试的页面,鼠标在页面任意地方右键单机,选择“Open with live server”,如图:

vscode入门使用教程(页面调试)第6张

vscode入门使用教程(页面调试)第7张

此时我们想使用vscode进行代码调试的需求到这里就已经大功告成了!!!

最后,为大家推荐一个好看的vscode文件图标主题插件:【Material Icon Theme】

效果如图:vscode入门使用教程(页面调试)第8张

喜欢本文章的朋友,欢迎关注公众号【程序员在职场】支持一下小编。

 vscode入门使用教程(页面调试)第9张

免责声明:文章转载自《vscode入门使用教程(页面调试)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇什么是商誉matlab中git的使用下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

VSCode 中Python代码自动补全与智能提示【转】

使用IDE编程,为了就是它的方便性、快捷性。而如何在VSCode中设置python环境的自动补全与智能提示呢?主要有下面两种方式: 使用微软插件 Visual Studio IntelliCode下载 Visual Studio IntelliCode 插件在VSCode 的 Extensions 中搜索 IntelliCode,选择 Visual Stu...

半吊子菜鸟学Web开发6 -- Vscode开发环境配置

1vscode上手一周不到,终于弄出点门路,终于弄清楚了点vscode的设置是什么样子的了....哭 2就我这两天的使用来看,一般vscode默认只让打开一个文件夹,然后在你打开的文件夹里面自动生成 一个.vscode的文件夹(隐藏的,正常是看不见的) 3.vscode文件夹里面会生成两个文件 一个是launch.json,这是用来调试的时候,记录你调试的...

Ubuntu18.04完全卸载vscode

https://blog.csdn.net/a772304419/article/details/105976347 查看该软件的安装位置:$ whereis code 卸载vscode的方法有很多,选其中之一即可。具体如下: (1) 通过 apt-get 方式安装的,删除时会提示确认:$ sudo apt-get remove code # 只是卸载,保...

解决vscode开发react项目没有代码提示问题

1.安装插件 在插件库搜索:Reactjs code snippets,进行安装  2.禁用自动类型获取 打开设置,在搜索栏输入:@tag:usesOnlineServices,找到TypeScript:Disable Automatic Type Acquistion,将其禁用  3.解决JSX中tab没有自动补全 在JSX中HTML标签按tab键没...

VSCode拓展插件推荐

大牛VSCode拓展插件推荐 https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2FvarHarrie%2FDawn-Blossoms%2Fissues%2F10   1、配置:个人的VSCode首选项配置(文件-首选项-设置)     { "editor.tabSize": 2, "file...

Unity使用VSCode没有代码提示/代码无法折叠

VS Code打开之前的项目都还有自动提示,现在新建的项目却没有了提示 解决方法:用VS 先在Unity编辑器里将默认代码编辑器换成Visual Studio 随便打开一个脚本,等Visual Studio完成全部加载工作(IDE左下角) 回到Unity编辑器,重新设置默认代码编辑器为VS Code,这时候再用code就会恢复提示功能 注意:需要...