vs code使用指南

喜欢ヅ旅行 2022-02-25 01:38 478阅读 0赞

## 1.楔子 ##

在 Build 2015 大会上，微软了宣布推出免费跨平台，支持30多种语言的开箱代码编辑器 Visual Studio Code！  
Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的**现代化轻量级代码编辑器**，支持语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作。  
VS Code只是一款轻量级的代码编辑器，而不是一个重量级的完整 IDE (集成开发环境)，它的竞争对手将会是 **Sublime Text、Atom、VIM、Notepad++** 等产品。

**帮助文档:**  
[https://code.visualstudio.com/docs][https_code.visualstudio.com_docs]

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

## 2.VS Code的下载和安装 ##

官方网站为：[https://code.visualstudio.com/，下载安装即可。][https_code.visualstudio.com]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]  
本次安装的版本如下所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]

## 3.VS Code的简单介绍和使用 ##

### 3.1界面介绍 ###

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

### 3.2 快捷键 ###

*  页面搜索：`Ctrl + F`
 *  全局搜索：`Ctrl + Shit + F`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4]
 *  输入行号可以跳转到指定的行：`Ctrl + G`
 *  打开命令输入框：`Ctrl + Shift + P`或者`F1`
 *  Markdown预览：`Ctrl + Shift + V`
 *  快速的切换文件: `Ctrl + Tab`
 *  输入内容来搜索文件： `Ctrl + p`
 *  列模式：`shift+alt+鼠标`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5]
 *  folding折叠

> Fold (Ctrl+Shift+\[) 折叠所在的这个部分  
> Unfold (Ctrl+Shift+\]) 取消所在部分的折叠  
> Fold All (Ctrl+K Ctrl+0) 折叠当前编辑文件的所有可折叠部分  
> Unfold All (Ctrl+K Ctrl+J) 取消当当前文件所有折叠  
> Fold Level X (Ctrl+K Ctrl+2 for level 2) 折叠所有level x（还可以用 ctrl+3、ctrl+4等）的缩进去（除了当前编辑位置所在的）

*  加/解注释: `ctrl+/`

### 3.3 版本控制 ###

要想使用Gi，必须先初始化，点击那个Initialize git repository按钮，初始化Git仓库。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 6]  
初始化结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 7]

### 3.4 使用技巧 ###

*  文件类型  
    使用快捷键，Ctrl + Shift + P，打开命令输入框，输入language  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 8]
 *  文件编码  
    Ctrl + Shift + P打开命令面板，输入encoding  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 9]
 *  MarkDown  
    VS Code也支持markdown的书写和预览，如果要预览的话，要先保存文件，然后按下快捷键Ctrl + Shift + V,就可以预览了。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 10]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 11]
 *  快速的切换文件  
    当我们编写多个文档时，经常需要在多个文件直接切换，用鼠标点击来切换是一个很奢侈的做法，我们通常都喜欢用快捷键。在Vs Code中，我们可以用Ctrl + Tab键来快速的切换文件  
    ![在这里插入图片描述][20190331113955483.gif]  
    按住Ctrl键不要松，不断的按下Tab键来切换选择文件。当然，这只适用于比较少的文件时，文件多了，这样就不好用了。  
    文件多的时候，我们可以使用Ctrl + p快捷键，打开和上面一样的输入框，不过这个时候我们可以输入内容来搜索文件，然后选择打开。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 12]
 *  支持打开一个文件夹  
    当我们编辑一个项目中的文件时，同时打开一个文件夹可是非常爽的功能，其他很多文本编辑器都不具备这样的特色。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 13]

## 4. 插件 ##

Vs Cod 有着丰富的插件库，能够满足日常所有的需求，下面简绍一些常用的插件。  
插件库如下所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 14]

### 4.1 怎么安装插件 ###

*  方法一：  
    按F1或Ctrl+Shift+p，输入extensions，点击第一个就可以  
    ![在这里插入图片描述][20190331114924168.png]
 *  方法二：  
    ctrl + P 然后输入 >ext install  
    ![在这里插入图片描述][20190331114931741.png]
 *  方法三：  
    点击图中位置  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 15]

### 4.2代码美化 Beautify ###

Beautify 插件可以快速格式化你的代码格式，让你在编写代码时杂乱的代码结构瞬间变得非常规整，代码强迫症必备，较好的代码格式在后期维护以及他人阅读时都会有很多的便利。  
插件支持的语言非常多，基本堵盖了目前所有的语言，而且你还可以自定义代码格式化的结构。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 16]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 17]  
![在这里插入图片描述][20190331115522671.png]

### 4.3 文件图标 vscode-icons ###

首先为了我们在编码时有一个高效、易用的界面，我们需要对一些不明了的组件做一些美化。  
vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示，这样我们在查看长长的文件列表的时候，可以直接通过文件的图标就可以快速知道文件的类型，而不是去看文件的后缀。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 18]

### 4.4 代码拼写检查 Code Spell Checker ###

此插件安装后就不用管就好了，在你代码中有单词拼写错误时，你就会发现它的好处，因为我们写代码毕竟都是大量的英文单词变量定义，插件还可以给出错误拼写单词的建议。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 19]

### 4.5 Settings Sync ###

最好用的插件，没有之一，一台电脑配置好之后，其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了，  
使用GitHub Gist同步多台计算机上的设置，代码段，主题，文件图标，启动，键绑定，工作区和扩展。

### 4.6 中文（简体）语言包 ###

Chinese (Simplified) Language Pack for Visual Studio Code  
将界面转换为中文，对英语不好的人，非常友好。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 20]

### 4.7 guides ###

显示代码对齐辅助线，很好用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 21]

### 4.8Rainbow Brackets ###

为圆括号，方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员，当然还有JavaScript和其他程序员特别有用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 22]

### 4.9 Bracket Pair Colorizer ###

用于着色匹配括号  
![在这里插入图片描述][2019033112135577.png]

## 5. 总结 ##

简单的总结一下Vs Code的有点：  
1、 支持30多种常用语言的语法高亮， 并对html、 js、 css、 Angular等很好的语法支持， 并且还支持MarkDown的预览！  
2、 体积小， 功能强大， 当然性能也是很好的， 打开超大型的文本文件也不会卡死， 大家可以和其他的一些文本编辑器对比一下。  
3、 支持命令操作(Ctrl + Shift + P) 和鼠标操作， 还有大量的快捷键， 可以适应各种开发者的操作习惯。  
4、 支持Git版本控制器， 可以完成创建分支、 解决冲突、 提交修改等操作；  
5、 强大的搜索功能， 并且支持多文件搜索；  
6、 最大的有点， 当然是跨平台、 免费;

[https_code.visualstudio.com_docs]: https://code.visualstudio.com/docs
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: /images/20220225/cba39a1b66b3491aa7282fdcc41493ff.png
[https_code.visualstudio.com]: https://code.visualstudio.com/%EF%BC%8C%E4%B8%8B%E8%BD%BD%E5%AE%89%E8%A3%85%E5%8D%B3%E5%8F%AF%E3%80%82
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: /images/20220225/fc5e41ca5f7c4a869b03ac7befcbad8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 2]: /images/20220225/b4d9845375e641a0935185934db574c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 3]: /images/20220225/bad13cd975b249a1b882910c18819d9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 4]: /images/20220225/255e1c0c0fe1410394dc0f5bf08b235c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 5]: /images/20220225/cd38291c101d4cae82287a21d6e5eb66.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 6]: /images/20220225/b089de091b4f48d3b6343f8c6cede7ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 7]: /images/20220225/63c21ed30e0b4cde9a8805d1c7b9dbb5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 8]: /images/20220225/2aa99377d62749ba9fed3c220cec1ecb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 9]: /images/20220225/a1ed6b6a99b642778396c25a0f240448.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 10]: /images/20220225/10a90f95946a41f48280c6c83c9dfe7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 11]: /images/20220225/8b32c14c4f6f40b38617ac8f780b1e74.png
[20190331113955483.gif]: /images/20220225/7b412e4aaa48442d86a48406f868c6ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 12]: /images/20220225/688a5a2fd03740d0834ae4f69d49d8f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 13]: /images/20220225/a0f0b72bddfb409ebd5c23e6a4f89879.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 14]: /images/20220225/1403865de345461faf23fba6d7ad6614.png
[20190331114924168.png]: /images/20220225/f6ad9464b45a4ddb965333daf220bcf4.png
[20190331114931741.png]: /images/20220225/a0cab249902a4988b4770c6d64d97670.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 15]: /images/20220225/7ddd456c6a1e469db741c45b50fb70b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 16]: /images/20220225/2ab739c979e84f2cb5389a1a39b63fff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 17]: /images/20220225/31bd8a9a4a8847599b21c07eb51422e7.png
[20190331115522671.png]: /images/20220225/15338da83be147078b0f7668b1cd971e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 18]: /images/20220225/39ca32c3e3ce4ac397bb85d01a28da48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 19]: /images/20220225/cdc4ccb183dc4f13b5163e41bcec0777.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 20]: /images/20220225/82b69279d184464dabd61a164df4f297.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 21]: /images/20220225/08b0ffac84bb4658a48bbedf4fa73cf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9qaWVuaXlpbWlhby5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 22]: /images/20220225/c75cdb172f2d4d4ba36413c977203efc.png
[2019033112135577.png]: /images/20220225/72a299f512074298afd74f05935ad257.png