充分利用Visual Studio代码

Over the past four years, I have been using Visual Studio Code (also known as VScode) as my primary text editor for coding.

在过去的四年中，我一直使用Visual Studio Code(也称为VScode)作为我的主要文本编辑器来进行编码。

The reason that Visual Studio Code appealed to me was it combined the strengths of both Sublime Text and IntelliJ IDEA which I had used previously. It was as lightweight as Sublime Text with the debugging capability of IntelliJ.

Visual Studio Code之所以吸引我，是因为它结合了我之前使用的Sublime Text和IntelliJ IDEA的优势。 它具有IntelliJ的调试功能，与Sublime Text一样轻巧。

Over these past four years, I have spent a lot of time tweaking my setup for Visual Studio Code so I thought I would share what I have learnt in this post.

在过去的四年中，我花了很多时间来调整我的Visual Studio Code设置，所以我想我会分享我在这篇文章中学到的知识。

更改默认字体 (Change the default font)

The first thing I want to talk about is changing the default font. The default font for Visual Studio Code is “Monaco”, which is a monospaced font (this means all the letters ocupy the same horizontal width) that is reasonably clear to read and looks as below.

我要谈的第一件事是更改默认字体。 Visual Studio Code的默认字体是“ Monaco”，这是一种等距字体(这意味着所有字母都具有相同的水平宽度)，并且阅读起来相当清晰，如下所示。

The problem with “Monaco” is that it lacks ligatures, ligatures are where 2 or more characters next to one another render as a single glyph. As a developer ligatures can help the legibility of code when you are reading it quickly. If you compare the prior example to below, you can see that by using the “Jetbrains Mono” font my arrow function “=>” is rendered as a single glyph as is the “===” and “!==” which once you have adapted to it is far quicker to read.

“摩纳哥”的问题在于它缺少连字，连字是指两个或两个以上字符彼此相邻的单个字形。 作为开发人员，连字有助于快速阅读代码。 如果将下面的示例与下面的示例进行比较，可以看到，通过使用“ Jetbrains Mono”字体，我的箭头函数“ =>”与“ ===”和“！==”一样显示为单个字形。您已经适应了它，阅读起来要快得多。

To change the font in Visual Studio Code firstly you will need to download a font and install it on your system, the font I am using is “JetBrains Mono” which can be found at https://www.jetbrains.com/lp/mono/, if you are on a Mac you can download the files, open the ttf folder and simply double click on each of the .ttf files.

要首先在Visual Studio Code中更改字体，您需要下载一种字体并将其安装在系统上，我使用的字体是“ JetBrains Mono”，可以在https://www.jetbrains.com/lp/上找到。 mono / ，如果您使用的是Mac，则可以下载文件，打开ttf文件夹，然后双击每个.ttf文件。

To configure in Visual Studio Code, open settings and then search for “font family”. Then type the name of the font, in my case “Jetbrains Mono” and save the settings. Now you can go to a code file and check that the font is rendering correctly.

要在Visual Studio Code中进行配置，请打开设置，然后搜索“字体系列”。 然后输入字体名称(在我的情况下为“ Jetbrains Mono”)并保存设置。 现在，您可以转到代码文件，并检查字体是否正确呈现。

Beside the mentioned Jetbrains Mono font, another font I have used in the past is FiraCode which provides their own instructions on how to install here https://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions.

除了提到的Jetbrains Mono字体外，我过去使用的另一种字体是FiraCode，它提供了有关如何在此处安装的说明， https://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions 。

安装主题 (Install a theme)

While the default theme of Visual Studio Code isn’t terrible, you will likely want to install a custom theme to personalise the text editor to how you like it. There are both free and paid-for themes available, and if you search “Theme” in the extensions tab, you should be able to find one you like. That said I thought to get you started I would show a few that I like.

虽然Visual Studio Code的默认主题并不可怕，但您可能希望安装自定义主题，以使文本编辑器个性化为您喜欢的样式。 提供免费和付费主题，如果您在扩展标签中搜索“主题”，则应该可以找到自己喜欢的主题。 就是说，我想让您入门，我会展示一些我喜欢的东西。

Kawaii Theme

可爱主题

Monokai

物界

Monokai Pro

Monokai Pro

My current theme is “Monokai Pro” which I chose as I really liked the way it balanced the colours of the editor. It is worth noting that this is a premium theme that cost me $9.95 however I was happy to support the developer behind it.

我目前的主题是“ Monokai Pro”，因为我非常喜欢它平衡编辑器色彩的方式，所以选择了它。 值得注意的是，这是一个高级主题，花费了我9.95美元，但我很乐意为背后的开发人员提供支持。

安装一些扩展 (Installing some extensions)

Setting up Visual Studio Code wouldn’t be complete without installing some extensions.

如果不安装某些扩展程序，将无法完成Visual Studio Code的设置。

One of the cool features of Visual Studio Code is that it will automatically recommend extensions related to the different file types you open with it. An example is that if you open a YAML file, it will helpfully recommend a suitable plugin for formatting YAML.

Visual Studio Code的很酷的功能之一是，它将自动推荐与您使用它打开的不同文件类型相关的扩展名。 一个示例是，如果您打开一个YAML文件，它将有助于推荐一个合适的插件来格式化YAML。

With this in mind, I will avoid mentioning any of the obvious extensions but instead focus on plugins that add a considerable amount of value, but you might not have heard of yet.

考虑到这一点，我将避免提及任何明显的扩展，而将注意力集中在能够带来可观价值的插件上，但是您可能还没有听说过。

设置同步 (Settings Sync)

If you are going to be spending time getting your text editor setup correctly you don’t want to have to do it again for every computer you use. This is where Setting sync is super useful, it will allow you to sync all your settings across the computers you use so your text editor setup is the same regardless of which computer you use.

如果您要花费时间正确设置文本编辑器，则不必为使用的每台计算机都重新设置。 这是“设置同步”超级有用的地方，它将允许您在使用的计算机之间同步所有设置，因此无论使用哪种计算机，文本编辑器的设置都相同。

Marketplace: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-syncGithub: https://github.com/shanalikhan/code-settings-sync

市场： https: //marketplace.visualstudio.com/items ? itemName = Shan.code-settings-sync Github： https : //github.com/shanalikhan/code-settings-sync

实时分享 (Live Share)

The Live Share extension allows you to share your text editor with anyone in the world remotely. Think about it like Google Docs for software engineering, where any of the participants can contribute to the code being written.

Live Share扩展允许您与世界上的任何人远程共享文本编辑器。 可以像软件工程的Google文档那样思考它，任何参与者都可以为编写的代码做出贡献。

In the current pandemic this has been invaluable to my team as it has allowed us to move our in person pairing online.

在当前的大流行中，这对我的团队而言是无价的，因为它使我们能够在线进行面对面的配对。

Beyond simply sharing the code, “Live Share” also has the ability to share the built in terminal and a server that is running locally. Note that giving access to the terminal is optional and is only advised when sharing with someone that you trust as they have the ability to do whatever they want on your computer.

除了简单地共享代码外，“实时共享”还具有共享内置终端和本地运行的服务器的功能。 请注意 ，授予对终端的访问权限是可选的，仅当与您信任的人共享时才被建议使用，因为他们有能力在计算机上做任何想做的事情。

Marketplace: https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-packGithub: https://github.com/MicrosoftDocs/live-share

市场： https: //marketplace.visualstudio.com/items ? itemName = MS-vsliveshare.vsliveshare-pack Github： https : //github.com/MicrosoftDocs/live-share

快速打字 (Quicktype)

If you use TypeScript then Quicktype is a great plugin for speeding up the process of writing your interfaces. You can simply provide a JSON input file and Quicktype will generate the interfaces for you.

如果您使用TypeScript，则Quicktype是一个很棒的插件，可以加快编写接口的过程。 您只需提供一个JSON输入文件，Quicktype就会为您生成接口。

Marketplace: https://marketplace.visualstudio.com/items?itemName=quicktype.quicktypeGithub: https://github.com/shanalikhan/code-settings-sync

市场： https: //marketplace.visualstudio.com/items ? itemName = quicktype.quicktype Github： https : //github.com/shanalikhan/code-settings-sync

GitHub存储库管理器 (GitHub Repository Manager)

GitHub Repository Manager is one of the newest additions to my Visual Studio Code installation.

GitHub Repository Manager是我的Visual Studio Code安装的最新版本之一。

It allows you to see all the GitHub repositories that you have access to right inside of Visual Studio Code and you can simply clone them with a double click. You can then use the extension to switch between different repositories you have checked out making it much quicker to change the repository your working on.

它使您可以在Visual Studio Code内部直接查看所有有权访问的GitHub存储库，并且只需双击即可克隆它们。 然后，您可以使用扩展名在已签出的不同存储库之间切换，从而更快地更改您正在使用的存储库。

Aside from working with existing repositories, GitHub Repository Manager also allows you to create new repositories on GitHub, instantly check them out and switch to that repository without leaving Visual Studio Code.

除了使用现有存储库之外，GitHub Repository Manager还允许您在GitHub上创建新存储库，立即将其签出并切换到该存储库，而无需离开Visual Studio Code。

Marketplace: https://marketplace.visualstudio.com/items?itemName=henriqueBruno.github-repository-managerGithub: https://github.com/SrBrahma/GitHub-Repository-Manager

市场： https: //marketplace.visualstudio.com/items ? itemName = henriqueBruno.github-repository-manager Github： https : //github.com/SrBrahma/GitHub-Repository-Manager

支架对着色器2 (Bracket Pair Colorizer 2)

If you have ever had the problem that you can’t figure out which bracket matches to which in your code then Bracket Pair Colorizer 2 will help.

如果您曾经遇到无法在代码中确定哪个括号与之匹配的问题，则“括号对着色器2”将为您提供帮助。

It will look at your code and apply different colours to the brackets so that it is easier to pair up the start and end of a pair.

它将查看您的代码并将不同的颜色应用于括号，以便更轻松地将一对的开头和结尾配对。

Marketplace: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2Github: https://github.com/CoenraadS/Bracket-Pair-Colorizer-2

市场： https: //marketplace.visualstudio.com/items ? itemName = CoenraadS.bracket-pair-colorizer-2 Github： https : //github.com/CoenraadS/Bracket-Pair-Colorizer-2

有关UI扩展的奖金提示 (Bonus tip about UI extensions)

Finally, before I finish, I wanted to share a final tip which I learnt very recently. Suppose you want a UI extension that usually lives in the sidebar to appear horizontally instead. In that case, you can drag the icon down into panel that houses the terminal, and it will move. To display it vertically again drag the title back up to the sidebar and it will turn back into an icon.

最后，在结束之前，我想分享我最近学到的最后一个技巧。 假设您希望通常位于侧边栏中的UI扩展改为水平显示。 在这种情况下，您可以将图标向下拖动到容纳终端的​​面板中，它将移动。 要再次垂直显示它，将标题拖回到侧边栏，它将变成一个图标。

综上所述 (In Summary)

Visual Studio Code is both an incredibly powerful tool and a flexible one and in this post I have tried to show you some of the things I do to customise it to my needs.

Visual Studio Code既是一种功能强大的工具，又是一种灵活的工具，在这篇文章中，我试图向您展示一些我可以根据自己的需要对其进行自定义的操作。

This might not meet all your own needs though so I encourage you to do further experimentation yourself to get your editor to work how you want.

尽管这可能无法满足您自己的所有需求，所以我鼓励您自己做进一步的试验以使您的编辑器按您的要求工作。

P.S. If you liked this post follow me on twitter https://twitter.com/jonthanfielding 😀

附注：如果您喜欢此帖子，请在Twitter https://twitter.com/jonthanfielding上关注我😀

翻译自: https://medium.com/swlh/getting-the-most-out-of-visual-studio-code-829463d7023d