VSCode是干嘛用的，是什么东西？为什么VSCode能这么火？
对于刚开始学习编程的小伙伴，任何一点问题都可能成为你放弃的理由，拥有一款顺手的“武器”就显的尤为重要。
所以今儿咱就少扯些闲篇，来好好聊聊 VSCode 这个我眼里最适合新手的编辑器。
VSCode是什么
VSCode 全称就没必要说了吧，反正臭长臭长的。
虽然 VSCode 自发布还没几年，却一直相当出名，被很多网友戏称为微软少有能拿出手的精品。
没错，VSCode 它老东家就是微软。
官方给它的定义是一个免费、开源的跨平台编辑器，之所以反复强调编辑器这仨字，是因为很多小伙伴常把 IDE 和编辑器当成一个玩意。
可是事实并非这样，IDE 是个完善的武器库，它追求的就是开箱即用的完备，一句话概括就是啥都有。
IDE 更侧重于工程项目，对于代码的调试、测试都提供了各式各样的支持，好用是好用，就是太过笨重。
况且正版 IDE 若不想办法破解白嫖，自己买来用来学习性价比太低。
编辑器就不一样了，它更轻，侧重于单个文件或文件夹，而非一个完整的项目。
而且编辑器对于语言的支持更自由，以前说用文本编辑器敲代码可真一点也不魔幻VSCode是干嘛用的，是什么东西？为什么VSCode能这么火？(图4)。
这两年较为轻量的编辑器广受欢迎，而 VSCode 把自己定位到编辑器，却又不止步于此，并像 Chrome 扩展一样，支持插件，支持开源。
这大概也是这几年来 VSCode 迅猛发展，一年一个样的原因吧。
VSCode发展史
我是真的好奇 VSCode 发展过程，于是我就去查了查（上班摸鱼果然是最快乐的），发现果然是大佬的手笔。
关于这一部分，大家当个故事看着玩就行。
微软早就做出了被称为最好用的 IDE——VS，这个也就是 VSCode 的长辈。
可微软的野心不只满足于此，11 年底的时候，微软从 IBM 挖来了 Erich Gamma（我就简称 EG 了）。
看看上面这照片，你可能是第一次见到 EG 这大佬长啥样，但单看这个发际线，你也该知道他有多强了吧。
而 EG 这位大佬到底有多牛，还记得我之前狂吹的《设计模式》作者「四人帮」嘛。
EG 就是其中的一员，而且这位大佬之前在 IBM 时也是负责开发 Java 开发工具的。
这次微软把他请来，就是希望他能打造一款在线的开发工具，让咱程序猿们可以在浏览器中也能获得 IDE 中的享受。
所以微软想要的在线开发工具当然搞出来了，就是现在也都挺有名的 Monaco Editor。
在整个开发过程中，Monaco Editor 尽可能的保持着轻量，而且 EG 极其重视核心功能的独立，对于那些消耗资源的功能则运行在其他进程。
之所以 EG 这般偏执，尤其注重核心功能的独立性，据说是因为 EG 曾见证了另一个开发工具的兴衰。
我去考了考古，发现竟然是 Eclipse。
Eclipse 本是 IBM 内部的项目，它刚推出时大受欢迎，但最后结局是捐给了开源组织。
究其原因，大概是成也萧何，败也萧何吧。
Eclipse 的成功是因为它极致的可定制化的特点，任何功能都可以交给插件实现。
而它的落寞也是由插件所导致的，插件和核心代码运行在同一进程中，过多的插件严重的拖累了 Eclipse 核心功能的运行。
Eclipse 最后的结局就是遭人嫌弃。
感觉这是插件型软件的通病，现在 Chrome，VSCode 在网上的差评，多是因为内存占比太大，不过这个时候你也该适当整理一下插件了。
扯了这么多，咱主角 VSCode 还没上线呢，它正式的亮相是在 2015 年 4 月底的 Build 大会上。
EG 及其团队把 Monaco Editor 搬到了桌面平台，正式发布了 VSCode 的第一个预览版本。毫不夸张的说，之后短短五年的时间，VSCode 跟吃了药一样高速发展。
这个月的 PYPL Top IDE index 排行，我记得半年前 VSCode 还排在第六，短短六个月它就在所有 IDE 和 编辑器中向上爬了两名。
看看其他主流的代码编辑器，Sublime、Atom 和 Vim，毫无疑问，VSCode 已经夺得了代码编辑器中的桂冠。
现在的 VSCode 继承着前身 Monaco Editor 的设计风格，是一款既追求着高度定制又保持着可控的高性能编辑器。
而 VSCode 也正努力让程序猿们能在编辑器里获得 IDE 的开发体验（感觉微软就是想让程序猿们能在任何地方都能搞开发VSCode是干嘛用的，是什么东西？为什么VSCode能这么火？(图7)）。
虽然我挺尬吹它的吧，但我觉得它有被尬吹的资本。
为什么我会选择VSCode
前面已经说了很多 VSCode 的优点，这里就总结一下。
值得期待的性能
因为 VSCode 是在 IDE 和编辑器中间把控自己的定位，所有就不得不考虑性能高低的问题。
从 IDE 转 VSCode 的小伙伴应该能感受到性能变化，和同类编辑器比较，Atom 就有点不够看了。
但不得不承认，和传统的 Vim 和 Sublime 相比，VSCode 还是有需要提升的地方。
VSCode 在性能方面已经虽然足够重视，无论是从插件进程与主进程的隔离，到插件的延迟加载，再到 Text Buffer 的优化，提升大文件的加载与编辑速度，减少内存使用率等等。
但毕竟它只发展了 5 年，相比现在，我更看好它的未来。
丰富的插件
VSCode 的插件生态发展迅猛，社区中的插件数量早已破万。
而且 VSCode 不仅有插件市场，还可以直接在 VSCode 中直接搜索、安装并管理。
相比同类的编辑器，Sublime 只有 VSCode 插件数量的一半不到，还不能在编辑器中直接下载管理。
Vim 发展已久，插件数量无数，但是没有一个合格的插件市场。
Atom 则在各个方面都略逊于 VSCode。
综合来看，只要调教得当的 VSCode 并不逊色于 IDE，而且还有很多意想不到的奇妙插件。
回头我再给你们说我咋用 VSCode 插件，上班无聊时候摸鱼的。
良好的用户体验
我知道 VSCode 对于搞前端的小伙伴来说，简直不要太友好。
就俩字，支持！除了对 JS 的智能提示、调试等功能的支持，像 HTML，CSS等技术都有很好的支持。
VSCode 虽然自称编辑器，却又像 IDE 一样开箱即用，这是因为 VSCode 在保持其编辑代码的核心功能外，还内置了属于 IDE 的功能。
有三点让我特别喜欢。
调试器
我们可以直接在 VSCode 中调试代码，打断点啥的完全支持，用户体验就俩字，舒服！
版本控制
内置了 Git 支持，管理源码的时候方便了不少。
终端
内置终端可以直接在 VSCode 中运行脚本代码，像 IDE 一样，不用再来回切换。
慢慢成长的生态
在我看来，一个工具的生态完善与否，就直接定义着这个工具是否拥有未来。
我也是刚刚知道，原来 VSCode 有着强大的生态。
VSCode 把它的组件（插件）抽离出来，进行封装且二次开发后，就成了我们眼中的开源产品，并且它与社区合作，把开源做的越来越好。
总结
VSCode 还是一个年轻的编辑器，但它已经展现了它的潜力。
前段时间，好像在远程开发的方向上也突破不断，还有越来越多的开发者参与到了它的成长。
现在 VSCode 只是 IDE 的替代品，但谁又能说未来它不会做的更好呢？
获取方式
官网：https://code.visualstudio.com
VsCode使用教程
一、关于Vscode
1.1 VsCode是个啥
Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).
支持的拓展常见的包含如下：
1.2 VSCode的学习网址
VSCode帮助文档链接
怎么找到它，其实也及其的简单，仅仅需要。
二、How to Use
2.1 调试代码和安装插件
如何开始调试代码，这里以python为例
Step1:首先在商店中搜索python
Step2: 之后就可以直接在主页面启动调试F5
注意以下页面，其中如果是IDE内部使用如下对应窗口块的进行
文件和调试块的指示
三、熟识常用的快捷键
3.1 调试常见的快捷键
F9 打开和停止调试断点
F11 单步调试
F5 启动调试
调试的具体页面如图所示
二、使用一波
2.1
Vscode是一个轻量的编译器，所以默认是通过打开文件夹的功能来打开对应的工程。而且下面会列举出最近打开的工程，方便打开用户打开最近打开的工程进行编辑和修改。
这里默认打一个工程，可以看到如下提示。
苹果电脑Mac如何输入⌘、⌥、⇧、⌃、等特殊字符 反正我是复制的，偷懒一下。
科普一波：
⌘ command键
⌥ option/alt
⇧ shift按键
^ 表示的是control键
2.2 查询未知的快捷键
首先键入⇧ ⌘ P，之后出现如图所示的界面，我们在这里面输入对应关键字“调试”，可以快速搜索你需要使用到快捷键
2.3 ⇧ ⌘ F 整个工程中查找关键字
作用之后效果，如下图。其实和直接点击左边的放大镜效果是等同的。
2.4 ⌘ P 快速你需要查看的文件，并且能快速跳转到
2.5 ^ ` 调取和关闭终端
快速吊起终端，对于我们这种，对于需要应用终端的代码，比如python或者vue-cli以及RN，Flutter都是特别方便。
2.6 大纲的功能
关于git部分的默认支持，如果当前工程存在着改动，那么修改清晰可见。
打开其中一个Vue文件，其中大纲功能是是个非常赞的功能，这个问题件文件脉络清晰明显
2.6.1 html树
2.6.2 less的层序
2.6.3js部分
可以说唯一小小遗憾是没有按照compute和methods之类的对function进行分类，但是如此的顺序很OK了(这一点不如WebStrom)
2.7 快速强大的编码功能
能够快速捕捉程序中的问题并突出显示。支持多光标编辑，参数提示以及其他快速编码特性。
2.8 IntelliSense功能
根据文档上下文为变量类型、函数定义和导入模块提供代码智能补全功能。
2.9 代码导航和重构
使用peek和navigate to definition功能可以查阅浏览你的源代码，代码重构变得轻而易举。
2.10 更多更常见的功能
2.11 关于后退和前进的意义
在一个文档中我们可以首先在A处进行编辑，如下图增加一个标签
之后我们在B处开始设置该div的css样式
此时我们通过^ -就可以回到A区域
在A区域使用^ ⇧ -就会回到B取悦
如果联系多次按下回退是能够跨文件的，这个功能也很棒。
2.12 方便的放大和缩小整个界面的字体
通过 ⌘ + 还有 ⌘ + 很容易的实现整个页面所有字体大小
2.13 格式化文件快捷键
⌥ ⇧ F
2.14 用VSCode的固定窗口模式
使用习惯了WebStorm的人都能很明显的感受到，webStorm打开一个.js都会比如像是下面如图：
而正常打开一个窗口，单击的时候，通常会替换之前的窗口
要实现和webStorm一样的方式，其实可以直接在如上箭头所示的标题部分双击即可完成固定的效果。
注意观察会发现，此时标题字体将变成正体。
三、新建一个html直接采用Chrome来进行调试的实现方案
3.1 首先安装,如下图。方法已经特别具体，再此不再赘述。
3.2 在自己的html工程目录下面点击f5,或者在左侧选择调试按钮
但是直接打开的chrome将会出现如下错误
3.3.解决以上问题
首先在弹出来的launch.json中添加以下内容
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "启动 Chrome 并打开 localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
},
{
"name": "Launch index.html (disable sourcemaps)",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/index.html"
}
]
}
3.4 然后在调试页面中选择对应的scheme
，在上方
，选择下拉按钮，会有一个添加，选择chrome
四、附录其他
4.1 MAC上F功能按键
由于采用MACPro开发，默认的F1到F12分别将会被系统调节按钮替代，如何将F1到F12设置为默认功能。
Mac上的F键标准功能和按键上的特殊功能之间调换
设置 --》 键盘 --》 勾选将F1、F2
4.2 实现TODO的指示功能
首先安装对应的插件
其次重启Vscode,就可以看到如图所示的TODO的树形结构
五、参考链接和书籍
Visual Studio Code中文文档（一）-快速入门
VS Code - Debugger for Chrome调试js
温馨提示：文章内容系作者个人观点，不代表一日一条网对观点赞同或支持。
版权声明：本文为转载文章，来源于 软件大全 ，版权归原作者所有，欢迎分享本文，转载请保留出处！
