VScode开发⼯具的使⽤教程
前⾔
⼯欲善其事必先利其器，提⾼程序员的开发效率必须要有⼀个好的开发⼯具，当前最好的前端开发⼯具主要有VS code、sublime Text、Atom、Webstorm、
Notepad++。
VS Code 是⼀款⼗分强⼤的代码编辑器，虽然出来时间⽐较短，但是使⽤频率和受欢迎率已经远远超过了其他的编辑器，VS code适⽤于⼏乎所有的编程与和开发任务，包含了⾮常丰富的应⽤插件，⾮常⽅便，越来越多的新⽣代互联⽹青年正在使⽤它。
其实VS Code 这款软件本⾝，是⽤ JavaScript 语⾔编写的，是⼀款基于Electron框架编写的客户端编辑器，如果喜欢研究源码可以去github下载源码进⾏研究，Electron使⽤和学习在以后章节中介绍（具体请⾃⾏查阅基于 JS 的 PC 客户端开发框架Electron）。Jeff Atwood 在 2007 年提出了著名的 Atwood 定律：
任何能够⽤ JavaScript 实现的应⽤系统，最终都必将⽤ JavaScript 实现。
Jeff Atwood 这个⼈是谁不重要（他是 Stack Overflow ⽹站的联合创始⼈），重要的是这条定律。
前端⽬前是处在春秋战国时代，各路英雄豪杰成为后浪，各种框架⼯具层出不穷，VS Code 软件⽆疑是⼤前端时代最骄傲的⼯具。
如果你是做前端开发（JavaScript 编程语⾔为主），则完全可以将 VS Code 作为「主⼒开发⼯具」。这款软件是为前端同学量⾝定制的。
如果你是做其他语⾔⽅向的开发，并且不需要太复杂的集成开发环境，那么，你可以把 VS Code 作为「代码编辑器」来使⽤，纵享丝滑。
甚⾄是⼀些写⽂档、写作的同学，也经常把 VS Code 作为 markdown 写作⼯具，毫⽆违和感。
退⽽求其次，即便你不属于以上任何范畴，你还可以把 VS Code 当作最简单的⽂本编辑器来使⽤，完胜 Windows 系统⾃带的记事本。
以下是对VS Code基本使⽤的介绍：
⼀、VS Code 的介绍
VS Code 的全称是 Visual Studio Code，是⼀款开源的、免费的、跨平台的、⾼性能的、轻量级的代码编辑器。它在性能、语⾔⽀持、开源社区⽅⾯，都做得很不错。vim编辑器怎么用
微软有两种软件：⼀种是 VS Code，⼀种是VS IDE。
VS Code是⼀款开发者的代码编辑器，提供了各种便携的插件使⽤；VS IDE是微软的重量级IDE⼯具，⾥⾯集成了各种开发环境的编译⼯具，特别是开发后端服务器编程，提供了完整的C/C++、Java、Python、Go、Android等集成开发⼯具。类似于Eclipse IDE，只需要⼀键安装即可。
IDE 与编辑器的对⽐
IDE 和编辑器是有区别的：
IDE（Integrated Development Environment，集成开发环境）：对代码有较好的智能提⽰和相互跳转，同时侧重于⼯程项⽬，对项⽬的开发、调试⼯作有较好的图像化界⾯的⽀持，因此⽐较笨重。⽐如 Eclipse 的定位就是 IDE。还有很多优秀的IDE⼯具，例如：
Visual Basic 6.0：
Visual C++ 6.0：
Dev C++：
Visual Studio 2015-2019：
QT Creator：
Eclipse：
IDEA：
PyCharm：
编辑器：要相对轻量许多，侧重于⽂本的编辑。⽐如 Sublime Text 的定位就是编辑器。再⽐如 Windows 系统⾃带的「记事本」就是最简单的编辑器。
需要注意的是，VS Code 的定位是编辑器，⽽⾮ IDE ，但 VS Code ⼜⽐⼀般的编辑器的功能要丰富许多。可以这样理解：VS Code 的体量是介于编辑器和 IDE 之间。程序员常⽤的⼀些优秀的编辑器例如：
VS Code、Sublime Text、Editplus、Notepad++、vim、Atom、Webstorm、chocolatapp、textpad等等。’
VS Code 的特点
VS Code 的使命，是让开发者在编辑器⾥拥有 IDE 那样的开发体验，⽐如代码的智能提⽰、语法检查、图形化的调试⼯具、插件扩展、版本管理等。
VS Code是⼀款免费的、开源的、⾼性能的、跨平台的、轻量级的代码编辑器，同时，在性能，语⾔⽀持、开源社区⽅⾯也做的很不错！
跨平台⽀持 MacOS、Windows 和 Linux 等多个平台。
VS Code 的源代码以 MIT 协议开源。
⽀持第三⽅插件，功能强⼤，⽣态系统完善。
VS Code ⾃带了 JavaScript、TypeScript 和 Node.js 的⽀持。也就是说，你在书写 JS 和 TS 时，是⾃带智能提⽰的。当然，其他的语⾔，你可以安装相应的扩展包插件，也会有智能提⽰。
前端编辑器： VS Code 与 WebStorm、Sublime Text
经常看到这样的问题：哪个编辑器/IDE 好⽤？是 VS Code 还是 WebStorm （WebStorm 其实是 IntelliJ IDEA 的定制版）？我来做个对⽐：
哪个更酷：显然 VS Code 更酷。
内存占⽤情况：根据我的观察，VS Code 是很占内存的（尤其是当你打开多个窗⼝的时候），但如果你的内存条够⽤，使⽤起来是不会有任何卡顿的感觉的。相⽐之下，IntelliJ IDEA 不仅⾮常占内存，⽽且还⾮常卡顿。如果你想换个既轻量级、⼜不占内存的编辑器，最好还是使⽤「Sublime Text」编辑器。
使⽤⽐例：当然是 VS Code 更胜⼀筹。先不说别的，我就拿数据说话，我⽬前所在的研发团队有 200 ⼈左右（120个后台、80个前端），他们绝⼤部分⼈都在⽤ VS Code 编码，妥妥的。如果想快速轻量级开发可以选择sublime Text3. 也有很多丰富的插件可以使⽤。
所以，⾸选是VS code，其次是sublime Text3，再其次可以选择其他⾃⼰喜欢的编辑器。
VS Code 的安装
VS Code 官⽹：
VS Code 的安装很简单，直接去官⽹下载安装包，然后双击安装即可。
上图中，直接点击 download，⼀键下载安装即可。
⼆、崭露锋芒：VS Code 快捷键
VS Code ⽤得熟不熟，⾸先就看你是否会⽤快捷键。以下列出的内容，都是常⽤快捷键，⽽加粗部分的快捷键，使⽤频率则⾮常⾼。
任何⼯具，掌握 20%的技能，⾜矣应对 80% 的⼯作。既然如此，你可能会问：那就只保留 20% 的特性，不久可以满⾜ 80%的⽤户了吗？
但我想说的是：那从来都不是同样的 20%，每个⼈都会⽤到不同的功能。
掌握下⾯这些⾼频核⼼快捷键，你和你的⼯具，⾜矣露出锋芒。
1、⼯作区快捷键
Mac 快捷键Win 快捷键作⽤备注
Cmd + Shift + P Ctrl + Shift + P，F1显⽰命令⾯板
Cmd + B Ctrl + B显⽰/隐藏侧边栏很实⽤
Cmd + \Ctrl + \创建多个编辑器【重要】抄代码利器
Cmd + 1、2Ctrl + 1、2聚焦到第 1、第 2 个编辑器同上重要
cmd +/-ctrl +/-将⼯作区放⼤/缩⼩（包括代码字体、左侧导航栏）在投影仪场景经常⽤到
Cmd + J Ctrl + J显⽰/隐藏控制台
Cmd + Shift + N Ctrl + Shift + N重新开⼀个软件的窗⼝很常⽤
Cmd + Shift + W Ctrl + Shift + W关闭软件的当前窗⼝
Cmd + N Ctrl + N新建⽂件
Cmd + W Ctrl + W关闭当前⽂件
2、跳转操作
Mac 快捷键Win 快捷键作⽤备注
Cmd + `没有在同⼀个软件的多个⼯作区之间切换使⽤很频繁
Cmd + Option + 左右⽅向键Ctrl + Pagedown/Pageup在已经打开的多个⽂件之间进⾏切换⾮常实⽤
Ctrl + Tab Ctrl + Tab在已经打开的多个⽂件之间进⾏跳转不如上⾯的快捷键快
Cmd + Shift + O Ctrl + shift + O在当前⽂件的各种⽅法之间进⾏跳转
Ctrl + G Ctrl + G跳转到指定⾏
Cmd+Shift+\Ctrl+Shift+\跳转到匹配的括号
3、移动光标
Mac 快捷键Win 快捷键作⽤备注
⽅向键⽅向键在单个字符之间移动光标⼤家都知道
option + 左右⽅向键Ctrl + 左右⽅向键在单词之间移动光标很常⽤
Cmd + 左右⽅向键Fn + 左右⽅向键在整⾏之间移动光标很常⽤
Cmd + ←Fn + ←（或 Win + ←）将光标定位到当前⾏的最左侧很常⽤
Cmd + →Fn + →（或 Win + →）将光标定位到当前⾏的最右侧很常⽤
Cmd + ↑Ctrl + Home将光标定位到⽂章的第⼀⾏
Cmd + ↓Ctrl + End将光标定位到⽂章的最后⼀⾏
Cmd + Shift + \在代码块之间移动光标
4、编辑操作
Mac 快捷键Win 快捷键作⽤备注
Cmd + Enter Ctrl + Enter在当前⾏的下⽅新增⼀⾏，然后跳⾄该⾏即使光标不在⾏尾，也能快速向下插⼊⼀⾏
Cmd+Shift+Enter Ctrl+Shift+Enter在当前⾏的上⽅新增⼀⾏，然后跳⾄该⾏即使光标不在⾏尾，也能快速向上插⼊⼀⾏
Option + ↑Alt + ↑将代码向上移动很常⽤
Option + ↓Alt + ↓将代码向下移动很常⽤
Option + Shift + ↑Alt + Shift + ↑将代码向上复制
Option + Shift + ↓Alt + Shift + ↓将代码向下复制写重复代码的利器
5、多光标编辑
Mac 快捷键Win 快捷键作⽤备注
Cmd + Option + 上下键Ctrl + Alt + 上下键在连续的多列上，同时出现光标
Option + ⿏标点击任意位置Alt + ⿏标点击任意位置在任意位置，同时出现光标
Option + Shift + ⿏标拖动Alt + Shift + ⿏标拖动在选中区域的每⼀⾏末尾，出现光标
Cmd + Shift + L Ctrl + Shift + L在选中⽂本的所有相同内容处，出现光标
其他的多光标编辑操作：（很重要）
选中某个⽂本，然后反复按住快捷键「 Cmd + D 」键（windows ⽤户是按住「Ctrl + D」键），即可将全⽂中相同的词逐⼀加⼊选择。
选中⼀堆⽂本后，按住「Option + Shift + i」键（windows ⽤户是按住「Alt + Shift + I」键），既可在每⼀⾏的末尾都创建⼀个光标。6、删除操作
Mac 快捷键Win 快捷键作⽤备注
Cmd + shift + K Ctrl + Shift + K删除整⾏「Cmd + X」的作⽤是剪切，但也可以删除整⾏
option + Backspace Ctrl + Backspace删除光标之前的⼀个单词英⽂有效，很常⽤
option + delete Ctrl + delete删除光标之后的⼀个单词
Cmd + Backspace删除光标之前的整⾏内容很常⽤
Cmd + delete删除光标之后的整⾏内容
备注：上⾯所讲到的移动光标、编辑操作、删除操作的快捷键，在其他编辑器⾥，⼤部分都适⽤。
7、编程语⾔相关
Mac 快捷键Win 快捷键作⽤备注
Cmd + /Ctrl + /添加单⾏注释很常⽤
Option + Shift + F Alt + shift + F代码格式化很常⽤
F2F2以重构的⽅式进⾏重命名改代码备
Ctrl + J将多⾏代码合并为⼀⾏Win ⽤户可在命令⾯板搜索”合并⾏“
Cmd +
Cmd + U Ctrl + U将光标的移动回退到上⼀个位置撤销光标的移动和选择
8、搜索相关
Mac 快捷键Win 快捷键作⽤备注
Cmd + Shift + F Ctrl + Shift +F全局搜索代码很常⽤
Cmd + P Ctrl + P在当前的项⽬⼯程⾥，全局搜索⽂件名
Cmd + F Ctrl + F在当前⽂件中搜索代码，光标在搜索框⾥
Cmd + G F3在当前⽂件中搜索代码，光标仍停留在编辑器⾥很巧妙
9、⾃定义快捷键
按住快捷键「Cmd + Shift + P」，弹出命令⾯板，在命令⾯板中输⼊“快捷键”，可以进⼊快捷键的设置。
当然，你也可以选择菜单栏「偏好设置 --> 键盘快捷⽅式」，进⼊快捷键的设置：
10、快捷键列表
你可以点击 VS Code 左下⾓的齿轮按钮，效果如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。