JavaWeb学习之路(12)--VSCode基础入门用法详解

布满荆棘的人生 2022-09-12 05:51 238阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 界面修改为中文
 *  3. 管理项目文件夹
 *  4. 添加文件夹
 *  5. 添加网页文件
 *  6. 编辑文件
 *  7. 代码格式化
 *  8. 代码格式化说明
 *  9. 预览网页
 *  10. 快速预览网页
 *  11. 小结

# 1. 前言 #

VSCode虽然是一个代码编辑器，没有从本质上改变编写代码的含义。但是VSCode的使用还是比较复杂的，为啥复杂呢，因为它提供了各式各样的功能，功能多，自然就复杂了。

所以还是要给各位新同学介绍下VSCode的基本用法，便于大家快速的上手操作。

# 2. 界面修改为中文 #

首先就是要将默认的英文界面，修改为熟悉的中文界面了，这样起码英语并不是很好的同学上手起来就轻松多了。

首先点击插件拓展菜单，点击后，可以搜索想要的插件进行功能拓展。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]  
然后在搜索框输入`Chinese`，表示咱们要查找中文相关的插件，搜索结果如下，点击`Install`按钮安装即可。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]  
安装完毕后，退出重启VSCode，界面就是中文的了。

# 3. 管理项目文件夹 #

大家注意，不管是写什么代码，都得把代码文件管理好。

我见过太多的同学，编写的代码文件东一个、西一个，每次让我帮忙调试代码的时候，自己都找不到代码文件在哪。

其实，管理代码文件，就跟管理普通文件一样，应该按文件夹分门别类放好，同一个项目的代码文件应该都放到一个文件夹下，便于集中管理。

例如，我们现在学习的是JavaWeb教程，所以可以建立一个文件夹java-web-course，学习过程中的相关文件都可以放到这个文件夹中。

然后可以使用VSCode，将整个文件夹添加到工作区中，这样就可以在VSCode左侧工作区进行快捷操作了。

点击VSCode菜单栏的【文件】-【将文件夹添加到工作区】，然后选中刚刚建立的java-web-course文件夹，即可在工作区对其进行方便快捷的管理了。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]

# 4. 添加文件夹 #

JavaWeb课程有很多内容，包括html、css、js、bootstrap、java、数据库等等。

所以我们可以在java-web-course文件夹下再建立一些子文件夹，便于对这些内容分类管理。

直接在工作区，右键点击java-web-course，在弹出菜单中点击【新建文件夹】。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]  
然后将新的文件夹命名为【html】，以后编写的html文件都可以放到这个文件夹下，便于统一管理。

# 5. 添加网页文件 #

右键点击刚刚建立的【html】文件夹，在弹出的菜单中选择【新建文件】。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center 1]  
将新建文件命名为`hello.html`，这样它就是一个网页文件了。

# 6. 编辑文件 #

单击【hello.html】文件，右侧内容区即可对网页代码进行修改，我们随便编写一段代码如下：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]  
编辑完成后，注意保存，可以点击【文件】-【保存】，或者直接按【Ctrl+S】快捷键保存。

我们的代码只有保存后，才能在查看时生效。

# 7. 代码格式化 #

代码格式化，是指让代码排版更加美观好看，一般我们会让子标签相对于父标签进行缩进，以便能看出代码的层次结构，更加利于对代码的理解。

VSCode可以通过【Alt+Shift+F】快捷键对代码进行格式化，非常方便。

在这之前，我们还需要安装一个插件，以便让VSCode支持对html代码的格式化。（毕竟语言种类这么多，VSCode也不可能上来就支持所有语言的格式化，所以还是通过安装对应插件的方式提供这一个功能）。

我们选择安装`Beautify`插件即可，通过该插件的说明，我们可以了解到该插件可以同时支持`javascript、JSON、CSS、HTML`等文件的格式化，可以说是非常强大了。至于如何安装该插件，与安装中文支持插件一样，搜索后点击【Install】安装即可。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]

# 8. 代码格式化说明 #

此时我们按【Ctrl+Alf+F】对刚刚的代码进行格式化，如下：

<html>
    
    <body>
        this is hello.html
    </body>
    
    </html>

格式化后的代码，会非常规范，当然目前的例子中，代码很少，还看不出来。如果写上一大堆代码，然后格式化，会明显的发现这些代码会排的整整齐齐。

在初学者阶段，还是强烈建议大家多学习代码的格式化，看看插件是如何让代码井井有条的，然后大家在编写代码的时候，也提醒自己安装格式化的规范去编写漂亮的代码。

# 9. 预览网页 #

使用鼠标指向网页文件的标签，点击右键，选择【复制路径】。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center 2]

然后打开浏览器，将复制的内容【粘贴】到地址栏，然后按回车即可查看网页效果了：  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]

# 10. 快速预览网页 #

也可以通过安装【Open In Default Browser】插件后，在网页编辑页面点击【Ctrl+1】快捷键，则会自动弹出浏览器对当前网页进行预览，更加的方便快捷。

# 11. 小结 #

VSCode用法千千万，还需要大家多多使用，熟能生巧。

编程，本质上是一种技能，需要反复的锤炼。

就好比开车，老司机是怎么练成的，无他，但手熟尔！

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/f0941d8add084f858c5dc171b5512397.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/6bafc47d4a1741f2ac304196cdefa13b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/9a3bcee769b745aa8cc137f4ae60fe30.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220828/5c1d09c05df94eb1bb9a0507b8064a56.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: /images/20220828/0c5927c8757a427ca81e497061b70149.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 3]: /images/20220828/75c1673618ef445ea8d4999513736e1d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 4]: /images/20220828/cd46614025514f48a25a0184e7d42478.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center 2]: /images/20220828/5fac94ef60c34da6ab074c79cd2470fb.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 5]: /images/20220828/f2525bf6dd5845779a3ebd7adb1a6fc8.png