VS code开发工具的使用教程

前言

工欲善其事必先利其器，提升程序员的开发效率必需要有一个好的开发工具，当前最好的前端开发工具主要有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基本使用的介绍：

1、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，一键下载安装便可。

2、显露头角：VS Code 快捷键

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

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

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

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

一、工做区快捷键

Mac 快捷键	Win 快捷键	做用	备注
Cmd + Shift + P	Ctrl + Shift + P，F1	显示命令面板
Cmd + B	Ctrl + B	显示/隐藏侧边栏	很实用
Cmd + \	Ctrl + \	建立多个编辑器	【重要】抄代码利器
Cmd + 一、2	Ctrl + 一、2	聚焦到第 一、第 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	关闭当前文件

二、跳转操做

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+\	跳转到匹配的括号

三、移动光标

Mac 快捷键	Win 快捷键	做用	备注
方向键	方向键	在单个字符之间移动光标	你们都知道
option + 左右方向键	Ctrl + 左右方向键	在单词之间移动光标	很经常使用
Cmd + 左右方向键	Fn + 左右方向键	在整行之间移动光标	很经常使用
Cmd + ←	Fn + ←（或 Win + ←）	将光标定位到当前行的最左侧	很经常使用
Cmd + →	Fn + →（或 Win + →）	将光标定位到当前行的最右侧	很经常使用
Cmd + ↑	Ctrl + Home	将光标定位到文章的第一行
Cmd + ↓	Ctrl + End	将光标定位到文章的最后一行
Cmd + Shift + \		在代码块之间移动光标

四、编辑操做

Mac 快捷键	Win 快捷键	做用	备注
Cmd + Enter	Ctrl + Enter	在当前行的下方新增一行，而后跳至该行	即便光标不在行尾，也能快速向下插入一行
Cmd+Shift+Enter	Ctrl+Shift+Enter	在当前行的上方新增一行，而后跳至该行	即便光标不在行尾，也能快速向上插入一行
Option + ↑	Alt + ↑	将代码向上移动	很经常使用
Option + ↓	Alt + ↓	将代码向下移动	很经常使用
Option + Shift + ↑	Alt + Shift + ↑	将代码向上复制
Option + Shift + ↓	Alt + Shift + ↓	将代码向下复制	写重复代码的利器

五、多光标编辑

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」键），既可在每一行的末尾都建立一个光标。

六、删除操做

Mac 快捷键	Win 快捷键	做用	备注
Cmd + shift + K	Ctrl + Shift + K	删除整行	「Cmd + X」的做用是剪切，但也能够删除整行
option + Backspace	Ctrl + Backspace	删除光标以前的一个单词	英文有效，很经常使用
option + delete	Ctrl + delete	删除光标以后的一个单词
Cmd + Backspace		删除光标以前的整行内容	很经常使用
Cmd + delete		删除光标以后的整行内容

备注：上面所讲到的移动光标、编辑操做、删除操做的快捷键，在其余编辑器里，大部分都适用。

七、编程语言相关

Mac 快捷键	Win 快捷键	做用	备注
Cmd + /	Ctrl + /	添加单行注释	很经常使用
Option + Shift + F	Alt + shift + F	代码格式化	很经常使用
F2	F2	以重构的方式进行重命名	改代码备
Ctrl + J		将多行代码合并为一行	Win 用户可在命令面板搜索”合并行“
Cmd +
Cmd + U	Ctrl + U	将光标的移动回退到上一个位置	撤销光标的移动和选择

八、搜索相关

Mac 快捷键	Win 快捷键	做用	备注
Cmd + Shift + F	Ctrl + Shift +F	全局搜索代码	很经常使用
Cmd + P	Ctrl + P	在当前的项目工程里，全局搜索文件名
Cmd + F	Ctrl + F	在当前文件中搜索代码，光标在搜索框里
Cmd + G	F3	在当前文件中搜索代码，光标仍停留在编辑器里	很巧妙

九、自定义快捷键

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

固然，你也能够选择菜单栏「偏好设置 --> 键盘快捷方式」，进入快捷键的设置：

十、快捷键列表

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

上图中，在展开的菜单中选择「键盘快捷方式」，就能够查看和修改全部的快捷键列表了：

快捷键参考连接

• 快捷键速查表[官方]：<https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf>;

3、命令面板的使用

Mac 用户按住快捷键 Cmd+Shift+P （Windows 用户按住快捷键Ctrl+Shift+P），能够打开命令面板。效果以下：

若是们须要修改一些设置项，能够经过「命令面板」来操做，效率会更高。这里列举一些。

一、设置字体大小

在命令面板输入“字体”，能够进行字体的设置，效果以下：

固然，你也能够在菜单栏，选择「首选项-设置-经常使用设置」，在这个设置项里修改字体大小。

二、快捷键设置

在命令面板输入“快捷键”，就能够进入快捷键的设置。

三、大小写转换

选中文本后，在命令面板中输入transfrom，就能够修改文本的大小写了。

四、使用命令行启动 VS Code

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

（2）使用命令行：

• code命令：启动 VS Code 软件

• code pathName/fileName命令：经过 VS Code 软件打开指定目录/指定文件。

4、私人订制：VS Code 的常见配置

一、VS Code 设置为中文语言

Mac 用户按住快捷键 Cmd+Shift+P （Windows 用户按住快捷键Ctrl+Shift+P），打开命令面板。

在命令面板中，输入Configure Display Language，选择Install additional languages，而后安装插件Chinese (Simplified) Language Pack for Visual Studio Code便可。

或者，咱们能够直接安装插件Chinese (Simplified) Language Pack for Visual Studio Code，是同样的。

安装完成后，重启 VS Code。

二、面包屑（Breadcrumb）

打开 VS Code 的设置项，选择「用户设置 -> 工做台 -> 导航路径」，以下图所示：

上图中，将红框部分打钩便可。

设置成功后，咱们就能够查看到当前文件的「层级结构」，很是方便。以下图所示：

有了这个面包屑导航，咱们能够在任意目录、任意文件之间随意跳转。

三、左右显示多个编辑器窗口（抄代码利器）

Mac 用户按住快捷键 Cmd + \， Windows 用户按住快捷键Ctrl + \，便可同时打开多个编辑器窗口，效果以下：

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

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

四、是否显示代码的行号

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

我建议保留这个设置项，无需修改。

五、右侧是否显示代码的缩略图

VS Code 会在代码的右侧，默认显示缩略图。你能够在设置项里搜索 editor.minimap进行设置，配置项以下：

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

当咱们把光标放在某一行时，这一行的背景色并无发生变化。若是想高亮显示当前行的代码，须要设置两步：

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

（2）在设置项里增长以下内容：

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

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

七、改完代码后当即自动保存

方式一：

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

上图中，咱们将配置项修改成onFocusChange以后，那么，当光标离开该文件后，这个文件就会自动保存了。很是方便。

方式二：

固然，你也能够直接在菜单栏选择「文件-自动保存」。勾选后，当你写完代码后，文件会当即实时保存。

八、保存代码后，是否当即格式化

保存代码后，默认不会当即进行代码的格式化。你能够在设置项里搜索editor.formatOnSave查看该配置项：

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

九、空格 or 制表符

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

常见的设置项以下：

• editor.detectIndentation：自动检测（默认开启）。截图以下：

• editor.insertSpaces：按 Tab 键时插入空格（默认）。截图以下：

• editor.tabSize：一个制表符默认等于四个空格。截图以下：

十、新建文件后的默认文件类型

当咱们按下快捷键「Cmd + N」新建文件时，VS Code 默认没法识别这个文件究竟是什么类型的，所以也就没法识别相应的语法高亮。

若是你想修改默认的文件类型，能够在设置项里搜索files.defaultLanguage，设置项以下：

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

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

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

我建议这个设置项保持默认的打钩就好，不用修改。删除文件前的弹窗提示，也是为了安全考虑，万一手贱不当心删了呢？

接下来，咱们来说一些更高级的配置。

十二、文件对比

VS Code 默认支持对比两个文件的内容。选中两个文件，而后右键选择「将已选项进行比较」便可，效果以下：

VS Code 自带的对比功能并不够强大，咱们能够安装插件compareit，进行更丰富的对比。好比说，安装完插件compareit以后，咱们能够将「当前文件」与「剪切板」里的内容进行对比：

1三、查找某个函数在哪些地方被调用了

好比我已经在a.js文件里调用了 foo()函数。那么，若是我想知道foo()函数在其余文件中是否也被调用了，该怎么作呢？

作法以下：在 a.js 文件里，选中foo()函数（或者将光标放置在foo()函数上），而后按住快捷键「Shift + F12」，就能看到 foo()函数在哪些地方被调用了，比较实用。

1四、鼠标操做

• 在当前行的位置，鼠标三击，能够选中当前行。

• 用鼠标单击文件的行号，能够选中当前行。

• 在某个行号的位置，上下移动鼠标，能够选中多行。

1五、重构

重构分不少种，咱们来举几个例子。

命名重构：

当咱们尝试去修改某个函数（或者变量名）时，咱们能够把光标放在上面，而后按下「F2」键，那么，这个函数（或者变量名）出现的地方都会被修改。

方法重构：

选中某一段代码，这个时候，代码的左侧会出现一个「灯泡图标」，点击这个图标，就能够把这段代码提取为一个单独的函数。

1六、在当前文件中搜索

在上面的快捷键列表中，咱们已经知道以下快捷键：

• Cmd + F（Win 用户是 Ctrl + F）：在当前文件中搜索，光标在搜索框里

• Cmd + G（Win 用户是 F3）：在当前文件中搜索，光标仍停留在编辑器里

另外，你可能会注意到，搜索框里有不少按钮，每一个按钮都对应着不一样的功能，以下图所示：

上图中，你能够经过「Tab」键和「Shift + Tab」键在输入框和替换框之间进行切换。

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

1七、全局搜索

在上面的快捷键列表中，咱们已经知道以下快捷键：

• Cmd + Shift + F（Win 用户是 Ctrl + Shift +F）：在全局的文件夹中进行搜索。效果以下：

上图中，你能够点击红框部分，展开更多的配置项。

1八、Git 版本管理

VS Code 自带了 Git 版本管理，以下图所示：

上图中，咱们能够在这里进行常见的 git 命令操做。若是你还不熟悉 Git 版本管理，能够先去补补课。

与此同时，我建议安装插件GitLens，它是 VS Code 中我最推荐的一个插件，简直是 Git 神器，码农必备。

1九、将工做区放大/缩小

咱们在上面的设置项里修改字体大小后，仅仅只是修改了代码的字体大小。

若是你想要缩放整个工做区（包括代码的字体、左侧导航栏的字体等），能够按下快捷键「cmd +/-」。windows 用户是按下「ctrl +/-」

当咱们在投影仪上给别人演示代码的时候，这一招十分管用。

若是你想恢复默认的工做区大小，能够在命令面板输入重置缩放（英文是reset zoom）

20、建立多层子文件夹

咱们能够在新建文件夹的时候，若是直接输入aa/bb/cc，好比：

那么，就能够建立多层子文件夹，效果以下：

2一、.vscode 文件夹的做用

为了统一团队的 vscode 配置，咱们能够在项目的根目录下创建.vscode目录，在里面放置一些配置内容，好比：

• settings.json：工做空间设置、代码格式化配置、插件配置。

• sftp.json：ftp 文件传输的配置。

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

2二、自带终端

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

2三、markdown 语法支持

VS Code 自带 markdown 语法高亮。也就是说，若是你是用 markdown 格式写文章，则彻底能够用 VS Code 进行写做。

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

我通常是安装「Markdown Preview Github Styling」插件，以 GitHub 风格预览 Markdown 样式。样式十分简洁美观。

你也能够在控制面板输入Markdown: 打开预览，直接全屏预览 markdown 文件。

2四、Emmet in VS Code

Emmet能够极大的提升 html 和 css 的编写效率，它提供了一种很是简练的语法规则。

举个例子，咱们在编辑器中输入缩写代码：ul>li*6 ，而后按下 Tab 键，便可获得以下代码片断：

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

VS Code 默认支持 Emmet。更多 Emmet 语法规则，请自行查阅。

2五、修改字体，使用「Fira Code」字体

这款字体很漂亮，很适合用来写代码：

安装步骤以下：

（1）进入 <https://github.com/tonsky/FiraCode>; 网站，下载并安装「Fira Code」字体。

（2）打开 VS Code 的「设置」，搜索font，修改相关配置为以下内容：

"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 设置字体显示
"editor.fontLigatures": false,//控制是否启用字体连字，true启用，false不启用

上方的第二行配置，取决于我的习惯，我是直接设置为"editor.fontLigatures": null，由于我不太习惯连字。

2六、代码格式化：Prettier

咱们可使用 Prettier进行代码格式化，会让代码的展现更加美观。步骤以下：

（1）安装插件 Prettier。

（2）在项目的根路径下，新建文件.prettierrc，并在文件中添加以下内容：

{
  "printWidth": 150,
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tslintIntegration": true,
  "insertSpaceBeforeFunctionParenthesis": false
}

上面的内容，是我本身的配置，你能够参考。

更多配置，能够参考官方文档：<https://prettier.io/docs/en/options.html>;

2七、文件传输：sftp

若是你须要将本地文件经过 ftp 的形式上传到局域网的服务器，能够安装sftp这个插件，很好用。在公司会常常用到。

步骤以下：

（1）安装插件sftp。

（2）配置 sftp.json文件。 插件安装完成后，输入快捷键「cmd+shift+P」弹出命令面板，而后输入sftp:config，回车，当前工程的.vscode文件夹下就会自动生成一个sftp.json文件，咱们须要在这个文件里配置的内容能够是：

• host：服务器的 IP 地址

• username：用户名

• privateKeyPath：存放在本地的已配置好的用于登陆工做站的密钥文件（也能够是 ppk 文件）

• remotePath：工做站上与本地工程同步的文件夹路径，须要和本地工程文件根目录同名，且在使用 sftp 上传文件以前，要手动在工做站上 mkdir 生成这个根目录

• ignore：指定在使用 sftp: sync to remote 的时候忽略的文件及文件夹，注意每一行后面有逗号，最后一行没有逗号

举例以下：(注意，其中的注释须要去掉)

{
  "host": "192.168.xxx.xxx", //服务器ip
  "port": 22, //端口，sftp模式是22
  "username": "", //用户名
  "password": "", //密码
  "protocol": "sftp", //模式
  "agent": null,
  "privateKeyPath": null,
  "passphrase": null,
  "passive": false,
  "interactiveAuth": false,
  "remotePath": "/root/node/build/", //服务器上的文件地址
  "context": "./server/build", //本地的文件地址

  "uploadOnSave": true, //监听保存并上传
  "syncMode": "update",
  "watcher": {
    //监听外部文件
    "files": false, //外部文件的绝对路径
    "autoUpload": false,
    "autoDelete": false
  },
  "ignore": [
    //忽略项
    "**/.vscode/**",
    "**/.git/**",
    "**/.DS_Store"
  ]
}

（3）在 VS Code 的当前文件里，选择「右键 -> upload」，就能够将本地的代码上传到 指定的 ftp 服务器上（也就是在上方 host 中配置的服务器 ip）。

咱们还能够选择「右键 -> Diff with Remote」，就能够将本地的代码和 ftp 服务器上的代码作对比。

7、VS Code 配置云同步

咱们能够将配置云同步，这样的话，当咱们换个电脑时，便可将配置一键同步到本地，就不须要从新安装插件了，也不须要从新配置软件。

咱们还能够把配置分享其余用户，也能够把其余用户的配置给本身用。

将本身本地的配置云同步到 GitHub：

（1）安装插件 settings-sync。

（2）安装完插件后，在插件里使用 GitHub 帐号登陆。

（3）登陆后在 vscode 的界面中，能够选择一个别人的 gist；也能够忽略掉，而后建立一个属于本身的 gist。

（4）使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「更新/上传配置」，这样就能够把最新的配置上传到 GitHub。

换另一个电脑时，从云端同步配置到本地：

（1）当咱们换另一台电脑时，能够先在 VS Code 中安装 settings-sync 插件。

（2）安装完插件后，在插件里使用 GitHub 帐号登陆。

（3）登陆以后，插件的界面上，会自动出现以前的同步记录：

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

若是你远程的配置没有成功同步到本地，那多是网络的问题，此时，可使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「下载配置」，多试几回。

使用其余人的配置：

若是咱们想使用别人的配置，首先须要对方提供给你 gist。具体步骤以下：

（1）安装插件 settings-sync。

（2）使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「下载配置」

（3）在弹出的界面中，选择「Download Public Gist」，而后输入别人分享给你的 gist。注意，这一步不须要登陆 GitHub 帐号。

8、三头六臂：VS Code 插件推荐

VS Code 有一个很强大的功能就是支持插件扩展，让你的编辑器仿佛拥有了三头六臂。

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

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

一、GitLens 【荐】

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

GitLens 在 Git 管理上有不少强大的功能，好比：

• 将光标放置在代码的当前行，能够看到这样代码的提交者是谁，以及提交时间。这一点，是 GitLens 最便捷的功能。

• 查看某个 commit 的代码改动记录

• 查看不一样的分支

• 能够将两个 commit 进行代码对比

• 甚至能够将两个 branch 分支进行总体的代码对比。这一点，简直是 GitLens 最强大的功能。当咱们在不一样分支 review 代码的时候，就能够用到这一招。

二、Git History

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

三、Live Server 【荐】

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

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

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

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

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

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

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

六、sftp：文件传输 【荐】

若是你须要将本地文件经过 ftp 的形式上传到局域网的服务器，能够安装sftp这个插件，很好用。在公司会常常用到。

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

七、open in browser

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

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

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

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

在用户设置里添加"editor.selectionHighlight": false便可。

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

九、vscode-icons

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

十、Project Manager

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

十一、TODO Highlight

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

//TODO:这里有个bug，我一下子再收拾你

或者：

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

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

十二、WakaTime 【荐】

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

1三、Code Time

Code Time插件：记录编程时间，统计代码行数。

安装该插件后，VS Code 底部的状态栏右下角能够看到时间统计。点击那个位置以后，选择「Code Time Dashboard」，便可查看统计结果。

备注：团长试了一下这个 code time 插件，发现统计结果不是很准。

1四、Markdown Preview Github Styling 【荐】

以 GitHub 风格预览 Markdown 样式，十分简洁优雅。就像下面这样，左侧书写 Markdown 文本，右侧预览 Markdown 的渲染效果：

1五、Markdown Preview Enhanced

预览 Markdown 样式。

Markdown All in One

这个插件将帮助你更高效地在 Markdown 中编写文档。

1六、Settings Sync【荐】

• 地址：<https://github.com/shanalikhan/code-settings-sync>;

• 做用：多台设备之间，同步 VS Code 配置。经过登陆 GitHub 帐号来使用这个同步工具。

同步的详细操做已在上面讲过。

1七、vscode-syncing

• 地址：<https://github.com/nonoroazoro/vscode-syncing>;

• 做用：多台设备之间，同步 VS Code 配置。

1八、Vetur

Vue 多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VS Code 官方钦定 Vue 插件，Vue 开发者必备。

1九、ES7 React/Redux/GraphQL/React-Native snippets

React/Redux/react-router 的语法智能提示。

20、minapp：小程序支持

小程序开发必备插件。

2一、Prettier：代码格式化

Prettier 是一个代码格式化工具，只关注格式化，但不具有校验功能。在一个多人协同开发的团队中，统一的代码编写规范很是重要。一套规范可让咱们编写的代码达到一致的风格，提升代码的可读性和统一性。天然维护性也会有所提升。

2二、ESLint：代码格式校验

平常开发中，建议用能够用 Prettier 作代码格式化，而后用 eslint 作校验。

2三、Beautify

代码格式化工具。

备注：相比之下，Prettier 是当前最流行的代码格式化工具，比 Beautify 用得更多。

2四、JavaScript(ES6) code snippets

ES6 语法智能提示，支持快速输入。

2五、Search node_modules 【荐】

node_modules模块里面的文件夹和模块实在是太多了，根本很差找。好在安装 Search node_modules 这个插件后，输入快捷键「Cmd + Shift + P」，而后输入 node_modules，在弹出的选项中选择 Search node_modules，便可搜索 node_modules 里的模块。

2六、indent-rainbow：突出显示代码缩进

indent-rainbow插件：突出显示代码缩进。

安装完成后，效果以下图所示：

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

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

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

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

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

编程有三等境界：

• 第三等境界是打日志，这是最简单、便捷的方式，略显低级，通常新手或资深程序员偷懒时会用。

• 第二等境界是断点调试，在前端、Java、PHP、iOS 开发时很是经常使用，经过断点调试能够很直观地跟踪代码执行逻辑、调用栈、变量等，是很是实用的技巧。

• 第一等境界是测试驱动开发，在写代码以前先写测试。与第二等的断点调试恰好相反，大部分人不是很习惯这种方式，但在国外开发者或者敏捷爱好者看来，这是最高效的开发方式，在保证代码质量、重构等方面很是有帮助，是现代编程开发必不可少的一部分。

2八、Code Spell Checker：单词拼写错误检查

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

2九、Local History 【荐】

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

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

能够把代码片断保存成美观的图片，主题不一样，代码的配色方案也不一样，也也能够自定义设置图片的边框颜色、大小、阴影。

尤为是在咱们作 PPT 分享时须要用到代码片断时，或者须要在网络上优雅地分享代码片断时，这一招颇有用。

生成的效果以下：

其余同类插件：CodeSnap。咱们也能够经过 <https://carbon.now.sh/>这个网站生成代码图片

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

3一、Image Preview 【荐】

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

3二、Auto Close Tag、Auto Rename Tag

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

3三、Better Comments

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

3四、CSS Peek

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

3五、Vue CSS Peek

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

3六、Color Info

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

3七、RemoteHub

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

RemoteHub插件的做用是：能够在本地查看 GitHub 网站上的代码，而不须要将代码下载到本地。

这个插件目前使用的人还很少，赶忙安装起来尝尝鲜吧。

3八、Live Share：实时编码分享

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

安装方式：

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

上图中，点击红框部分，登陆后就能够分享你的工做空间了。

3九、Import Cost

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

Paste JSON as Code

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

8、常见主题插件

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

• Dracula Theme

• Material Theme

• Nebula Theme

• One Dark Pro

• One Monokai Theme

• Monokai Pro

• Ayu

• Snazzy Plus

• Dainty

• SynthWave '84

• GitHub Plus Theme：白色主题

• Horizon Theme：红色主题