如何使用VisualStudioCode提高开发效率

Visual Studio Code 非常灵活和强大。通过了解来龙去脉，您可以大大提高您作为开发人员的速度、效率和流程。在本文中，我们将介绍在 Visual Studio Code 中改进开发工作的五种方法。

自定义快捷方式

作为开发人员，每次保存文件、复制/粘贴代码行、打开文件等时都要考虑一下。您不断地执行这些任务，并且没有快捷方式，这些操作中的每一个都需要抓住鼠标。虽然看起来可能不多，但从键盘到鼠标的转换需要时间，即使只有几秒钟。

在 Visual Studio Code 中，您可以通过在 mac 上转到 Code -> Preferences -> Keyboard Shortcuts 和 File 来查看和自定义快捷键] -> Preferences -> Keyboard Shortcuts 在 Windows 上。

您可以在 Mac 上使用 Command K + Command S 或在 Windows 上使用 Control k + Control S 来访问快捷方式。

优化布局

IDE（集成开发环境）通常体积庞大，内置了许多功能。从视觉上看，有如此多的功能、按钮、菜单等，您经常会分心于对您来说最重要的东西——您的代码。

在 Visual Studio Code 中有很多方法可以改变你的布局。

注意：可以从设置或从命令面板和CMD + SHIFT + P访问以下所有内容。

从左到右移动活动栏

默认情况下，活动栏位于左侧。它可以最小化，但是当它打开时，它会将您的代码推到右侧。

通过更改设置（请参阅下面的设置部分），您可以将此菜单停靠在右侧。

这样，当它打开时，它不会将您的代码推送过来。

隐藏活动栏

您可以通过完全隐藏活动栏来进一步采用上一个选项。打开设置菜单并搜索 Activity Bar: Visible。

禅模式

Zen 模式是从屏幕上删除所有其他内容的最简单方法，因此您只能看到您的代码。在 Mac 上使用 CMD + K Z 和在 Windows 上使用 CTRL + K Z 来切换 Zen 模式。

居中布局

最后一个选项是使用居中布局，它使您的文本编辑器居中（这是 Zen 模式的默认设置），但不会隐藏 UI 中的所有其他菜单。使用这种布局，您不必担心打开 Activity Bar 会推送您的代码。要切换居中布局，请打开命令面板（CMD + SHIFT + P 或 CTRL + SHIFT + P）并输入 Toggle Centered Layout。

还有其他方法可以自定义您的布局，您可以花时间探索。

使用进一步的自定义

Visual Studio Code 是使用 Electron.js 构建的，它允许 Web 开发人员对其进行自定义。我们已经研究了几种通过快捷方式和布局进行自定义的方法，但让我们再探索一些。

扩展

对于扩展程序或插件，有一个扩展程序选项卡，您可以在其中搜索扩展程序、安装它们并查看已安装的扩展程序。

下面是我安装的一些扩展。

如果您找不到可以实现所需功能的扩展，您也可以自己创建一个。

主题

主题实际上是扩展，但它们可以添加一些颜色，这将使您的代码和菜单更易于阅读。例如，有 Wes Bos 的 Cobalt 2。

这里还有一些：

设置

设置也是可自定义的，并保存在 Visual Studio Code 管理并允许您自定义的 JSON 文件中。 Visual Studio Code 还提供了一个带有下拉菜单、搜索功能等的界面。能够更改设置。您可以在 Mac 上使用 CMD + , 或在 Windows 上使用 CTRL + , 打开设置窗口。

设置自动格式化

开发人员经常花费大量时间清理他们的代码；检查缩进，换行换行，添加分号等等。由于每个开发人员可能有不同的意见，因此在整个团队中实施这可能会更加困难。

您可以在 Visual Studio Code 中设置自动格式化。这里有几个选项：

Prettier - 代码格式化程序

Prettier - 代码格式化程序扩展可以使用 Prettier 格式化您的 JavaScript、TypeScript 和 CSS。

ESLint

ESLint 扩展允许您对 JavaScript 代码进行 lint 和格式化。

TSLint

TSLint Extension 允许您对 TypeScript 代码进行 lint 和格式化。

创建和使用片段

每天我们一遍又一遍地编写一些相同的代码。在 Visual Studio Code 中，您可以定义片段来为您编写所有样板代码。

代码片段基于语言并保存在 Visual Studio Code 管理的 Json 文件中。您可以通过在 Mac 上转到 Code -> Preferences -> User Snippets 或在 Windows 上转到 File -> Preferences -> User Snippets 来添加片段。然后，您将选择您的语言。这是在 JavaScript 中通过数组生成 for 循环的片段：

"For Loop for Array": {
        "prefix":"forarr",
        "body": [
             "for (let $index = 0; $index < $array.length; $index++) {",
             "\tconst element = $array[$index];",
             "\t",
             "}"
        ],
        "description":"This will create a for loop through an array"
    }

有关创建代码片段的更多详细信息，请查看在 Visual Studio Code 中创建代码片段。如果您正在使用 React，您还需要查看使用简单的 React Snippets 更快地编写 React。

结论

Visual Studio Code 是高度可定制的。通过利用这些功能和设置，您可以提高开发体验以及速度和效率。