如何使用Visual Studio Code提高开发效率

Visual Studio Code is extremely flexible and powerful. By learning the ins and outs, you can greatly improve your speed, efficiency, and process as a developer. In this article, we’ll look at five ways to improve your development work in Visual Studio Code.

Visual Studio Code非常灵活和强大。 通过学习来龙去脉，您可以极大地提高开发人员的速度，效率和流程。 在本文中，我们将研究改善Visual Studio Code开发工作的五种方法。

自定义快捷方式 (Customizing Shortcuts)

As a developer, think about every time you save a file, copy/paste a line of code, open a file, and so on. You do these tasks constantly, and without shortcuts, each of these actions requires grabbing the mouse. Although it may not seem like much, the transition from keyboard to mouse takes time, even if it’s just a few seconds.

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

In Visual Studio Code, you can view and customize shortcuts by going to Code -> Preferences -> Keyboard Shortcuts on a mac and File -> Preferences -> Keyboard Shortcuts on Windows.

在Visual Studio Code中，您可以通过以下方法查看和自定义快捷方式：在Mac上转到“代码” -> “ 首选项” ->“ 键盘快捷方式”，在Windows上转到“ 文件” -> “首选项” ->“ 键盘快捷方式 ”。

You can use Command K + Command S on Mac or Control k + Control S on Windows to access the shortcuts.

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

优化布局 (Optimizing Your Layout)

IDEs (Integrated Development Environments) can often be bulky with a lot of functionality already built in. Visually, with so many features, buttons, menus, and so on, you can often be distracted from what’s most important to you—your code.

IDE(集成开发环境)通常很庞大，已经内置了许多功能。从视觉上看，具有如此多的功能，按钮，菜单等，您常常会分心于最重要的代码。

There are many ways to alter your layout in Visual Studio Code.

有许多方法可以在Visual Studio Code中更改布局。

Note: All of the following can be accessed from either settings or from the command palette with CMD + SHIFT + P.

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

从左向右移动活动栏 (Moving the Activity Bar From Left to Right)

By default, the Activity Bar is on the left. It can be minimized, but when it is opened it pushes your code over to the right.

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

By changing your settings (see Settings section below), you can dock this menu on the right.

通过更改设置(请参阅下面的“设置”部分)，您可以将该菜单停靠在右侧。

This way, when it is opened, it does not push your code over.

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

隐藏活动栏 (Hiding The Activity Bar)

You can take the previous option one step further by hiding the activity bar completely. Open your settings menu and search for Activity Bar: Visible.

通过完全隐藏活动栏，可以使上一个选项更进一步。 打开设置菜单，然后搜索“ Activity Bar: Visible 。

禅宗模式 (Zen Mode)

Zen Mode is the easiest way to get rid of everything else from the screen so you only see your code. Use CMD + K Z on Mac and CTRL + K Z on Windows to toggle Zen mode.

Zen Mode是摆脱屏幕上其他所有内容的最简单方法，因此您只能看到自己的代码。 在Mac上使用CMD + KZ ，在Windows上使用CTRL + KZ来切换Zen模式。

居中布局 (Centered Layout)

One last option is to use Centered Layout which centers your text editor (as is the default with Zen Mode), but does not hide all of the other menus in the UI. With this layout, you don’t have to worry as much about opening the Activity Bar pushing your code over. To toggle Centered Layout, open the command palette (CMD + SHIFT + P or CTRL + SHIFT + P) and type Toggle Centered Layout.

最后一种选择是使用居中布局，该居中布局可使文本编辑器居中(这是Zen Mode的默认设置)，但不会在UI中隐藏所有其他菜单。 使用这种布局，您不必担心打开活动栏将代码推翻。 要切换居中布局，请打开命令面板( CMD + SHIFT + P或CTRL + SHIFT + P )，然后键入Toggle Centered Layout 。

There are other ways to customize your layout that you can spend time exploring.

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

使用进一步的自定义 (Using Further Customizations)

Visual Studio Code is built using Electron.js which allows it to be customized by web developers. We’ve looked at a couple of ways of customizing through shortcuts and layout already, but let’s explore a few more.

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

扩展名 (Extensions)

For extensions or plugins there is an extensions tab where you can search extensions, install them, and view ones you’ve already installed.

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

Here’s a look at some of the extensions I have installed.

这是我安装的一些扩展程序的外观。

If you can’t find an extension that achieves what you’re looking for, you can also create one yourself.

如果找不到能满足您需求的扩展，也可以自己创建一个。

主题 (Themes)

Themes are, in fact, extensions, but they can add some colorization and that will make your code and menus much easier to read. For exmaple, there is Cobalt 2 by Wes Bos.

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

Here’s a few more:

还有一些：

• Night Owl

  夜猫子

• Dracula

  德古拉

• Material Theme

  物质主题

设定值 (Settings)

Settings are also customizable and are saved in a JSON file that Visual Studio Code manages and allows you to customize. Visual Studio Code also provides an interface with dropdown menus, search ability, etc. to be able to change settings. You can open the settings window using CMD + , on Mac or CTRL + , on Windows.

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

设置自动格式化 (Setting Up Auto Formatting)

Developers often spend a lot of time cleaning up their code; checking indentation, wrapping text on new lines, adding semicolons, and so on. This can be even more difficult to implement across a team as each developer might have different opinions.

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

You can set up auto formatting in Visual Studio Code. Here are a few options:

您可以在Visual Studio Code中设置自动格式设置。 以下是一些选择：

更漂亮-代码格式化程序 (Prettier - Code Formatter)

The Prettier - Code Formatter extension can format your JavaScript, TypeScript, and CSS using Prettier.

Prettier-Code Formatter扩展程序可以使用Prettier 格式化 JavaScript，TypeScript和CSS。

ESLint (ESLint)

The ESLint extension allows you to both lint and format your JavaScript code.

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

TSLint (TSLint)

The TSLint Extension allows you to lint and format your TypeScript code.

TSLint扩展使您可以对TypeScript代码进行格式化。

创建和使用代码段 (Creating and Using Snippets)

Every day we write some of the same code over and over again. In Visual Studio Code, you can define snippets to write all of that boilerplate code for you.

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

Code Snippets are based on language and saved in a Json file that Visual Studio Code manages. You can add snippets by going to Code -> Preferences -> User Snippets on Mac or File -> Preferences -> User Snippets on Windows. Then you’ll choose your language. Here’s a snippet for generating a for loop through an array in JavaScript:

代码段基于语言，并保存在Visual Studio Code管理的Json文件中。 您可以通过以下方式添加代码段：在Mac上， 依次转到代码->首 选项->用户代码段，在Windows上， 依次转到文件->首选项->用户代码段 。 然后，您将选择您的语言。 这是for在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"
    }

For more details on creating snippets, check out Creating Code Snippets in Visual Studio Code. If you’re working with React, you’ll also want to check out Write React Faster With Simple React Snippets.

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

结论 (Conclusion)

Visual Studio Code is extremely customizable. By taking advantage of the features and settings, you can increase your development experience as well as your speed and efficiency.

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

翻译自: https://www.digitalocean.com/community/tutorials/how-to-improve-your-development-efficiency-with-visual-studio-code