Visual Studio Code是一款功能强大的代码编辑器，但您可以通过安装扩展来进一步提升其功能。以下8个扩展可以帮助您提高编码效率：

1. GitHub Copilot

安装链接：

GitHub Copilot是一个AI编码助手，可以实时提供代码建议。有了这个扩展，编码变得轻而易举。它可以改善您的编码体验，提高您的生产力。提示：您可以免费试用GitHub Copilot。

2. TODO Highlight

安装链接：

此扩展突出显示您的待办事项注释，并提醒您有未完成的注释或任务。此扩展带有内置关键字 TODO 和 FIXME ，您还可以添加自己的关键字并更改其外观。

3. Path Intellisense

安装链接：

在编码中，细节至关重要，即使像编写文件路径这样的小任务也可能繁琐且容易出错。这就是Path Intellisense扩展派上用场的地方。此扩展通过为文件名添加自动完成功能，使查找正确的文件路径变得轻而易举。输入时，它会提供文件和文件夹的建议，从而节省时间并避免错误。

4. GitLens

安装链接：

如果您想知道是谁修改了一行代码或一段代码块，以及为什么修改，那么此扩展就非常有用。此扩展允许开发人员无需离开编辑器即可查看所有相关信息，使开发人员能够保持专注。花费在上下文切换或缺失上下文上的任何额外时间都会中断开发人员的工作流程，这对开发人员的生产力至关重要。

5. Prettier

安装链接：

保持代码一致的格式是一个挑战，但使用正确的工具可以实现自动化并保持代码库的一致性。这就是Prettier扩展的用途。Prettier是一个具有明确偏好的代码格式化工具，可以根据统一的样式自动格式化代码，从而提高代码的可读性。您的代码将使用适当的间距、换行和引号进行格式化。您甚至可以配置Prettier，使其在每次保存代码时自动运行。此扩展是一个明智的选择。

6. REST Client

安装链接：

REST Client扩展允许开发人员直接在Visual Studio Code中发送HTTP请求并查看响应。此扩展的语法非常简洁：对于简单的GET请求，只需一行代码，其中包含关键字GET和URL。如果您需要发送更复杂的请求，此扩展提供了许多选项供开发人员根据需要使用。您可以添加认证标头，或者根据需要发送带有JSON数据的完整POST请求。

7. AutoRename Tag

安装链接：

AutoRename Tag扩展功能简单，可以轻松编写HTML代码。此扩展会自动重命名成对的HTML标签。如果您重命名了一个打开标签，它会同时更改相应的关闭标签，反之亦然。建议将此扩展与AutoClose Tag扩展一起使用。AutoClose Tag扩展会在您输入打开标签的关闭括号时自动添加关闭标签。同时安装这两个扩展非常强大，可以帮助开发人员以更高效和一致的方式编写HTML，并减少HTML错误。

8. Live Server

安装链接：

Live Server扩展允许您从Visual Studio Code中直接启动和调试服务器。此扩展支持多种语言和框架，包括Node.js、Python、Django和Flask。安装此扩展后，您可以使用诸如 Live Server: Start 和 Live Server: Reload 之类的命令从命令面板中启动和重新加载服务器，从而节省了在终端中输入命令的时间。这使得开发和调试Web应用程序变得轻而易举。

这些是您可以使用的许多Visual Studio Code扩展中的一部分，以提高您的编码效率。根据您的特定需求和偏好，还有许多其他扩展可供选择。探索并尝试不同的扩展，找到最适合您的扩展，并将其纳入您的工作流程，以最大程度地提高您的生产力。

---

vscode配置c/c++环境

区分编辑器、编译器、IDE： 作者：C语言教学

编辑器就是处理文本（源码）的程序，写代码写的就是文本，编辑器可能提供智能提示、代码高亮等辅助功能，但不负责源码到二进制文件的操作；

编译器就是负责将源码文本翻译成计算机能够理解和执行的二进制文件的程序；

集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，包括了代码编辑器、编译器、调试器和图形用户界面工具。集成了代码编写、分析、编译、调试等一整套工具链。

什么是搭建环境：

vscode定位代码编辑器，不是IDE，不包含编译功能，因此需要我们自己安装编译器、调试器等编译器套件，并使两者有效的配合起来，以实现快捷操作。把这一整套工具链整合到一起的过程就是我们所说的搭建环境。

ok,到这里，我们就清楚要做什么了：获取编辑器 -> 获取编译套装(编译器、调试器、头文件库等) -> 做好两者之间的沟通工作(配置文件)

两个东西：编辑器和编译套装

编辑器： VSCode

编译套装：win10：mingw-w64安装教程

下载

：每个月会发布一个新的稳定版本

每天都会更新一次

可以和Stable共存，而且用户配置、颜色主体等都是相互独立的

VS Code 安装完之后就会自动更新，你并不需要前往官网重新下载

安装

官网上下载，然后执行如下命令：

sudo apt install ./

（2） windows

直接下一步

中文显示

打开vscode，发现全是英文，我们先装个汉化插件：

在插件视图中，搜索并安装Chinese (Simplified) Language Pack插件

Ctrl + Shift + P打开命令面板，输入并执行Configure Display Language命令

选择zh-cn选项

重启

完全卸载

如果大家之前有安装过VSCode，然后只是简单卸载的话，再次安装之后，是还出现之前的配置信息，包括打开的文件夹、安装过的扩展等，这是因为之前并没有完全将VSCode卸载干净。如果想干净卸载掉VSCode再重新安装的话，就需要在卸载之后再删除掉两个目录的内容。分别是：

C:\Users$用户

C:\Users$用户名\AppData\Roaming\Code

安装C/C++必备的插件

安装C/C++ Project Generator

示例一

在vscode中 ctrl+shift+p 打开菜单，在其中输入 create c

这时会弹出一个窗口，让你选中将源码放到哪个工作空间上，这个我选择C_Mutile，此时它会显式

这两个东西是啥呢？

先了解几个概念：

命令行：命令行 或 命令行界面，是一种基于文本的用来查看、处理、和操作计算机上的文件和程序的工具。

终端/控制台：可以输入命令行并显示程序运行过程中的信息以及程序运行结果的窗口。 不必要严格区分这两者的差别。

shell：终端自身并不执行用户输入的命令，它只是负责把输入的内容传送到主机系统，并把主机系统返回的结果呈现给用户。负责解释执行用户输入的命令并返回结果的，正是Shell，它是沟通用户和系统内核的中间桥梁。

我们写完代码之后，可以通过命令行去编译运行：

打开一个cmd终端

进入文件夹位置，然后gcc -o hello hello.c

但是每次都用命令行太麻烦了，怎么样才能更快捷呢？可以通过文件夹下的json配置文件来配置实现。这些json文件怎么写是由vscode开发团队规定的（感兴趣可以去看官方的文档），

task是任务的意思，我们的编译和运行就是我们想要vscode执行的任务，为此我们要在里写两个task：Build和Run(这里为什么不是Compile呢？是因为从源码到可执行的过程中不仅是编译(Compile),还有预编译、链接等过程，用构建(Build)来表述更合适)。除了编译和运行，我们还需要进行调试(Debug)，这个就不是通过task来实现的了，而是通过文件来实现。

运行

方法一：按F5调试运行

方法二，图形界面

遇到的错误

g++ : 无法将“g++”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

解决：

将MinGW配置到环境变量中，注意配置完之后要重启vscode

检查MinGW是否配置好：

gcc --version

g++ --version

gdb --version

终端启动VSCode

打开一个终端，然后运行code命令即可启动终端。

运行code --help可以打印出VS Code命令行支持的所有参数

打开一个文件夹

在一个新窗口中打开这个文件或文件夹： code 文件夹/文件名

在一个已经打开的窗口来打开文件： code -r 文件夹/文件名

比较两个文件的内容

比较两个文件的内容：

code -d 文件a 文件b。

比如：code -r -d

其他

VS Code 命令行除了支持打开磁盘上的文件以外，也接受来自管道中的数据。这样你就可以将原本在命令行中展示的内容，实时地展示在 VS Code 里，然后在编辑器中搜索和修改。比如，你可以把当前目录下所有的文件名都展示在编辑器里，此时只需使用ls | code -命令。

关闭当前项目

file → close Folder

从资源管理器里调出系统终端

打开和创建一个集成终端：

打开终端的方法：

菜单栏：View–>Terminal

快捷键：Ctrl + `，按一下打开，再按一下关闭

命令面板：搜索并执行“切换集成终端”（Toggle Integrated Terminal）

具体效果：

如果还没有任何集成终端存在，那么它将创建一个新的，然后显示出来；

如果已经有几个集成终端了，那么就把终端面板调出来；

如果我们的光标就在集成终端里，那么这个命令会将终端面板隐藏。

若我们希望创建出一个新的终端来，而不是切换终端：

快捷键：Ctrl + Shift + `

命令面板：搜索并执行 “新建集成终端”（Create New Intergrated Terminal）

如果我们的电脑屏幕足够大，或者我们希望在同一界面上看到多个运行的脚本，我们也可以把一个终端面板进行切分。我们只需按下 Cmd + \ 或者运行 “拆分终端”（Split Terminal），就能够将当前的终端一分为二；如果再次按下这个快捷键，就能够将当前的面板平均分为三份……

最上面一行是状态栏：

侧边栏：在默认设置下 VS Code 的左侧侧边栏有五个组件，它们分别是：

资源管理器，主要用于浏览和管理文件和文件夹。

跨文件搜索，用于在当前文件夹内进行跨文件的搜索。

源代码管理，用于对当前文件夹下的代码进行版本管理，默认 VS Code 支持的版本管理软件是 Git。

启动和调试，用于对当前文件夹下的项目进行运行和调试。

插件管理，用于下载和管理 VS Code 里的插件。

在侧边栏的最下角还有一个齿轮形状的按钮

它提供了一些 VS Code 系统管理常用的快捷键，点击打开后，你可以看到命令面板、设置、键盘快捷方式、管理扩展等等一系列快速入口。

界面的最下面一行则是状态栏：

这个组件的作用就是将当前文件夹、编辑器状态、代码版本、代码错误等的简略讯息呈现给你。除此之外，很多插件也会选择将信息呈现在状态栏上。

面板（Panel）

不过“界面概览”并没有覆盖所有的组件，其中一个非常重要的部分就是面板（Panel），你可以在命令面板中执行“切换面板”命令来打开它。

打开后，你会看到面板的四个组件：问题面板、输出面板、调试控制台和终端。

问题面板（Problems Panel）的作用是展示当前文件夹下代码里的所有问题和警告，比如你的代码有语法错误、格式问题、拼写错误等

输出面板（Output Panel）的作用就是将核心命令和插件的运行状态和结果输出来，比如你使用 Git 来管理你的代码版本，你的每个 UI 上的版本操作，你都能在输出面板里看到这个操作对应的 Git 命令行以及它的运行结果。这样即使意外发生了， VS Code 无法完成指定的 Git 命令，你依然可以通过阅读输出面板找到问题所在，然后自行修复。

调试控制台主要是在调试代码时使用

终端是开发工作中不可或缺的一个工具，VS Code 则更进一步，把终端直接集成了进来。集成终端的存在，使得 VS Code 保持轻量级成为了可能性。

命令面板

设计目的：是 VS Code 快捷键的主要交互界面，这样不用鼠标，使得所有的操作都可以通过键盘进行

如何打开：Ctrl + Shift + P

打开之后，命令面板的输入框里已经有一个字符：

如果第一个字符是>（默认） ，当你继续输入字符时，VS Code 就会在所有命令里进行搜索。

VS Code 的绝大多数命令都可以在命令面板里搜到

所以熟练使用命令面板，你就可以摆脱鼠标，完全通过键盘操作来完成全部编码工作。

如果第一个字符是@，那么就扫描当前文件，提供所有的符号。）

如果第一个字符是？，就可以看到十几条选项，分别代表着你能在命令面板里使用的不同的功能

>（大于号） ，用于显示所有的命令。

@ ，用于显示和跳转文件中的“符号”（Symbols），在@符号后添加冒号：则可以把符号们按类别归类。

# 号，用于显示和跳转工作区中的“符号”（Symbols）

：（冒号）， 用于跳转到当前文件中的某一行。

如果输入框里没有任何的字符时，命令面板提供的功能是访问最近使用的文件

edt 是 edit（编辑）的缩写，输入 edt 和一个空格，命令面板就会显示所有已经打开的文件；而edt active则只会显示当前活动组中的文件。

ext 是 extension（插件）的缩写，输入 ext 和一个空格，就可以进行插件的管理；ext install 则可以在命令面板中搜索和安装插件。

task和debug 分别对应于任务和调试功能。

term 是 terminal（终端）的缩写，你可以用这个命令来创建和管理终端实例。

view 则是用于打开 VS Code 的各个 UI 组件。

下面是一些常用命令的快捷键：

Ctrl + P ：文件跳转

Ctrl + Shift + Tab：在所有打开的文件中跳转

Ctrl + Shift + Tab：跳转到文件中的符号

Ctrl + G：跳转到文件中的某一行

如下图，在输入框中输入文号，就能列出所有可用的相关命令

键盘操作

自定义快捷键

打开键盘快捷方式：Ctrl+K ，Ctrl+S

搜索select to bracket（选择括号内所有内容），双击

按下”Cmd + Shift + ]”，回车

删除快捷键

在搜索框内搜索你使用的快捷键

通过右键选择删除该快捷键的绑定

针对单词的光标移动

一个字符一个字符的移动：方向键

一个单词一个单词的移动：Option（Windows 上是 Ctrl 键）和方向键

对于代码块的光标移动

if、for 语句会使用花括号将代码块包裹起来，可以在{}始末快速跳转： Cmd + Shift + \（Windows 上是 Ctrl + Shift + \）

选中文本

把光标到单词开头之间的所有字符全部选中：Option（Windows 上是 Ctrl 键） + 左方向键+ Shift 键

将光标到第一行，或者最后一行之间的字符选中：Cmd、Shift 和上下方向键

操作一行代码

删除一行代码：“ Cmd + Shift + K ” (Windows 上是 “Ctrl + Shift + K”)

剪切一行代码：“ Cmd + x ” (Windows 上是 “Ctrl + x”)

在当前行的下面开始新一行：“Cmd + Enter” （Windows 上是 “Ctrl + Enter”）

在当前行的上面开始新一行：“Cmd + Shift + Enter” （Windows 上是 “Ctrl + Shift + Enter”）

撤销光标移动

撤销光标移动：“Cmd + U”（Windows 上是 “Ctrl + U”）

调整字符大小写

在命名面板里搜索：transf， 来变换字符的大小写。

代码格式化

前提：VS Code已经安装了相关插件。

对整个文档进行缩进： “Option + Shift + F” （Windows 上是 Alt + Shift + F）

对选中代码进行缩进：“Cmd + K Cmd + F” （Windows 上是 Ctrl + K Ctrl + F）

将代码注释掉：

Cmd + / （Windows 上时 Ctrl + /）

代码缩进

打开命令面板（快捷键“Cmd + Shift + P”），搜索 “reind”，然后使用 “重新缩进行” 将整个文档的缩进进行调整，但更多时候，你只需要运行 “重新缩进选中行” 来调整部分选中代码行的缩进。

行排序

无论是你在写代码，还是写 Markdown，你都可以把代码行按照字母序进行重新排序。不过这个命令比较小众，VS Code 并没有给这个命令指定快捷键，你可以调出命令面板，然后搜索 “按升序排列行” 或者 “按降序排列行” 命令执行。

合并代码行

有的时候你可能会为了避免代码看起来过于冗余，就会把比较短小的几行代码合并到一行里面去。这时，你只需要按下 “ Ctrl + j ” （Windows 上未绑定快捷键，可以打开命令面板，搜索 ”合并行“）就可以了，而不需要不断地调整光标、删除换行符。

修改函数或者变量的名字

只需把光标放到函数或者变量名上，然后按下 F2，这样这个函数或者变量出现的地方就都会被修改。

把一段长代码抽取出来转成一个单独的函数

只需选中那段代码，点击黄色的灯泡图标，然后选择对应的重构操作即可

要注意的是，并不是每个语言服务都支持重构的操作。如果你选中一段代码后，但没有看到那个黄色的灯泡图标，那么也就是说你使用的这门语言可能还没有支持快速重构。

代码跳转

跳转到了 函数的定义处：

将鼠标移动到foo 上

然后按下 Cmd 键，这时候 foo下面出现了一个下划线。

然后当我们按下鼠标左键，就跳转到了 函数的定义处。

跳转到函数定义的位置：F12

跳转到函数的实现的位置：“Cmd + F12” （Windows 上是 Ctrl + F12）

找到函数/类在哪里被引用

将光标移动到函数或者类上面

按下Shift+ F12

文件跳转

按下 “Cmd + P” （Windows 上是 Ctrl + P）时，跳出一个搜索框。

搜索你想要的文件

打开

直接打开：“Enter” 键

一个新的编辑器窗口中打开： “Cmd + Enter ” （Windows 上是 Ctrl + Enter）组合键

行跳转

将光标快速地移动到某一行

按下 “Ctrl + g”，调出行输入框

这个输入框的第一个字符就是 “ : ”，在这之后输入数字

将光标快速移动的某个文件的某一行：

按下 “Cmd + P”

在搜索框输入： 文件名:指定行，比如 :3

在一个文件里的符号之间跳转

按下 “Cmd + Shift + O” （Windows 上是 Ctrl + Shift + O），就能够看到当前文件里的所有符号。

使用方向键，或者搜索，找到你想要的符号后，按下回车，就能够立刻跳转到那个符号的位置。

输入框里有一个 “@”符号，这时，如果你输入 “:”，就可以将当前文件的所有符号，进行分类，这样搜索符号也就更加方便。

在多个文件里的符号之间跳转

“Cmd + T” （Windows 上是 Ctrl + T），搜索这些文件里的符号

面包屑

怎么打开面包屑功能：“打开设置”（Open Settings），搜索 “”，找到后将它打开。

怎么用？从左到右，我们能够看到一层一层文件夹的名字，然后是当前文件名，最后则是光标所在的函数的名字。我们可以通过点击这个工具栏上的文字，然后进行文件夹、文件或者是函数的跳转。

”Cmd +F”搜索，按下 Enter 键在搜索结果当中快速跳转

把光标放在编辑器当中

按下 “Cmd + F” （Windows 上是 Ctrl + F），就能够快速地调出搜索窗口

调出搜索窗口的时候，编辑器就会把当前光标所在位置的单词自动填充到搜索框中。与此同时，当前文件里和搜索关键词相同的单词都会被高亮出来。

我们可以在在搜索框中搜索，然后按下Enter 键在搜索结果当中快速跳转

打开命令面板，搜索“配置用户代码片段”（Configure User Snippets）并且执行

这时候我们会看到一个列表，让我们选择语言。我们选中JavaScript

选择完语言后，我们就能看到一个 JSON 文件被打开了，这个文件里的内容，现在都是被注释掉的。我们可以选中第七行到第十四行，按下 Cmd+ / 取消注释。

这个就是代码片段了。

它是一个 JSON 文件，它的根对象下面的所有子节点都是一个单独的代码片段，并能够被我们调用和插入编辑器。

这个代码片段对象的键（key）是这个代码片段的名字，我们在书写时只要保证这个名字跟当前文件里的其他代码片段不冲突就可以了。

下面例子中：

这个代码片段的名字叫做 Print to console

这个代码片段对象的值，也就是花括号里的代码，必须要包含 “prefix” 前缀和 “body” 内容这两个属性。

同时，这个值还可以包含 “description” 描述这个属性，但这个属性不是必须的。

“prefix” 的作用是，当我们在编辑器里打出跟 “prefix” 一样的字符时，我们就能在建议列表里看到这个代码片段的选项，然后我们按下 Tab 键，就能够将这个代码片段的 “body” 里面的内容插入到编辑器里。如果这个代码片段有 “description” 这个属性的话，那么我们还能够在建议列表的快速查看窗口里看到这段 “description”。

Print to console: {

prefix: log, body: [ ($1);, $2 ], description: Log output to console } }

此时，我们可以打开一个 JavaScript 文件（还以之前的一段代码为例），然后输入 log，你就能够在建议列表里看到 Print to console 这个建议。然后再按下回车或者 Tab 键，就能够将这个代码片段插入编辑器了。

设置颜色主题

（1）打开编辑器

windows/linux：file—>perferences----> color theme

macOS：code —>perferences----> color theme

（2）使用方向键上下移动，选择不同的主题预览

（3）选择一个颜色主题，按下enter键，马上生效

设置文件图标主题

（1）打开编辑器

windows/linux：file—>perferences----> File Icon theme

macOS：code —>perferences---->File Icon theme

（2）使用方向键上下移动，选择不同的主题预览

（3）选择一个颜色主题，按下enter键，马上生效

None：禁用文件图标

首先需要说明的是，VS Code 的各个功能，都是基于当前打开的文件或者文件夹的。该怎么去理解这个概念呢？

如果你使用过 IDE 的话， 你应该记得在第一次打开 IDE 的时候，它们往往需要你创建一个工程，这个工程会生成一个特殊的工程文件。这个工程文件记载了这个项目有哪些相关的文件、项目的配置、构建脚本等等。这个文件记录着 IDE 管理工程的元信息，开发团队也能够通过共享这个工程文件保证成员工作环境的一致性。但是工程文件对用户体验就不太友好了，比如说项目文件可能对 IDE 的版本有所要求，项目文件损坏了 IDE 读取不了但是我们也不知道如何修复，等等。

VS Code 则选择了一种相对轻量，而且大家都易于理解的方式，那就是所有的操作都基于文件和文件夹。当你打开一个文件夹，VS Code 的核心功能就会对这个文件夹进行分析，并提供对应的功能。比如，在打开的文件夹下检测到有 文件，就加载 Git 插件来提供版本管理的功能；或者发现文件夹下有 ，就会激活 TypeScript 插件提供语言服务。

当你打开一个文件夹之后，你就能在工作台的最左侧看到资源管理器。资源管理器将当前文件夹下的文件和子文件夹，以树形结构的形式呈现出来。每一个文件的前面还会有一个小图标，用于反映文件的类型。

在资源管理器的最上方，你可以看到一个列表，叫做 “打开的编辑器”。这个很好理解，就是指这里面列出的都是当前已经被打开的文件。

适合前端开发人员的vscode扩展插件有哪些？

1，HTML snippets(Visual Studio Code HTML snippets)这是一款前端开发者必备的扩展，它能将你从手动键入每个标签中解放出来。 只需输入 div 然后按下回车，一对标签就出现了。 更厉害的是，对于需要嵌套的标签，你可以直接用 ul>li>a 的格式表示，按下回车后就能看到你需要的嵌套。 还有一点，这个扩展已经包括所有的 HMTL5 片段。 2，JavaScript (ES6) code snippets几乎每个前端程序员都是 JavaScript 的使用者，为了提高编写 JS 代码的效率，这个扩展很有用，并且它还支持 , 和 文件。 扩展中有很多快捷缩写，比如想要调用 export default class ClassName{}，输入 ecl 按下空格即可。 3，CSS Peek既然已经分别介绍了 HTML 和 JS 的助手，我们也不能落下 CSS。 CSS Peek 是一个支持 和 文件的扩展，它能帮助开发者快速找到和查看选定类或 id 所用的样式。 对于那些不喜欢来回切换文件或者分屏的开发者来说这个扩展很有用。 4，Angular/React/Vue既然提到了代码片段，我们最好也提一下每个框架下的不同扩展。 对 AngularJS 来说，Angular Snippets(Version 8)是针对 AngularJS 8 的一款扩展，它为我们提供 Typescript 和 HTML 的代码片段。 对于 框架，ES7 React/Redux/GraphQL/React-Native snippets 是一个优秀的扩展，它使用 ES7 提供 React 和 Redux 的代码片段，用法和 Javascript snippets 类似，都是按空格键。 对 开发，有一个叫 Vetur 的扩展相当棒，它目前的下载量已经有将近2,000万。 Vetur 的功能很强大，包括代码片段，Emmet，错误检查，格式化，调试和高亮语法等。 5，ESLint如果你想要写出友好，易读，干净的代码，我建议你在 VSC 中安装一个 ESLint 扩展，它会帮助你持续养成好的编码习惯，比如缩进等。 6，Prettier 代码格式工具说到漂亮整洁的代码，Prettier 听名字你就值得拥有。 尤其在项目需要你和其他同事合作完成时，Prettier 会强势地将代码格式全部统一，让你再也不用和同事讨论自己的代码。 7，GitLensVSC 是整合了 git 功能的，通过安装 GitLens 这个功能将会更强大，它能让你看到每一行代码是由谁在什么时候写的，并且快速查看代码提交详情，在团队协作中这个扩展很有用。 8，Auto import 自动导入包Auto import 是一个自动导入包扩展。 如果目前手头的项目是基于不同组件的，那么你需要做的就是给每个组件命名，剩下的事交给 Auto import 就好。 9，Path autocomplete 路径自动补全提到了导入的问题，另一个重要的扩展就是能够智能补全导入文件路径的 Path autocomplete。 使用时，输入 ./ 后你就会看到一个包含所有文件名的下拉菜单。 当文件目录繁杂时，这个扩展真的是很好用，它为你省去了很多一层一层刨开目录的痛苦。 10，Bracket Pair Colorizer 括号着色器括号着色器能让我们一眼看出当前代码块的反括号在哪里。 有时候在稍微复杂的函数中，找到正确的那对代码并不是那么容易，但 Bracket Pair Colorizer 在你键入一个括号时就为这一对括号分配了自己的颜色，便于阅读。 11，Indenticator 缩进指示器Indenticator 可以高亮显示出当前缩进的深度，深度由线和点表示，同样使代码更整洁，提高代码易读性。 12，Debugger for Chrome 调试器放在最后的是重磅级的调试扩展 Debugger for Chrome。 这个插件能让你在 VSC 里面直接调试 JS 文件，效果和 Chrome 的控制台中差不多，让你不用打开浏览器就直接打断点。 （BY三人行慕课）