导读：高效的编码环境可以为开发者们创造一个高效、错误最小化、协作性、教育性、一致性、资源管理性，最终令我们满意的编程环境。

为此，如果你使用 VS Code 等创建此类环境，那定是明智之举。花时间尽最大努力定制 VS Code 的开发人员将始终能够制作开发出优秀的软件。

本文内容大纲如下：

• 自定义界面

• 提高生产力的扩展

• 掌握快捷键和按键绑定

• 利用代码片段提高代码效率

• 集成版本控制

• 利用 IntelliSense 和代码导航

• 高效的调试技术

自定义界面

VS Code 的工作区在个人个性化调整方面提供了很大的灵活性。如果能很好地利用其布局选项，人们将拥有一个既能最大程度提高工作效率又能最大程度减少视觉干扰的编码环境。

使用 VS Code，您可以通过将编辑器划分为不同的部分来同时处理多个文档。

要将编辑器划分不同的区，可以按照以下步骤操作：

要拆分编辑器，请点击编辑器选项卡右上角的“拆分编辑器按钮”。此图标是一个垂直分成两半的正方形，即两个并排放置的矩形。现有的编辑器将分成两个垂直部分。

使用键盘快捷键，按 Ctrl +（macOS 为 Cmd +）。要将编辑器移动到另一个位置，请按 Ctrl + K，然后按其中一个箭头键（左、右、上、下）。

要在区域之间导航，请单击感兴趣的窗口，或将焦点放在想去的区域。使用Ctrl + 1，Ctrl + 2以从一个区域跳转到另一个区域（按照从左到右的拆分窗格顺序）。您可以在任何现有区域中重复拆分过程以创建更多的区域。

看起来简单，它在比较、调试或检查代码是否有更改的情况下，非常有用。

还可以通过“禅模式”摆脱干扰，专心于代码编写。禅模式是一种全屏模式，隐藏活动栏、侧边栏和面板，以便用户只专注于编码您可以在 Windows 上按下Ctrl+K+Z键盘上的 来激活此功能，Cmd+K+Z在 MacOS 上按下 Esc 键两次来退出。单击“视图”>“外观”>“禅模式菜单”可切换禅模式。

主题与图标

关于编码的主题和图标包 ，VS Code 有大量主题和文件资源库，可以使用它们来自定义工作区。

选择视觉上友好且可提高代码可读性的配色方案。长时间编码会使眼睛疲劳；尝试深色背景主题。组合按键：Windows 的 Cmd + K Cmd + T和macOS 上Ctrl + K Ctrl + T激活此功能。

另外，总是黑曜石式的代码记录过程，这种视觉是否让你的文件组织变得无聊？很多图标包都提供了独特的图标，个性化的选择它们，对于在 dock 区中识别文件是非常有用的。

使用更好的布局选项、主题和图标，我们可以有效地使用此帮助工具，作为日常编码体验的全新且酷炫的环境。

提高生产力的扩展

扩展在改变 VS Code 方面发挥着至关重要的作用，使它成为一个有竞争力且适合高效开发的平台。

其实只需选择和管理（或删除）扩展的混乱流程，你就可以获得巨大的生产力优势。

无论开发需求是什么，VS Code 扩展几乎可以满足你的所有需求。我们可能需要的一些主要附加组件包括如下，展示：

Prettier

Prettier是一款严格的代码格式化程序，可确保在您的代码库中保持一致的样式。

例如，它确保用于缩进的制表符和空格没有区别，它统一了单引号和双引号的用法，自动换行以避免代码阅读困难，并且可以选择性地插入或删除分号。

Prettier 负责格式化，因此，您可以花更多时间编写代码，然后花更少的时间维护清晰的语法。

要在 Visual Studio Code (VS Code) 中使用 Prettier 进行文档格式化，先打开 VS Code 设置 ( Ctrl + ,)。搜索“默认格式化程序”并将“Prettier - 代码格式化程序”设置为默认值。要手动格式化，请在编辑器内单击鼠标右键，选择“格式化文档”，或使用快捷方式Shift + Alt + F。

ESLint

ESlint ，是JavaScript 代码的 linter。

它会检查您的代码是否存在语法错误、可能的逻辑错误，并识别出有麻烦的设计模式，将草稿代码与指南进行比较以确保一致性，并且可以设置自己的代码规范或开源社区共享预设的规则来自动纠正代码样式中的一些违规行为。

比如，如果你弄乱了缩进，或者试图无缘无故地调用一个缺失的函数，而不是使用let和var，那么 ESLint 会通过理解你在开发过程中出现的问题，来警告你这种行为。

在开发过程中，ESLint 可以提前帮助你发现问题，从而编写出更好更可靠的代码。使用 ESLint 编写的代码通常没有错误，而且更容易理解。学习如何以最佳方式使用此工具是必要的。

Live Server

Live Server是一款简单的开发工具，适合那些想要直接在浏览器上查看内容更改的用户。这表示，如果您更改代码并保存，浏览器将使用这些更新自动刷新。更改会立即反映出来，而无需在Web开发过程中手动刷新浏览器，从而避免手动刷新。

Live Server 通过提供项目的实时预览，将使您的开发工作变得愉快。

要通过 Visual Studio Code 的 Live Server 预览 HTML 网页文件，首先从顶部菜单栏中选择“文件”>“打开文件夹”，转到存储 HTML 文件的文件夹。或者单击“Start Live”按钮，该按钮通常位于状态栏的右下角。

然后，你的浏览器将启动并显示你的 HTML 文件。您对 HTML（或相关 CSS 和 JS）所做的任何修改都将立即反映在浏览器中。

Prettier、ESLint 和 Live Server 可以结合起来，以高速高效地开发代码，保证代码质量和一致性。

管理扩展

妥善处理扩展对于维持快速的开发环境也是至关重要的事。要保持扩展程序集简洁：仅安装您需要的扩展程序。暂时禁用不需要的、未使用的扩展程序以提高编辑器性能。还有可以更新一些扩展程序，以享受新功能和补丁程序以及潜在的安全改进。遇到问题时，请禁用冲突的扩展程序，可以通过这种方式查找到原因。

如果选择好正确的 VS Code 扩展并很舒服地使用着它们，可以创建一个最适合自己的个性化、高效的开发空间。

掌握快捷键和按键绑定

快速打字是高效程序员的秘密工具。一旦你理解了这些类型的东西并在编程中使用它们，你可能会发现自己做事比以前快得多，而不需要经常用鼠标来回移动。

考虑到这一点，以下是一些关键的 VS Code 键盘组合，它们应该是你的第一组命令：

• Ctrl+P：打开命令面板。

• Ctrl+Tab：在打开的编辑器之间切换。

• Ctrl+Shift+N：打开一个新文件。

• Ctrl+W：关闭活动编辑器。

• Ctrl+F：在当前文档中查找文本。

• Ctrl+H：替换当前文档中的文本。

• Ctrl+X：剪切选定的文本。

• Ctrl+C：复制选定的文本。

• Ctrl+V：粘贴复制的文本。

• Ctrl+Z：撤消。

• Ctrl+Y：重做。

大家记住，这里只列出了几个示例。VS Code 包含许多快捷方式，您还可以根据自己的喜好进行修改。

自定义键绑定

VS Code 允许您为经常使用的操作创建特殊的自定义按键。这意味着可以用更加良好的方式启动任务处理。

如果希望创建个性化的按键绑定，请打开命令面板Ctrl + Shift + P。然后，输入单词。不要忘记选择“打开键盘快捷键”选项并查找要更改的命令。之后只需单击所需的键即可。

可以通过使用VSCodeVim等附加组件来改善您的键绑定环境，该附加组件为 VS Code 平台提供了Vim 键盘快捷键。

当使用键盘快捷键并个性化按键绑定时，编码会比以前更快、更加高效。

利用代码片段提高编码效率

预先编写的代码模板可以大大加快编码进程。代码片段还可以协助完成其他重复性任务，让您只关注代码中的主要逻辑。预安装的代码片段 VS Code 支持为多种编程语言编写的代码片段。这些代码片段具有标准的代码框架。

这样，它们可以为我们节省大量时间和精力。

要访问内置代码片段，先输入与所需代码片段相关的关键字。根据您的输入，VS Code 将提供可用选项的建议。选择所需的代码片段，然后按回车或 Tab 将其添加到您的代码中。比如，在窗口中键入!并按 Tab 会产生 HTML 的基本结构。

创建自定义代码片段

要为经常使用的代码模式创建个性化代码片段，首先访问代码片段设置。转到“文件”>“首选项”>“用户代码片段”或按下Ctrl + Shift + P并输入“首选项：配置用户代码片段”。选择您的首选语言或通过单击所有语言的“新全局代码片段文件”来创建新的代码片段文件。

在 JSON 文件中添加新的代码片段定义。以下是 HTML 代码片段的示例：

{  "Print to console": {    "prefix": "myform",    "body": [      "",      "
",      "",      "
",      "
",      "",      "
",      "
",      "",      "
",      "
",      "",      "
",      "Submit",      "" ],    "description": "creates a google form" }}

• prefix：片段的触发词。

• body：要插入的代码行。使用$1、$2等作为占位符。

• description：该代码片段功能的简要描述。

然后保存代码片段文件。您的自定义代码片段将在 IntelliSense 中可用，和内置代码片段一样好用。

可以通过将 JSON 文件复制到共享位置或存储库来与团队好友共享代码片段文件。队友可以通过将 JSON 文件放入自己的代码片段目录（通常位于 VS Code 用户设置目录中）来导入共享的代码块。

集成版本控制

如果没有版本控制，管理代码修改、与他人协作以及恢复到以前的状态都是非常费劲，甚至是不可能的。

VS Code 支持Git，您的项目将得到有效管理，不会出现任何问题。

要在 VS Code 中使用 Git，请先检查您的设备上是否已安装Git 。之后，运行下载的安装程序并按照安装提示进行操作。对于大多数用户来说，默认设置就足够了。打开终端或命令提示符。输入git --version并按回车。我们应该会看到已安装的 Git 版本，确认 Git 安装正确。

启动 VS Code，然后转到“查看”>“终端”打开集成终端。在终端中，输入以下命令来设置您的 Git 用户名与电子邮件：

git config --global user.name "Your Name" git config --global user.email "your.email@example.com"

点击活动栏中的源代码控制图标或按Ctrl + Shift + G进入源代码控制视图。如果您已在 VS Code 中打开项目文件夹，“源代码控制视图”还包含一个用于初始化存储库的选项，可用于在活动项目文件夹中创建新的 Git 存储库。

要克隆已设置的存储库，请点击“查看”，然后点击“命令面板”（或按Ctrl + Shift + P），您将能够获得一个。Git: Clone应该是您输入的短语，后跟从显示的可能性中选择的短语。您需要输入存储库的 URL 并指定要将其保存在哪个目录中。将您现在保存在GitHub、GitLab或Bitbucket等网站内的异地存储库与您的本地存储库关联。

按照这些步骤，您应该已经在 Visual Studio Code 中安装并配置了 Git，可以管理自己的源代码和版本控制工作流程。

有用的 Git 扩展

虽然 VS Code 的内置 Git 集成非常强大，但其他扩展可以增强你的版本控制体验：

GitLens：GitLens增强了 VS Code 中的 Git 功能，提供代码作者信息、提交比较、责任注释和文件历史记录等功能。

Git Graph：Git Graph提供 Git 历史记录的图形视图，让您轻松了解复杂的拆分和组合事件。Git 的正常运行以及这些插件将确保软件开发、团队合作能力和库安全所涉及的所有流程的快速流动。

利用 IntelliSense 与代码导航

VS Code 是集成了intelliSense 工具，用以实现有效代码完成的现代 IDE 和代码编辑器之一。它提供了多种功能，可增强用户处理代码时的体验、提高生产力水平并最大限度地减少错误。

在你在键入时，IntelliSense 会在代码的任何位置为您提供一些关于变量、函数、类类型、模块库等名称的建议。IntelliSense 会根据您当前工作的范围（方法、类或模块）缩短列表。

IntelliSense 以该格式显示有关不同类型参数的信息。它在您开始编写函数名称并打开其括号后会立即出现。

当光标放在符号（变量、函数、类或任何其他类似实体）上时，会出现一个详细的工具提示，其中包含不同的详细信息，如文档注释、类型信息，还有定义的位置等。

在使用 IntelliSense 编码时，语法错误、类型不匹配和其他问题都会实时突出显示，从而可以在编程过程中帮助我们纠正错误。

从上面图片中可以看出，错误消息表明您的 JavaScript 代码中检测到了语法错误。解析器未找到其预期的右花括号}，这表明其他地方缺少或多出了花括号。

高效的代码导航

高效的代码导航对于维护和理解大型代码库至关重要。以下便是在 VS Code 中高效导航代码的一些关键技术和工具：

• 转到定义：右键单击符号（变量、函数、类等），然后选择“转到定义”可直接导航到其定义的位置。我们将能够迅速掌握实现的细节。

• 查找所有引用：右键单击符号并选择“查找所有引用”以查看代码中使用该符号的所有位置。在某些情况下，了解更改和重组的影响非常有用。

• 符号搜索：使用快捷键Ctrl+P（Cmd+P在 macOS 上为 或）并键入@符号名称，可快速搜索并导航到当前文件中的函数、类或变量。使用Ctrl+Shift+F（Cmd+Shift+F在 macOS 上为 或）可在整个工作区中搜索符号。这对于在多个文件中查找某个符号的出现位置非常有用。

• 大纲视图：大纲视图提供当前文件中符号的树状视图，让您可以快速导航到文件的不同部分。当您处理包含多个功能/类的大量文本时，它会非常有帮助。

• 预览定义：使用“预览定义”（Alt+F12或Option+F12在 macOS 上）在不离开当前上下文的情况下查看带有符号定义的小窗口。这样您就可以阅读和理解定义，而不会丢失代码中的位置。

借助 IntelliSense 和工具，我们可以更快地浏览代码，从而提高工作效率和编码标准。代码完成、光标悬停时显示的参数信息以及快速信息，这些就是 IntelliSense 可以帮助您减少失误的功能。

高效的代码导航技术，例如转到定义、查找所有引用、符号搜索和大纲视图，可帮助您快速理解和维护大型代码库。

高效的调试技术

开发过程中包括非常关键的调试。

使用 VS Code 作为调试工具有一些特别的优势。此外，VS Code 有一个与不同编程语言兼容的集成调试器。

设置断点

在许多集成开发环境 (IDE)中，包括 VS Code、PyCharm和Eclipse，您可以通过点击要停止执行的行号旁边的空白处来设置断点，以检查变量和程序状态。或者，您可以将光标放在该行上，然后按F9切换断点。

启动调试器

要打开“运行”和“调试”视图，请单击活动栏上显示的“调试”图标或按Ctrl + Shift + D组合键。要开始调试，请单击Run按钮或按F5。如果您已经做好了配置，它将相应地启动；但是如果没有，您可能需要创建启动配置。

在断点处，执行可被暂停；当您将光标放在变量上时，您将看到它们的当前值。

调试面板中的变量部分显示当前范围内所有变量的值与它们的类型。

例如：

function add(a, b) {  let result = a + b; // 在此设置断点  return result;}
console.log(add(2, 3));

• 在某行上设置一个断点：let result = a + b;。

• 当启动调试器时，执行将在指定的断点处停止。

• 这使得您能够在返回result变量之前检查a和b的值。

• 在断点处暂停时，您可以将鼠标悬停在a、b和 result上可以查看它们的当前值。

• a、b和 result的值可以在调试面板的变量部分找到。

使用这个功能，我们可以确保该函数准确运行。

使用调用堆栈

调用堆栈揭示了将您带到特定执行点的函数调用链。

它允许我们跟踪执行的路径，并查看自己最终是如何到达这个特定位置的。通过调用堆栈窗口内的各种框架（函数），我们可以四处移动以检查每个级别的情况。这在对递归函数或深度嵌套调用进行故障排除时非常有用。

例如：

function greet() {  console.log("Hello, world!");  sayGoodbye();}
function sayGoodbye() {  console.log("Goodbye, world!");  saySomethingElse();}
function saySomethingElse() {  console.log("Something else!");}
greet();

当调试器到达断点或逐步移动代码时，函数调用的序列将显示在“调用堆栈”面板中。

启动的程序从空的调用堆栈开始。调用堆栈greet()在调用时接收函数及其变量上下文。因此，greet此时是此调用堆栈中的唯一帧。

首先console.log("Hello, world!")执行，然后sayGoodbye()执行下一个。sayGoodbye ()函数的上下文位于调用堆栈的顶部。现在可以在调用堆栈上找到两个框架：greet和sayGoodbye。

因此，当console.log("Goodbye, world!")执行时，这意味着它正在调用saySomethingElse。然后，函数的执行上下文saySomethingElse()被推送到调用堆栈的顶部。此时的调用堆栈包含三个框架；greet、sayGoodbye和saySomethingElse。

console.log("Something else!")执行。由于没有调用其他函数，saySomethingElse()因此返回，导致调用上下文从堆栈中删除。目前，调用堆栈中仍保留两个框架：greet和sayGoodbye。

momentsaySomethingElse()结束执行，sayGoodbye()也结束并返回，从堆栈中删除其上下文。当前，调用堆栈中只有一个元素：greet。

最后，greet()完成并返回，再次留下空的调用堆栈。

使用监视器窗口

监视器窗口允许您跟踪特定变量或表达式。在调试代码时，您可以将任何变量添加到此窗口，它们的值将相应更改。

例如：

function add(a, b) {  let result = a + b; //Set breakpoint here  return result;}
console.log(add(2, 3));

• 将a、b和result添加到“监视”窗口。

• 当您运行调试器并且执行停止（例如，在断点处或在单步执行过程中）时，监视窗口将显示a、b和的当前值result（在本例中）。

• 这有助于表明正确计算为ab和result的总和。

在这里，您可以观察参与执行流程的变量的动态变化或评估复杂表达式的结果。

调试扩展

使用调试器插件可以提高开发环境中调试功能的使用率。目前，最流行的调试插件是 JavaScript 调试器，它最受 Web 开发人员的青睐。

通过此扩展来增强您的编码能力，调试 JavaScript 的效果会加倍，并且在调试客户端和基于服务器的代码时也不会那么困难。

VS Code 的调试工具和 JavaScript 调试器是前端程序员的绝佳组合。您可以使用 Node.js 或浏览器（例如 Chrome）调试 JavaScript。

Node.js 的配置：单击 打开命令面板Ctrl + Shift + P。输入“Debug: Open Configurations”并选择它。如果不存在launch.json文件，VS Code 将提示您创建一个。选择“Node.js”作为环境。在位于 VS code 目录中的 launch.json 文件中包括以下设置：

{  "version": "0.2.0",  "configurations": [ {      "type": "node",      "request": "launch",      "name": "Launch Program",      "program": "${workspaceFolder}/app.js" } ]}

• type：指定这是一个 Node.js 配置。

• request：launch 表示您正在启动 Node.js 应用程序。

• program：指向你的 Node.js 应用程序的主脚本文件。

• 运行调试面板（Ctrl + Shift + D）。

• 下拉菜单用于选择您的配置，然后按绿色播放按钮或F5键开始调试。

在调试时使用以下快捷方式逐步执行代码：

• F10：跳到下一行代码。

• F11：进入函数调用。

• Shift+F11：退出当前函数。

通过执行这些有效的调试方法，我们将减少花费在项目上的时间，并提高识别和修复编程任务中错误的效率。熟练使用标准调试器选项或利用 JavaScript 调试器等强大的附加组件，这将使您成为一名高效多产的优秀程序员。

结论

如果您希望编程体验更好、更高效，请结合本文概述的技巧有效使用 Visual Studio Code。包括界面自定义、快捷方式掌握、扩展使用和版本控制集成等策略有助于优化您的开发过程。

根据您的愿望和项目规格，尝试不同的配置以最大程度地提高 VS Code 的效率。定期检查是否有新的扩展、快捷方式和个性化功能，可以有效改善您的开发设置。

通过组织您的 VS Code 环境，您将提高工作效率并更加信任更多功能。

作者：场长