workbench使用教程（ide和文本编辑器有什么区别）

工欲善其事必先利其器，提高程序员的开发效率必须要有一个好的开发工具，当前最好的前端开发工具主要有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，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做得很不错。

微软有两种软件：一种是 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 官网：https://code.visualstudio.com

VS Code 的安装很简单，直接去官网下载安装包，然后双击安装即可。

上图中，直接点击 download，一键下载安装即可。

二、崭露锋芒：VS Code 快捷键

VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的内容，都是常用快捷键，而加粗部分的快捷键，使用频率则非常高。

任何工具，掌握 20%的技能，足以应对 80% 的工作。既然如此，你可能会问：那就只保留 20% 的特性，不久可以满足 80%的用户了吗？

但我想说的是：那从来都不是同样的 20%，每个人都会用到不同的功能。

掌握下面这些高频核心快捷键，你和你的工具，足矣露出锋芒。

1、工作区快捷键

4、编辑操作

5、多光标编辑

6、删除操作

7、编程语言相关

9、自定义快捷键

按住快捷键「Cmd Shift P」，弹出命令面板，在命令面板中输入“快捷键”，可以进入快捷键的设置。

当然，你也可以选择菜单栏「偏好设置 –> 键盘快捷方式」，进入快捷键的设置：

10、快捷键列表

你可以点击 VS Code 左下角的齿轮按钮，效果如下：

上图中，在展开的菜单中选择「键盘快捷方式」，就可以查看和修改所有的快捷键列表了：

4、使用命令行启动 VS Code

（1）输入快捷键「Cmd Shift P 」，选择install code command：

按快捷键「Cmd 1 」切换到左边的窗口，按快捷键「Cmd 2 」切换到右边的窗口。随时随地，想切就切。

学会了这一招，以后抄代码的时候，leader 再也不用担心我抄得慢了，一天工资到手。

4、是否显示代码的行号

VS Code 默认显示代码的行号。你可以在设置项里搜索 editor.lineNumbers修改设置，配置项如下：

6、将当前行代码高亮显示（更改光标所在行的背景色）

当我们把光标放在某一行时，这一行的背景色并没有发生变化。如果想高亮显示当前行的代码，需要设置两步：

（1）在设置项里搜索editor.renderLineHighlight，将选项值设置为all或者line。

（2）在设置项里增加如下内容：

“workbench.colorCustomizations”: { “editor.lineHighlightBackground”: “#00000090”, “editor.lineHighlightBorder”: “#ffffff30”}

上方代码，第一行代码的意思是：修改光标所在行的背景色（背景色设置为全黑，不透明度 90%）；第二行代码的意思是：修改光标所在行的边框色。

7、改完代码后立即自动保存

方式一：

改完代码后，默认不会自动保存。你可以在设置项里搜索files.autoSave，修改配置项如下：

我觉得这个配置项保持默认就好，不用打钩。

9、空格 or 制表符

VS Code 会根据你所打开的文件来决定该使用空格还是制表。也就是说，如果你的项目中使用的都是制表符，那么，当你在写新的代码时，按下 tab 键后，编辑器就会识别成制表符。

常见的设置项如下：

editor.detectIndentation：自动检测（默认开启）。截图如下： 10、新建文件后的默认文件类型

当我们按下快捷键「Cmd N」新建文件时，VS Code 默认无法识别这个文件到底是什么类型的，因此也就无法识别相应的语法高亮。

如果你想修改默认的文件类型，可以在设置项里搜索files.defaultLanguage，设置项如下：

上图中的红框部分，填入你期望的默认文件类型。我填的是html类型，你也可以填写成 javascript 或者 markdown，或者其他的语言类型。

11、删除文件时，是否弹出确认框

当我们在 VS Code 中删除文件时，默认会弹出确认框。如果你想修改设置，可以在设置项里搜索xplorer.confirmDelete。截图如下：

上图中，你可以通过「Tab」键和「Shift Tab」键在输入框和替换框之间进行切换。

「在选定内容中查找」这个功能还是比较实用的。你也可以在设置项里搜索 editor.find.autoFindInSelection，勾选该设置项后，那么，当你选中指定内容后，然后按住「Cmd F」，就可以自动只在这些内容里进行查找。该设置项如下图所示：

那么，就可以创建多层子文件夹，效果如下：

21、.vscode 文件夹的作用

为了统一团队的 vscode 配置，我们可以在项目的根目录下建立.vscode目录，在里面放置一些配置内容，比如：

settings.json：工作空间设置、代码格式化配置、插件配置。sftp.json：ftp 文件传输的配置。

.vscode目录里的配置只针对当前项目范围内生效。将.vscode提交到代码仓库，大家统一配置时，会非常方便。

22、自带终端

我们可以按下「Ctrl `」打开 VS Code 自带的终端。我认为内置终端并没有那么好用，我更建议你使用第三方的终端 item2。

23、markdown 语法支持

VS Code 自带 markdown 语法高亮。也就是说，如果你是用 markdown 格式写文章，则完全可以用 VS Code 进行写作。

写完 md 文件之后，你可以点击右上角的按钮进行预览，如下图所示：

上图中，我们点击最新的那条记录，就可将云端的最新配置同步到本地：

上图中，点击红框部分，即可在输入框里，查找你想要的插件名，然后进行安装。

我来列举几个常见的插件，这些插件都很实用。注意：顺序越靠前，越实用。

1、GitLens 【荐】

我强烈建议你安装插件GitLens，它是 VS Code 中我最推荐的一个插件，简直是 Git 神器，码农必备。如果你不知道，那真是 out 了。

GitLens 在 Git 管理上有很多强大的功能，比如：

将光标放置在代码的当前行，可以看到这样代码的提交者是谁，以及提交时间。这一点，是 GitLens 最便捷的功能。查看某个 commit 的代码改动记录查看不同的分支可以将两个 commit 进行代码对比甚至可以将两个 branch 分支进行整体的代码对比。这一点，简直是 GitLens 最强大的功能。当我们在不同分支 review 代码的时候，就可以用到这一招。2、Git History

有些同学习惯使用编辑器中的 Git 管理工具，而不太喜欢要打开另外一个 Git UI 工具的同学，这一款插件满足你查询所有 Git 记录的需求。

3、Live Server 【荐】

在本地启动一个服务器，代码写完后可以实现「热更新」，实时地在网页中看到运行效果。就不需要每次都得手动刷新页面了。

使用方式：安装插件后，开始写代码；代码写完后，右键选择「Open with Live Server」。

4、Chinese (Simplified) Language Pack for Visual Studio Code

让软件显示为简体中文语言。

5、Bracket Pair Colorizer 2：突出显示成对的括号【荐】

Bracket Pair Colorizer 2插件：以不同颜色显示成对的括号，并用连线标注括号范围。简称彩虹括号。

另外，还有个Rainbow Brackets插件，也可以突出显示成对的括号。

6、sftp：文件传输 【荐】

如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器，可以安装sftp这个插件，很好用。在公司会经常用到。

详细配置已经在上面讲过。

7、open in browser

安装open in browser插件后，在 HTML 文件中「右键选择 –> Open in Default Browser」，即可在浏览器中预览网页。

8、highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】

VSCode 自带的高亮显示，实在是不够显眼。用插件支持一下吧。

所用了这个插件之后，VS Code 自带的高亮就可以关掉了：

在用户设置里添加”editor.selectionHighlight”: false即可。

参考链接：vscode 选中后相同内容高亮插件推荐

9、vscode-icons

vscode-icons 会根据文件的后缀名来显示不同的图标，让你更直观地知道每种文件是什么类型的。

10、Project Manager

工作中，我们经常会来回切换多个项目，每次都要找到对应项目的目录再打开，比较麻烦。Project Manager 插件可以解决这样的烦恼，它提供了专门的视图来展示你的项目，我们可以把常用的项目保存在这里，需要时一键切换，十分方便。

11、TODO Highlight

写代码过程中，突然发现一个 Bug，但是又不想停下来手中的活，以免打断思路，怎么办？按照代码规范，我们一般是在代码中加个 TODO 注释。比如：（注意，一定要写成大写TODO，而不是小写的todo）

//TODO:这里有个bug，我一会儿再收拾你

或者：

//FIXME:我也不知道为啥， but it works only that way.

安装了插件 TODO Highlight之后，按住「Cmd Shift P」打开命令面板，输入「Todohighlist」，选择相关的命令，我们就可以看到一个 todoList 的清单。

12、WakaTime 【荐】

统计在 VS Code 里写代码的时间。统计效果如下：

27、javascript console utils：快速打印 log 日志【荐】

安装这个插件后，当我们按住快捷键「Cmd Shift L」后，即可自动出现日志 console.log()。简直是日志党福音。

当我们选中某个变量 name，然后按住快捷键「Cmd Shift L」，即可自动出现这个变量的日志 console.log(name)。

其他的同类插件还有：Turbo Console Log。

不过，生产环境的代码，还是尽量少打日志比较好，避免出现一些异常。

编程有三等境界：

第三等境界是打日志，这是最简单、便捷的方式，略显低级，一般新手或资深程序员偷懒时会用。第二等境界是断点调试，在前端、Java、PHP、iOS 开发时非常常用，通过断点调试可以很直观地跟踪代码执行逻辑、调用栈、变量等，是非常实用的技巧。第一等境界是测试驱动开发，在写代码之前先写测试。与第二等的断点调试刚好相反，大部分人不是很习惯这种方式，但在国外开发者或者敏捷爱好者看来，这是最高效的开发方式，在保证代码质量、重构等方面非常有帮助，是现代编程开发必不可少的一部分。28、Code Spell Checker：单词拼写错误检查

这个拼写检查程序的目标是帮助捕获常见的单词拼写错误，可以检测驼峰命名。从此告别 Chinglish.

29、Local History 【荐】

维护文件的本地历史记录，强烈建议安装。代码意外丢失时，有时可以救命。

30、Polacode-2020：生成代码截图 【荐】

可以把代码片段保存成美观的图片，主题不同，代码的配色方案也不同，也也可以自定义设置图片的边框颜色、大小、阴影。

尤其是在我们做 PPT 分享时需要用到代码片段时，或者需要在网络上优雅地分享代码片段时，这一招很有用。

生成的效果如下：

其他同类插件：CodeSnap。我们也可以通过 https://carbon.now.sh/这个网站生成代码图片

有人可能会说：直接用 QQ 截图不行吗？可以是可以，但不够美观、不够干净。

31、Image Preview 【荐】

图片预览。鼠标移动到图片 url 上的时候，会自动显示图片的预览和图片尺寸。

32、Auto Close Tag、Auto Rename Tag

自动闭合标签、自动对标签重命名。

33、Better Comments

为注释添加更醒目、带分类的色彩。

34、CSS Peek

增强 HTML 和 CSS 之间的关联，快速查看该元素上的 CSS 样式。

35、Vue CSS Peek

CSS Peek 对 Vue 没有支持，该插件提供了对 Vue 文件的支持。

36、Color Info

这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

37、RemoteHub

不要惊讶，RemoteHub 和 GitLens 是同一个作者开发出来的。

RemoteHub插件的作用是：可以在本地查看 GitHub 网站上的代码，而不需要将代码下载到本地。

这个插件目前使用的人还不多，赶紧安装起来尝尝鲜吧。

38、Live Share：实时编码分享

Live Share这个神奇的插件是由微软官方出品，它的作用是：实时编码分享。也就是说，它可以实现你和你的同伴一起写代码。这绝对就是结对编程的神器啊。

安装方式：

打开插件管理，搜索“live share”，安装。安装后重启 VS Code，在左侧会多出一个按钮：

上图中，点击红框部分，登录后就可以分享你的工作空间了。

39、Import Cost

在项目开发过程中，我们会引入很多 npm 包，有时候可能只用到了某个包里的一个方法，却引入了整个包，导致代码体积增大很多。Import Cost插件可以在代码中友好的提示我们，当前引入的包会增加多少体积，这很有助于帮我们优化代码的体积。

Paste JSON as Code

此插件可以将剪贴板中的 JSON 字符串转换成工作代码。支持多种语言。

八、常见主题插件

给你的 VS Code 换个皮肤吧，免费的那种。　操作：File（文件）- Preferences（首选项）- Color-Theme （颜色主题）

Dracula ThemeMaterial ThemeNebula ThemeOne Dark ProOne Monokai ThemeMonokai ProAyuSnazzy PlusDaintySynthWave ’84GitHub Plus Theme：白色主题Horizon Theme：红色主题