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文件图标主题插件:[材质图标主题]
效果如图所示: