Visual Studio Code 小白使用介绍

拼搏现实的明天。 2022-01-26 11:55 223阅读 0赞

**前言**

现在使用**Vscode**编码的人越来越多，凭借着免费，开源，轻量，跨平台的特点收货了一大批忠实粉丝

最近因项目需要开始使用**Vscode**，但不知为何，感觉有点力不从心，不知道该怎么用

首先想到去官网看看，然后放弃了（英语渣渣表示压力山大，其实正因为英语差，才更应该锻炼一下的，大家不要学我23333）

最后自己摸索和看相关视频才豁然开朗。现在做一个归纳总结，希望能帮到有需要的人

**下载**

**官网下载：[https://code.visualstudio.com/][https_code.visualstudio.com]**

**汉化中文（官方下载默认为英文，英文好的小伙伴可直接跳过这步）**

点击插件按钮搜索 **Chinese**, 在弹出的选项中选择第一个中文简体

![4624570-3ab32bb8f1281146.png][]

img

然后右边会弹出如下图安装界面，接着点击 **Install** 安装

![4624570-b107d0d2a00ff430.png][]

img

安装完毕后会有如下提示**（主要提醒你安装完中文简体汉化包后一定要重启方可生效）**

![4624570-8b6fa8316af81780.png][]

img

**Vscode界面介绍（主要分为5个区域，分别是活动栏，侧边栏，编辑栏，面板栏，状态栏）**

![4624570-48b499e37f0cf5f2.png][]

img

**①：**活动栏从上到下依次为，打开侧边栏，搜索，使用git，debug，使用插件

**②：**侧边栏，新建项目文件和文件夹

**③：**编辑栏，编写代码的区域

**④：**面板栏，从左到右依次为，问题，输出，调试栏，终端（terminal），最重要的是**terminal**，用来输入相关命令

![4624570-40840bf4500dceed.png][]

img

**⑤：**状态栏，点击 \[图片上传失败...(image-bcdf98-1559059441856)\].png)\[图片上传失败...(image-a50ab7-1559059441856)\] 该区域可以调出面板栏

**⑥：**需要注意的为下图红框所示，分别表示鼠标光标所在位置和**tab**缩进字符，这里为缩进4个字符

![4624570-32ded0c8d9dbe9c0.png][]

**img**

**新建文件和文件夹**

**新建文件：Ctrl+N**新建文件并修改后缀即可（后缀根据所需文件来，比如.html，.css，.js等）

**新建文件夹**

**①：**首先根据需要指定一个路径（这里路径以桌面为例），然后新建一个文件夹（这里新建的文件夹为demo1）

**②：**鼠标点击侧边栏第二个选项，如下图

![4624570-10fe87392ca0da87.png][]

img

**③：**此时会提示你没有可以打开的文件夹，点击**Open Folder**按钮导入桌面新建的文件夹demo1

![4624570-c024f567b4e63232.png][]

img

**④：**把文件夹导入后发现刚刚新建文件夹名字是小写的，现在变大写了，这个不影响，不用太在意

![4624570-1c573ceb4202b2d9.png][]

img

（右边图标从左到右为，新建文件 / 新建文件夹 / 刷新 / 折叠文件）

**注：**新建文件一定要修改后缀，否则默认都是text文本文件

**自动保存设置**

**File**（文件）- **Preferences**（首选项）- **Setting** （设置）然后弹出下面界面，选择**User**（一般会默认选中该选项），

接着如下图选择**afterdelay**选项即可，下面有个数字1000表示1秒，这个可自行设置，表示多少秒以后自动保存

![4624570-7f8d8658eb487996.png][]

img

**自动格式化代码**

**File**（文件）- **Preferences**（首选项）- **Setting** （设置）

**User**（用户）- **Text-Editor**（文本编辑）- **Formatng**（格式化）

然后勾选下图红色框中的选项后重启**Vscode**即可

![4624570-bf3853730197c719.png][]

img

**Vscode更换主题**

**File**（文件）- **Preferences**（首选项）- **Color-Theme** （颜色主题）

![4624570-20bd401574b3f373.png][]

img

然后会出现下图红色框的界面，此时按键盘上的上下键即可实时查看主题颜色，直接回车可选中对应主题

![4624570-db06851645d21eb7.png][]

img

**注：**可以点击插件直接搜索 **theme** 下载其它非内置主题

**快捷键（只列出了很小一部分常用快捷键）**

**Ctrl + /** （单行注释）

**Shift + Alt + A** （多行注释）

若要取消单行或多行注释在按一次该快捷键即可

**Ctrl + Shift + Enter** （上方插入一行，鼠标光标在当前行的任意位置都可以直接换行到上一行）

**Ctrl + Enter** （下方插入一行，鼠标光标在当前行的任意位置都可以直接换行到下一行）

**Alt + Shift + F** （格式化代码，不需要全选中代码，直接格式化即可）

**Ctrl + Shift + F** （查找文件）

点击设置选择 **keyboard shortcuts**，右边会弹出所有快捷键目录

**我没有汉化中文，并不是因为英语好，相反因为英语太差，所以还是想迈出第一步，锻炼一下吧**

**大家不要怕，撸起袖子就是干ヾ(◍°∇°◍)ﾉﾞ**

![4624570-afb84060761fbff5.png][]

img

> [https://www.cnblogs.com/tu-0718/p/10935910.html][https_www.cnblogs.com_tu-0718_p_10935910.html]

[https_code.visualstudio.com]: https://links.jianshu.com/go?to=https%3A%2F%2Fcode.visualstudio.com%2F
[4624570-3ab32bb8f1281146.png]: /images/20220126/c6e5cc39aa97419684227d1a8d0fc832.png
[4624570-b107d0d2a00ff430.png]: /images/20220126/028b83f376c6473dba59cf427dbb81f0.png
[4624570-8b6fa8316af81780.png]: /images/20220126/588c14ebe29c41faba7014ea967c0818.png
[4624570-48b499e37f0cf5f2.png]: /images/20220126/1f3067a6d74048af8045523d58cb2f98.png
[4624570-40840bf4500dceed.png]: /images/20220126/7e7094b277a94003bc582b0e8ef6054f.png
[4624570-32ded0c8d9dbe9c0.png]: /images/20220126/dbf7abec597b4fb1aae7264025b2dee5.png
[4624570-10fe87392ca0da87.png]: /images/20220126/f9357d18e31f426c9c30416650901d7b.png
[4624570-c024f567b4e63232.png]: /images/20220126/d046ea51bbb442ceaeeb90383df6daab.png
[4624570-1c573ceb4202b2d9.png]: /images/20220126/24acc53d191c48499847fe9281353a83.png
[4624570-7f8d8658eb487996.png]: /images/20220126/a2a5cf4e50394bc982173d53839aa6b5.png
[4624570-bf3853730197c719.png]: /images/20220126/ed732b4d7e944476977554798f3509ef.png
[4624570-20bd401574b3f373.png]: /images/20220126/298b0985df3b4e6dbf5442d7139655bb.png
[4624570-db06851645d21eb7.png]: /images/20220126/86271eb72d6b4007b95e275e494f1675.png
[4624570-afb84060761fbff5.png]: /images/20220126/0ede31f6f0564009bd16effd0fe5c2c3.png
[https_www.cnblogs.com_tu-0718_p_10935910.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.cnblogs.com%2Ftu-0718%2Fp%2F10935910.html