VScode全面使用教程！插件推荐！以及一些骚操作！2020年7月最新版！
前言
不得不说，vscode实在是一个十分强大的工具！那么怎么样得心应手的使用它呢？本篇文章带你深入浅出vscode。全面了解它的使用！
什么是 VScode
VScode 全称为 Visual Studio Code , 是微软公司开发的文本编辑器，由于名字过长，下面统统简称为 VScode。 [百度百科](https://baike.baidu.com/item/visual studio code/17514281?fr=aladdin)
为什么推荐 VScode
其实这个问题已经不需要我回答，网上也有大量推荐 比如
- Visual Studio Code（VS code）你们都在用吗？或许你们需要看一下这篇博文
- 为什么我选择使用 VS Code 进行前端开发？
他们给出的理由都很充分，有些东西也不需要我多加赘述。
不过作为写给小白的教程，有些东西我还是需要明确一下。
在编程开发工具中，常用的代码编写工具有以下两种分类:
- 集成开发环境 (Integrated Development Environment)
- 脚本编辑器 (Text Editor)
可能会有人对这两个名词很陌生，不过只要指出一些编程开发的工具相信大家就明白了。
集成开发环境 (Integrated Development Environment)
- Visual Studio
- Android Studio
- Eclipse
- Xcode
- Netbeans
- JetBrains 全家桶
- PyCharm
- WebStorm
- Intellij IDEA
- …
脚本编辑器 (Text Editor)
- VisaulStudioCode
- Atom
- Sublime
- NotePad ++
- Vim
- Emacs
- HBuilder
脚本编辑器其实就是纯文本编辑工具，它只是让代码更好地显示，但是涉及到一些专门的测试环境就需要使用 IDE 这种复杂的开发环境。
用通俗的话来讲就是 文本编辑器 是 导弹， 而 集成开发环境 是 核弹。
那更加强大的集成开发环境理应是最佳选择，那我们为什么还会选择导弹呢？
其实主要是因为杀鸡焉用牛刀的原理。
集成开发环境通常集成过多的东西导致很臃肿，然而普通程序员又有多少人会用到全部的工具呢？
因此文件体积更小，启动速度更快的脚本编辑器越来越受到程序员们的追捧。
我们可以参照 VisualStudio 的大小 和 VisaulStudioCode 的文件大小比较就可以知道。
VisualStudio 如果将所有语言的开发包都安装上需要几十个 G
而 VScode 的安装包大小只有不到 100M
由于集成开发环境的庞大臃肿，很多集成开发环境都是有自己的针对领域的，比如说 JetBrains 的全家桶 IDE
每一个软件都针对特定的开发环境需求进行优化，比如说 PyCharm 是针对 Python 而 Intellij IDEA 是针对 Java 的
而在这方面脚本编辑器因为其轻量化的特点通常还可以支持多种语言的编辑。
但是话说回来，即便是杀鸡焉用牛刀，随着开发越来越复杂，导弹的威力很可能并不能满足我们的开发需求的。
因此随着时代的发展 Atom 和 Sublime 这种带插件扩展的编辑器相继出现，而其他编辑器也紧跟其后。
我们可以通过编辑器的插件获取类似 IDE 的各种功能体验，而且插件相当于扩展模块，我们可以很轻松地开启和关闭无关的功能，也满足轻量化的需求。
如今 VScode 的插件的强大已经完全不输于专业 IDE，比如 Google 的新技术 Flutter 就钦定了 VScode 和 Android Studio 两个开发平台。
通过插件扩展的 VScode 开发 Flutter App 的体验几乎不输于 Android Studio 这种专业 IDE 。
当然由于这种高度定制化的插件功能扩展，如何搭配这些插件加快开发效率就得花很多时间去研究，不像 IDE 那样一整套功能提供好了。
这里我总结一下 IDE 我不喜欢的点：
- 按钮太多，功能太复杂，让人劝退，对新手不友好
- 针对特定开发环境，无法兼容不同语言，不灵活
- 插件较少，一些自定义开发需求难以满足
- 启动缓慢，占用系统资源多
纵然 IDE 有些不便的地方，我们也没必要全盘否定它，毕竟使用环境是不一样的。
IDE 适合大型开发，特别是需要编译运行还要依赖各种环境的 C++ 或者 Java ，IDE 的配套环境真的可以省去很多麻烦，调试使用 IDE 的工具也很省心。
脚本编辑器更加适合敏捷开发，比如 js python 这类的脚本语言。
而且现在很多 IDE 也支持插件开发进行功能扩展，并不是脚本编辑器特有的功能了。
以上就是我个人对 IDE 和 脚本编辑器 的看法，个人还是偏好 脚本编辑器 多一点
另外必须强调 无论是 IDE 还是 脚本编辑器 都只是编程工具，编程最重要的是写程序的人，因此没有必要争自己使用的工具来秀优越感，适合自己才是最好的。
最后在众多脚本编辑器中 为什么 就选了 VScode 呢？
其实几年前还是 Sublime 和 atom 称霸天下的时候。
不过后来 VScode 的插件生态建立起来之后，实现了弯道超车。
由于 atom 我没用过，Sublime 我也只是用了很短一段时间，所以我自己也不好做出评价。
我总结一下目前对 VScode 积极的认识：
- 微软爸爸的财大气粗做后盾，维护很积极
- 图形化图标，交互比较友好
- 集成 Git 和 Cmd 以及 Debug 工具，我以前用 Sublime 的时候这些东西都没有内置
- 安装插件有图形化界面，可以不敲命令行，对新手很舒服
- 插件超级丰富，社区极度活跃，有问题基本都可以在 Github Issue 以及 Stack Overflow 上查到答案
最重要一点是我自己也算是半个前端工程师，以前一直用 学校 教的 Dreamweaver ，自从接触了 Sublime 之后就爱不释手，后来另一个学前端的同学给我推荐了 VScode 真的就成了我编程开发的主力工具，大多数的开发都可以通过插件扩展实现在 VScode 上开发。
我印象最深刻的就是 VRML 语言，当时学校要求我们学习这个被淘汰的语言，而且还要用 VRML Pad 这种不知道是多少年前的开发工具，颜色高亮各种不清晰，操作各种不顺手。
最后还是通过 VScode 的插件来完美解决这些的问题。
VScode 安装
安装 VScode 特别是简单，去百度搜索 VScode 点开第一个微软的官方链接，点击下载即可。
双击安装包 点击 安装，基本上点击下一步就可以了，几个要点可以重点说一下
我接受协议必须勾选的- 路径可以自定义，不过一般默认就可以了
添加到资源管理器上下文目录这个操作可以添加右键 Code 打开当前目录，非常方便。
将 Code 注册为受支持的文件类型的编辑器这个操作会让 VScode 支持的代码文件全部编程变成 VScode 默认打开，文件图标也会随之更改，很好辨认。
安装完成的界面如下图
VScode 使用
通过上面的步骤，我们已经顺利进入了软件的启动界面。
然而看到的全部是英文，可能有些人会觉得很难受，有没有办法转换成中文界面呢？
当然是可以的，我们只需要安装一个中文补丁就没问题了。
那就可以好好讲解一下 VScode 的界面的情况了
VScode 新手讲解
注：经过更新之后，新版本 UI 有点不同，请见谅。
在欢迎使用的界面上，新手需要注意红色框的区域
特别是下划线的部分的 入门视频 和 提示与技巧 都是官方提供的说明讲解。
当然里面都是英文的，有点遗憾。
另外右边的 界面概览 可以清晰显示出 VScode 各个区域的说明
交互式演练场 英文叫做 Interactive Playground 也是非常好的体验文档。
只可惜同样没有汉化。
关于交互式演练场的操作我将留到 VScode 的骚操作进行讲解。
文件资源管理器
默认情况下 文件资源管理器 是空的，可以打开一个文件夹作为工作区。
点击 打开文件夹 或者 拖拽文件夹进来都可以实现。
通过工作区可以管理当前文件夹里面的内容。
工作区上方的四个按钮可以帮助你创建文件和文件夹。
对文件右键还有更多的删除命令等等，也可以通过拖拽改变文件的位置。
跨文件搜索
通过跨文件搜索可以搜索当前工作区下的所有文件的内容。
通过这里找到的信息直接跳转到相应文件的相关行。
源代码管理
原代码管理提供了简单的 git 处理
基础的功能诸如 push pull commit 都封装好了
只需要点击按钮即可使用
启动和测试
启动和测试集成了 Debug 的模块
和浏览器的 Debug 模块基本相同。
这里可以通过 node.js 进行脚本测试
点击 F5 就可以启动 Debug 模式。
遇到设置红色的断点，代码执行就会暂停。
终端集成
通过快捷键 ctrl+` 可以呼叫出来
默认是 windows 的 cmd 窗口，也可以切换
也可以切换成其他的终端启动
这里浓缩了我目前使用中的大部分插件，其中推挤标题前面加上 * 号的是我强烈推荐的插件。
下面推荐中夹带了私货 - (￣▽￣) 认真脸
通用插件推荐
中文补丁
Chinese (Simplified) Language Pack for Visual Studio Code
提供 VScode 界面的全汉化。
* Settings Sync
这个工具将当前插件配置直接放到 github 的 gist
可以在别的软件上一键获取之前配置好的插件配置，一键完成所有插件的安装
方便到难以想象（前提是得能联网）
Bookmarks
通过这个工具可以给当前代码行设定一个标记。
代码比较长和复杂的时候，可以通过这个标记来回跳转。
缺点是这个标记只记录行，如果上面的代码更新了，标记的位置还是在之前的那一行。
Alignment
Alignment
这个工具可以对齐等号冒号等符号，让代码更加清晰。
当然这也要看语言的规范要求，有些代码规范是禁止等号前后有多余的空格。
我个人是觉得使用这个工具可以让变量定义更加清晰。
Live Server
Live Server
快速高效地在当前工作区搭建本地服务器。
安装之后右下的状态栏有 Go Live 按钮快速启动。
这个工具最棒的地方在于可以通过 http 协议共享自己的文件，通过 Ip 地址加端口，可以实现局域网互联互通（前提是网络没有限制）
Auto Rename Tag
Auto Rename Tag
通过这个工具重命名 XML 或者 HTML 就很方便，一步到位
Polacode
分享代码截图非常方便，样式各方面都照顾得很到位。
* Better Comments
通过这个工具可以通过不同的颜色将代码注释区分出来，这样哪些是注释不用的代码、哪些是说明就一目了然了。
* Todo+
配合 better comment 的标记，可以实现不同注释代码的追踪，还挺好的。
Insert Numbers
Bracket Pair Colorizer
Bracket Pair Colorizer
括号用不同颜色区分，让代码一目了然。
* Local History
Local History
这款插件可以实时对文件修改进行记录备份。
记录每一次修改保存的时间，有时候出问题，可以通过这个插件还原旧版本，比 git 还要方便。
git 只能将 commit 的部分作为存档点，没有这个工具存得多。
缺点是会在工作区里创建一个 .history 的文件夹，各种操作务必忽略这个文件夹的内容。
另外开启了 VScode 的自动保存之后，有时候会备份太多，可以修改下面这个参数，超过 3 秒的文件才去备份。
Json
{
"local-history.saveDelay": 3000,
}
macros
macros
这个插件可以将 VScode 的命令组合成一个新的命令，通过快捷键设置进行触发。
我通过这个插件，实现 ctrl+shift+; 直接将：拆入到行末并且切换到下一行，编写 python 时尤其方便。
通过快捷键可以直接从括号的位置插入：并且跳到下一行。
设置方法如下↓↓↓
- 在 setting.json 配置一个 macros 的自定义命令Json
{
"macros": {
"addColon": [
"cursorEnd", // 跳转到行尾
{"command": "type", "args": {"text": ":"}}, // 打上 : 号
"editor.action.insertLineAfter" // 跳转到下一行
]
}
}
- 在 keybindings.json 配置
addColon的快捷键Json
[{
"key": "ctrl+shift+oem_1",
"command": "macros.addColon",
"when": "editorTextFocus"
}]
自定义命令可以通过 shortcuts 面板查看相关的命令是什么
Project Manager
这个插件可以将不同的项目记录起来，可以快速点击来进入到相应的工作区
Visual Studio IntelliCode
Visual Studio IntelliCode
(https://go.microsoft.com/fwlink/?linkid=2006041)
微软爸爸的牛逼插件，基于 AI 驱动，优化自动提示的效果。
可惜这个插件需要联网才能使用
Zoom Bar
通过这个工具可以方便放大缩小 VScode 的显示界面，类似浏览器的放大缩小。
Python 相关
* Python
Python
微软爸爸维护的当家 Python 插件
VScode Python 开发必备插件，通过它实现代码自动提示 以及 代码 Debug
默认情况下会自动获取系统安装的 Python ，如果 Python 没有配置到环境变量中，插件左下角没有选择 Python 程序的话，插件是不起作用的。
有时候为了测试方便，可以将 Maya 的 bin 目录下的 mayapy.exe 配置到左下角
在 setting.json 配置相应的路径即可
Json
{
"python.pythonPath": "C:\\Program Files\\Autodesk\\Maya2017\\bin\\mayapy.exe"
}
autoDocstring
autoDocstring
通过这个工具可以快速生成 Python 的说明文档
默认文档风格不喜欢，可以通过配置修改。
Json
{
"autoDocstring.docstringFormat": "Numpy"
}
Python postfix completion
Python postfix completion
写 Python3 的时候 print 加括号还是挺麻烦的，用这个就方便很多。
CG 语言 相关
* MayaPy
MayaPy
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cnPQ53VT-1595607541001)(https://github.com/FXTD-ODYSSEY/vscode-mayapy/raw/master/img/02_link.gif)]
这是我自己开发的插件，疯狂安利…φ(๑˃∀˂๑)♪ 文章
插件依赖于 MayaCode 和 Python 两个插件的功能进一步开发
支持 Maya Python 断点 Debug 以及 Maya 代码库的自动提示。
一键安装，无需任何手动配置。
MayaCode
MayaCode
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MQgIWHYE-1595607541003)(https://github.com/artbycrunk/vscode-maya/raw/master/images/autocomplete.gif)]
支持 Mel 语言，并且提供 Mel 的自动提示
集成代码发送到 MayaPort 的功能，非常方便。
VEX
VEX
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qHVby4a4-1595607541003)(https://raw.githubusercontent.com/melMass/vscode-vex/master/images/syntax.png)]
Houdini 开发者的福音
unity3d-pack
unity3d-pack
- C#
- C# FixFormat
- C# Snippets
- C# XML Documentation Comments
- Debugger for Unity
- Shader languages support
- Unity Code Snippets
- Unity Tools
- ShaderlabVSCode(Free)
- Code Outline
自动安装上述 Unity 开发相关的插件，各种需求一应俱全。
Shader languages support for VS Code
Shader languages support for VS Code
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ekKA6Qgk-1595607541004)(https://github.com/stef-levesque/vscode-shader/raw/master/images/syntax-highlight.png)]
- HLSL - High-Level Shading Language
- GLSL - OpenGL Shading Language
- Cg - C for Graphics
主流游戏用的 shader 语言支持
OSL Support
OpenShadingLanguage
Open Shading Language (OSL) 是高级 Shader 开发语言，主要用于影视行业的 Shader 编写，由索尼提供维护支持，可以参照此项目
Markdown 相关
Markdown All in One
Markdown All in One
VScode 其实是原生支持 Markdown 的。
通过这个插件可以扩充更多 Markdown 的快捷键和模板的自动生成
* Markdown Preview Enhanced
Markdown Preview Enhanced
虽然 VScode 本身就内置了 Markdown 文件预览的功能
样式虽然不同，呈现方式和 github 是完全一样的。
但是显示效果我不是很喜欢，没有自动换行，而且无法将 markdown 转换成 HTML 文件
这个插件就可以解决我这些问题。
最重要的是右键可以输出不同的格式，可以直接输出 HTML 文件到本地。
这个功能很重要，别人未必懂得 markdown 的编写效果，但是 html 就可以通过浏览器预览到效果。
总结
以上推荐是我比较中意的插件搭配方式。
还有一些前端开发的以及杂七杂八的插件就不在这里详细介绍了，我觉得有意思的在下面罗列出来吧
- transformer 实现大量数据的对齐和去重
- jumpy 可以通过键盘跳转到任意的代码位置 (我用得不太习惯，用得少。)
- Kanban 实现需求的追踪管理
- Dashboard 类似于 Project Manager，实现可视化窗口管理，功能比较单一。
- XML Tools 处理 XML 的就很方便
- Power Mode 自带特效的装逼神器
- Comment Anchors 可以实现代码注释的标记和跟踪，但是对中文支持不好，全中文注释无法正常显示。
- Commands 状态栏添加按钮来执行相应操作（取代快捷键）
- Browser Preview 内置浏览器预览
- Shader Toy glsl 代码预览
- glsl-canvas glsl 代码预览
- vscode-journal 方便做日常的记录
- WakaTime 代码编写统计，需要联网使用
- Clipboard History 可以提供粘贴的历史记录
- GitLens — Git supercharged 扩展了 Git 在 VScode 上的功能，支持修改标签等
另外还有各种让人意想不到的鼓励师插件（大家可以自行挖掘）
除此之外还有很多主题和图标插件，这些也不再讲解，我个人偏向默认风格。
VScode 的插件市场真的无比丰富，如果大家有什么神奇有用的插件也欢迎大家推荐给我。
篇的时候挖了一个坑
这里的操作是怎么在 VScode 实现的呢？ 我在这里解惑
其实复制行可以在不选择任何代码的时候 ctrl+c ，这样会复制一整行。
然后就疯狂敲 ctrl + v 就可以了， 在不选择的情况下，这样粘贴是直接粘贴到下一行。
然后按住鼠标中键可以拖拽选择文本，选中末尾的数字。
然后使用我上次介绍的 Insert Number 插件， ctrl + alt + n 就可以插入递增的数字。
交互式演练场
在开篇的时候也挖了一个坑
我有提到 其实 交互式演练场（Interactive Playground） 其实已经包含了很多 VScode 的骚操作
- ctrl+alt + 上下键 多重鼠标添加
- alt + 上下键 移动行
- alt+shift + 上下键 复制行
- ctrl+d 可以选择当前光标下的单词 类似双击效果
- ctrl+shift+L 可以找到当前选中类似的单词
- ctrl+shift+k 可以删除一行，不过我一般是在不选择字符情况下用 ctrl+x 来删除（离左手近）
- alt+shift+f 可以自动排布文档（formating）
- F2 重命名变量
VScode 的 骚操作
代码注释
- ctrl+/ 可以切换代码注释
- ctrl+k ctrl+c 可以继续注释代码
- ctrl+k ctrl+u 可以取消注释代码
自动保存
开启了自动保存之后，我写代码再也不用担心断电、崩溃等问题导致写的内容没有了。
再加上 localhistory 双重保险，无论什么情况，代码都与你同在。
鼠标中键拖拽
鼠标中键实现多行拖拽（比 ctrl+alt + 上下键 更好用）
ScreenCast 模式
ScreenCast 模式可以让 VScode 回显所有的操作指令以及鼠标点击红色标记
用户代码片段 snippet
用户可以插入自定义的代码片段，提高编程的效率。
搜索
- ctrl + f 可以打开搜索框
- ctrl + h 可以打开替换框
- 普通的匹配模式进行替换
- 大小写匹配
- 全字匹配
- 正则表达式
完全基于 JavaScript 的正则表达式
可以通过$数字来实现匹配的获取和替换
注：(“apple.)” 括号的部分将会获取到替换标记 $1、$2 这些变量中，根据括号的数量赋值。
. 代表任意字符
* 代表匹配 0 个或者多个
“apple.” 表示匹配 “apple 任意字符” 这个模式
通过括号则可以进一步把匹配到的内容获取出来进行扩充。
禅模式 （Zen Mode）
开启之后屏幕所有的区域就只剩下代码区域，让你脱离一切干扰。
让我想起了 一加 7pro 的禅定模式， 一键单身 (:з」∠)
这个模式太过佛系简洁，我个人用不惯
总结
熟练掌握这些技巧可以大大提高 代码编写 的效率
特别是正则表达式，你可以通过它插入多行代码。
不过正则也不是万能的，之前遇到个需求就是匹配到的数字需要进行数学计算。 仓库
貌似正则就无法处理这种复杂的情况，这个时候就需要自己写代码来处理了， python 和 js 都原生支持正则表达式匹配处理。