vscode 的入门使用

╰+攻爆jí腚メ 2022-12-04 09:58 289阅读 0赞

### 一、**前言** ###

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

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

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

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

### 二、**下载** ###

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

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

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

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

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

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

![format_png 1][]

**⑤：**状态栏，点击 ![20200907234041662.png][]该区域可以调出面板栏

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

** ![format_png 2][]**

2、**新建文件和文件夹**

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

**新建文件夹**

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

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

![format_png 3][]

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

![format_png 4][]

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

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

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

**3、自动保存设置**

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

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

![format_png 6][]

**4、自动格式化代码**

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

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

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

![format_png 7][]

**5、Vscode更换主题**

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

![format_png 8][]

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

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

## **三、VSCode快捷键** ##

### **1 左侧是按键，右侧是功能(下同)** ###

![在这里插入图片描述][20190905045932985.png]

### **2 基础编辑** ###

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

### **3 导航** ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 1]

### **4 搜索和替换** ###

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

### **5 多光标和选择** ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 3]

### **6 语言编辑** ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 4]

### **7 编辑器管理** ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 5]

### **8 文件管理** ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 6]

### **9 显示** ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 7]

### **10 调试** ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 8]

### **11 集成终端** ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 9]

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

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

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

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

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

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

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

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

**Ctrl + G** ，**然后@+方法名**（快速定位方法所在位置）

**Ctrl + \{**  （连续点2次左括号，即可快速实现 \{ \{\}\}）

**Ctrl + D**（同时修改多个地方，需要改几个地方就ctrl+D几次，超级实用）

![format_png 10][]

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

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

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

![format_png 11][]

**补充：**

**①：****Vscode**如何向其它编辑器一样使用浏览器打开html文件？（需要安装插件，详见下面链接）

[**https://www.cnblogs.com/lyyguniang/p/7778701.html**][https_www.cnblogs.com_lyyguniang_p_7778701.html]

**②：**若在搜索插件时有下图提示（我们目前无法链接到扩展市场）

经本人测试，稍后再试即可。若超过半小时后搜索依然有下图提示，可尝试重新安装**Vscode**

![format_png 12][]

**③：**另外，若你不想手动安装**git bash**，可以直接使用**Vscode**内置的**git**

![format_png 13][]

点击**New Terminal**后，就会出现如下界面，以前怎么使用**git**就怎么使用

**![format_png 14][]**

**注：**返回上级目录，**cd ../** 回车即可

**④：Vscode**自带代码比对（当你修改代码后，点击左边设置图标，右边就会展示修改前和修改后的代码比对）

![format_png 15][]

[https_code.visualstudio.com]: https://code.visualstudio.com/
[format_png]: /images/20221123/74d2faed156e41b0bef80920ab248024.png
[format_png 1]: /images/20221123/6a671b32f8c44965ac203156ac201cca.png
[20200907234041662.png]: /images/20221123/375d704e7ab0463b910ce59d00893d80.png
[format_png 2]: /images/20221123/432d629853274b6bafd2b66f2a413126.png
[format_png 3]: /images/20221123/d4493442e72742a0998c0daaa6f4eb0f.png
[format_png 4]: /images/20221123/b0a1a615e933401d85e68f8d95907243.png
[format_png 5]: /images/20221123/495a63b30d0c46189658bdce8638c9e1.png
[format_png 6]: /images/20221123/9aa80083b6f6466f912d699093995a1d.png
[format_png 7]: /images/20221123/e71156640aa8459c8b4f964dfc557705.png
[format_png 8]: /images/20221123/beefcaed0e41439095960757c132c7e5.png
[format_png 9]: /images/20221123/da4b46f181a34dc58d6b91c54920ad65.png
[20190905045932985.png]: /images/20221123/21896774003045488eb9b904d9514202.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70]: /images/20221123/a26c6978812543f9826363c2a9c02c22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/c884d361d38f4dbbb70e5de4bad7928c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 2]: /images/20221123/c40e3b7b8ace4a9db6ff7f98ba64c3d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 3]: /images/20221123/c6ee642597114c69b6af1c2760f3e734.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 4]: /images/20221123/c7c2b6f96950464e9d85f2a4a088efd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 5]: /images/20221123/c0080ac7a56543d1b7092644ab3c41a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 6]: /images/20221123/906c4af38fa942f4984ed9989c32d4fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 7]: /images/20221123/7db9f7e300bd48dc86783c1b39ba3771.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 8]: /images/20221123/05e142b326b447889849306d8d0bfb89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTYwMTM3OQ_size_16_color_FFFFFF_t_70 9]: /images/20221123/06d1723d05234d9e8e83c8a223b146dc.png
[format_png 10]: /images/20221123/0cab387bb861461194a905af31a7aee2.png
[format_png 11]: /images/20221123/714076d954244abda5ce615231910a14.png
[https_www.cnblogs.com_lyyguniang_p_7778701.html]: https://www.cnblogs.com/lyyguniang/p/7778701.html
[format_png 12]: /images/20221123/4af64398221e434d812c5e2b933d682e.png
[format_png 13]: /images/20221123/c353df0f97124f129b3fb7915b687b45.png
[format_png 14]: /images/20221123/f6449fd42c784119b76ba7138fcdf5d1.png
[format_png 15]: /images/20221123/d4967f72c61a4ce49f07cb160d21f2cd.png