关于javascript: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 根本应用的介绍：

一、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、工作区快捷键

2、跳转操作

3、挪动光标

4、编辑操作

5、多光标编辑

其余的多光标编辑操作：（很重要）

• 选中某个文本，而后重复按住快捷键「Cmd + D」键（windows 用户是按住「Ctrl + D」键），即可将全文中雷同的词逐个退出抉择。
• 选中一堆文本后，按住「Option + Shift + i」键（windows 用户是按住「Alt + Shift + I」键），既可在 每一行的开端 都创立一个光标。

6、删除操作

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

7、编程语言相干

8、搜寻相干

9、自定义快捷键

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

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

10、快捷键列表

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

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

快捷键参考链接

• 快捷键速查表[官网]：https://code.visualstudio.com…

三、命令面板的应用

Mac 用户按住快捷键 Cmd+Shift+P（Windows 用户按住快捷键Ctrl+Shift+P），能够关上命令面板。成果如下：

如果们须要批改一些设置项，能够通过「命令面板」来操作，效率会更高。这里列举一些。

1、设置字体大小

在命令面板输出“字体”，能够进行字体的设置，成果如下：

当然，你也能够在菜单栏，抉择「首选项 - 设置 - 罕用设置」，在这个设置项里批改字体大小。

2、快捷键设置

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

3、大小写转换

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

4、应用命令行启动 VS Code

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

（2）应用命令行：

• code命令：启动 VS Code 软件
• code pathName/fileName命令：通过 VS Code 软件关上指定目录 / 指定文件。

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

1、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。

2、面包屑（Breadcrumb）

关上 VS Code 的设置项，抉择「用户设置 -> 工作台 -> 导航门路」，如下图所示：

上图中，将红框局部打钩即可。

设置胜利后，咱们就能够查看到以后文件的「层级构造」，十分不便。如下图所示：

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

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

Mac 用户按住快捷键 Cmd + \，Windows 用户按住快捷键Ctrl + \，即可同时关上多个编辑器窗口，成果如下：

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

学会了这一招，当前抄代码的时候，leader 再也不必放心我抄得慢了，一天工资到手。

4、是否显示代码的行号

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

我倡议保留这个设置项，无需批改。

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

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

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

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

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

（2）在设置项里减少如下内容：

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

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

7、改完代码后立刻主动保留

形式一：

改完代码后，默认不会主动保留。你能够在设置项里搜寻files.autoSave，批改配置项如下：

上图中，咱们将配置项批改为 onFocusChange 之后，那么，当光标来到该文件后，这个文件就会主动保留了。十分不便。

形式二：

当然，你也能够间接在菜单栏抉择「文件 - 主动保留」。勾选后，当你写完代码后，文件会立刻实时保留。

8、保留代码后，是否立刻格式化

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

我感觉这个配置项放弃默认就好，不必打钩。

9、空格 or 制表符

VS Code 会依据你所关上的文件来决定该应用空格还是制表。也就是说，如果你的我的项目中应用的都是制表符，那么，当你在写新的代码时，按下 tab 键后，编辑器就会辨认成制表符。

常见的设置项如下：

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

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

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

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

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

如果你想批改默认的文件类型，能够在设置项里搜寻files.defaultLanguage，设置项如下：

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

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

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

我倡议这个设置项放弃默认的打钩就好，不必批改。删除文件前的弹窗提醒，也是为了平安思考，万一手贱不小心删了呢？

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

12、文件比照

VS Code 默认反对 比照两个文件的内容。选中两个文件，而后右键抉择「将已选项进行比拟」即可，成果如下：

VS Code 自带的比照性能并不够弱小，咱们能够装置插件 compareit，进行更丰盛的比照。比如说，装置完插件compareit 之后，咱们能够将「以后文件」与「剪切板」里的内容进行比照：

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

比方我曾经在 a.js 文件里调用了 foo()函数。那么，如果我想晓得 foo() 函数在其余文件中是否也被调用了，该怎么做呢？

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

14、鼠标操作

• 在以后行的地位，鼠标三击，能够选中以后行。
• 用鼠标单击文件的 行号，能够选中以后行。
• 在某个 行号 的地位，高低挪动鼠标，能够选中多行。

15、重构

重构分很多种，咱们来举几个例子。

命名重构：

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

办法重构：

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

16、在以后文件中搜寻

在下面的快捷键列表中，咱们曾经晓得如下快捷键：

• Cmd + F（Win 用户是 Ctrl + F）：在以后文件中搜寻，光标在搜寻框里
• Cmd + G（Win 用户是 F3）：在以后文件中搜寻，光标仍停留在编辑器里

另外，你可能会留神到，搜寻框里有很多按钮，每个按钮都对应着不同的性能，如下图所示：

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

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

17、全局搜寻

在下面的快捷键列表中，咱们曾经晓得如下快捷键：

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

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

18、Git 版本治理

VS Code 自带了 Git 版本治理，如下图所示：

上图中，咱们能够在这里进行常见的 git 命令操作。如果你还不相熟 Git 版本治理，能够先去补补课。

与此同时，我倡议装置插件GitLens，它是 VS Code 中我最举荐的一个插件，几乎是 Git 神器，码农必备。

19、将工作区放大 / 放大

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

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

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

如果你想复原默认的工作区大小，能够在命令面板输出 重置缩放（英文是reset zoom）

20、创立多层子文件夹

咱们能够在新建文件夹的时候，如果间接输出aa/bb/cc，比方：

那么，就能够创立多层子文件夹，成果如下：

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 文件之后，你能够点击右上角的按钮进行预览，如下图所示：

我个别是装置「Markdown Preview Github Styling」插件，以 GitHub 格调预览 Markdown 款式。款式非常简洁好看。

你也能够在控制面板输出Markdown: 关上预览，间接全屏预览 markdown 文件。

24、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 语法规定，请自行查阅。

25、批改字体，应用「Fira Code」字体

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

装置步骤如下：

（1）进入 https://github.com/tonsky/Fir… 网站，下载并装置「Fira Code」字体。

（2）关上 VS Code 的「设置」，搜寻font，批改相干配置为如下内容：

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

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

26、代码格式化：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/o…

27、文件传输：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 服务器上的代码做比照。

七、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 账号。

八、三头六臂：VS Code 插件举荐

VS Code 有一个很弱小的性能就是反对插件扩大，让你的编辑器好像领有了三头六臂。

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

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

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 里写代码的工夫。统计成果如下：

13、Code Time

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

装置该插件后，VS Code 底部的状态栏右下角能够看到工夫统计。点击那个地位之后，抉择「Code Time Dashboard」，即可查看统计后果。

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

14、Markdown Preview Github Styling【荐】

以 GitHub 格调预览 Markdown 款式，非常简洁优雅。就像上面这样，左侧书写 Markdown 文本，右侧预览 Markdown 的渲染成果：

15、Markdown Preview Enhanced

预览 Markdown 款式。

Markdown All in One

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

16、Settings Sync【荐】

• 地址：https://github.com/shanalikha…
• 作用：多台设施之间，同步 VS Code 配置。通过登录 GitHub 账号来应用这个同步工具。

同步的具体操作已在下面讲过。

17、vscode-syncing

• 地址：https://github.com/nonoroazor…
• 作用：多台设施之间，同步 VS Code 配置。

18、Vetur

Vue 多功能集成插件，包含：语法高亮，智能提醒，emmet，谬误提醒，格式化，主动补全，debugger。VS Code 官网钦定 Vue 插件，Vue 开发者必备。

19、ES7 React/Redux/GraphQL/React-Native snippets

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

20、minapp：小程序反对

小程序开发必备插件。

21、Prettier：代码格式化

Prettier 是一个代码格式化工具，只关注格式化，但不具备校验性能。在一个多人协同开发的团队中，对立的代码编写标准十分重要。一套标准能够让咱们编写的代码达到统一的格调，进步代码的可读性和统一性。天然维护性也会有所提高。

22、ESLint：代码格局校验

日常开发中，倡议用能够用 Prettier 做代码格式化，而后用 eslint 做校验。

23、Beautify

代码格式化工具。

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

24、JavaScript(ES6) code snippets

ES6 语法智能提醒，反对疾速输出。

25、Search node_modules【荐】

node_modules模块外面的文件夹和模块切实是太多了，基本不好找。好在装置 Search node_modules 这个插件后，输出快捷键「Cmd + Shift + P」，而后输出 node_modules，在弹出的选项中抉择 Search node_modules，即可搜寻 node_modules 里的模块。

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

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

装置实现后，成果如下图所示：

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 Theme
• Material Theme
• Nebula Theme
• One Dark Pro
• One Monokai Theme
• Monokai Pro
• Ayu
• Snazzy Plus
• Dainty
• SynthWave '84
• GitHub Plus Theme：红色主题
• Horizon Theme：红色主题