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

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

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用法千千万,还需要大家多多使用,熟能生巧。


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


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

相关文章
|
4月前
|
编译器 网络安全 数据安全/隐私保护
Trinitycore学习之在vscode查看远端服务器上源码配置
Trinitycore学习之在vscode查看远端服务器上源码配置
140 0
|
11月前
|
存储 Linux 开发工具
学习系统编程No.17【vscode实战】
学习系统编程No.17【vscode实战】
|
前端开发
前端知识学习案例19vs code-显示代码提示
前端知识学习案例19vs code-显示代码提示
61 0
前端知识学习案例19vs code-显示代码提示
|
前端开发
前端知识学习案例21vs code-跳转或者查看函数定义
前端知识学习案例21vs code-跳转或者查看函数定义
65 0
前端知识学习案例21vs code-跳转或者查看函数定义
|
前端开发
前端知识学习案例17vs code-选中所有出现得文本
前端知识学习案例17vs code-选中所有出现得文本
48 0
前端知识学习案例17vs code-选中所有出现得文本
|
前端开发
前端知识学习案例2vs code-创建第一个工作空间
前端知识学习案例2vs code-创建第一个工作空间
49 0
前端知识学习案例2vs code-创建第一个工作空间
|
前端开发
前端知识学习案例3vs code-编辑你的代
前端知识学习案例3vs code-编辑你的代
30 0
前端知识学习案例3vs code-编辑你的代
|
前端开发
前端知识学习案例20vs code-格式化文档
前端知识学习案例20vs code-格式化文档
72 0
前端知识学习案例20vs code-格式化文档
|
前端开发
前端知识学习案例5vs code-搜索和替换全局内容
前端知识学习案例5vs code-搜索和替换全局内容
63 0
前端知识学习案例5vs code-搜索和替换全局内容
|
自然语言处理 资源调度 JavaScript
手摸手一起学习Typescript第一天,数据类型和vscode的搭配typescript
手摸手一起学习Typescript第一天,数据类型和vscode的搭配typescript