1. 前言
VSCode虽然是一个代码编辑器,没有从本质上改变编写代码的含义。但是VSCode的使用还是比较复杂的,为啥复杂呢,因为它提供了各式各样的功能,功能多,自然就复杂了。
所以还是要给各位新同学介绍下VSCode的基本用法,便于大家快速的上手操作。
2. 界面修改为中文
首先就是要将默认的英文界面,修改为熟悉的中文界面了,这样起码英语并不是很好的同学上手起来就轻松多了。
首先点击插件拓展菜单,点击后,可以搜索想要的插件进行功能拓展。
然后在搜索框输入Chinese,表示咱们要查找中文相关的插件,搜索结果如下,点击Install按钮安装即可。
安装完毕后,退出重启VSCode,界面就是中文的了。
3. 管理项目文件夹
大家注意,不管是写什么代码,都得把代码文件管理好。
我见过太多的同学,编写的代码文件东一个、西一个,每次让我帮忙调试代码的时候,自己都找不到代码文件在哪。
其实,管理代码文件,就跟管理普通文件一样,应该按文件夹分门别类放好,同一个项目的代码文件应该都放到一个文件夹下,便于集中管理。
例如,我们现在学习的是JavaWeb教程,所以可以建立一个文件夹java-web-course,学习过程中的相关文件都可以放到这个文件夹中。
然后可以使用VSCode,将整个文件夹添加到工作区中,这样就可以在VSCode左侧工作区进行快捷操作了。
点击VSCode菜单栏的【文件】-【将文件夹添加到工作区】,然后选中刚刚建立的java-web-course文件夹,即可在工作区对其进行方便快捷的管理了。
4. 添加文件夹
JavaWeb课程有很多内容,包括html、css、js、bootstrap、java、数据库等等。
所以我们可以在java-web-course文件夹下再建立一些子文件夹,便于对这些内容分类管理。
直接在工作区,右键点击java-web-course,在弹出菜单中点击【新建文件夹】。
然后将新的文件夹命名为【html】,以后编写的html文件都可以放到这个文件夹下,便于统一管理。
5. 添加网页文件
右键点击刚刚建立的【html】文件夹,在弹出的菜单中选择【新建文件】。
将新建文件命名为hello.html,这样它就是一个网页文件了。
6. 编辑文件
单击【hello.html】文件,右侧内容区即可对网页代码进行修改,我们随便编写一段代码如下:
编辑完成后,注意保存,可以点击【文件】-【保存】,或者直接按【Ctrl+S】快捷键保存。
我们的代码只有保存后,才能在查看时生效。
7. 代码格式化
代码格式化,是指让代码排版更加美观好看,一般我们会让子标签相对于父标签进行缩进,以便能看出代码的层次结构,更加利于对代码的理解。
VSCode可以通过【Alt+Shift+F】快捷键对代码进行格式化,非常方便。
在这之前,我们还需要安装一个插件,以便让VSCode支持对html代码的格式化。(毕竟语言种类这么多,VSCode也不可能上来就支持所有语言的格式化,所以还是通过安装对应插件的方式提供这一个功能)。
我们选择安装Beautify插件即可,通过该插件的说明,我们可以了解到该插件可以同时支持javascript、JSON、CSS、HTML等文件的格式化,可以说是非常强大了。至于如何安装该插件,与安装中文支持插件一样,搜索后点击【Install】安装即可。
8. 代码格式化说明
此时我们按【Ctrl+Alf+F】对刚刚的代码进行格式化,如下:
<html>
<body>
this is hello.html
</body>
</html>
1
2
3
4
5
6
7
格式化后的代码,会非常规范,当然目前的例子中,代码很少,还看不出来。如果写上一大堆代码,然后格式化,会明显的发现这些代码会排的整整齐齐。
在初学者阶段,还是强烈建议大家多学习代码的格式化,看看插件是如何让代码井井有条的,然后大家在编写代码的时候,也提醒自己安装格式化的规范去编写漂亮的代码。
9. 预览网页
使用鼠标指向网页文件的标签,点击右键,选择【复制路径】。
然后打开浏览器,将复制的内容【粘贴】到地址栏,然后按回车即可查看网页效果了:
10. 快速预览网页
也可以通过安装【Open In Default Browser】插件后,在网页编辑页面点击【Ctrl+1】快捷键,则会自动弹出浏览器对当前网页进行预览,更加的方便快捷。
11. 小结
VSCode用法千千万,还需要大家多多使用,熟能生巧。
编程,本质上是一种技能,需要反复的锤炼。
就好比开车,老司机是怎么练成的,无他,但手熟尔!