如何使用Visual Studio Code

• Introduction

  介绍

• Should I switch to VS Code? And why?

  我应该切换到VS Code吗？ 又为什么呢

• Getting started

  入门

• Explorer

  探险者

• Search

  搜索

• Source Control

  源代码控制

• Debugger

  调试器

• Extensions

  扩展名

• The Terminal

  终点站

• The Command Palette

  命令面板

• Themes

  主题

• Customization

  客制化

• Nice configuration options

  不错的配置选项

• The best font for coding

  编码的最佳字体

• Workspaces

  工作空间

• Editing

  编辑中

  • IntelliSense

    智能感知

  • Code Formatting

    代码格式化

  • Errors and warnings

    错误和警告

  • Keyboard shortcuts

    键盘快捷键

  • Keymaps

    按键图

  Editing

  编辑中

• Code snippets

  代码段

• Extensions showcase

  扩展展示

• The VS Code CLI command

  VS Code CLI命令

• Solving high usage CPU issues

  解决高使用率CPU问题

介绍 (Introduction)

Since the beginning, editors are a strange beast. Some people defend their editor choice strenuously. In the Unix world you have those Emacs vs vi “wars”, and I kind of imagine why so much time is spend debating the advantages of one versus another.

从一开始，编辑就是一头奇怪的野兽。 有些人竭力捍卫编辑选择。 在Unix世界中，您有那些Emacs vs vi “战争”，我有点想像为什么要花这么多时间来争论一个人与另一个人的优势。

I used tons of editors and IDEs in the past few years. I can remember TextMate, TextWrangler, Espresso, BBEdit, XCode, Coda, Brackets, Sublime Text, Atom, vim, PHPStorm. The difference between an IDE and an editor is mostly in the feature set, and complexity.

在过去的几年中，我使用了大量的编辑器和IDE。 我可以记得TextMate，TextWrangler，Espresso，BBEdit，XCode，Coda，括号，Sublime Text，Atom，vim，PHPStorm。 IDE和编辑器之间的差异主要在于功能集和复杂性。

I largely prefer an editor over an IDE, as it’s faster and gets less in the way.

与IDE相比，我在很大程度上更喜欢编辑器，因为它速度更快，而且方式更少。

In the last 12 months I’ve been using VS Code, the Open Source editor from Microsoft, and it’s quickly become my favorite editor ever.

在过去的12个月中，我一直在使用VS Code(Microsoft的开源编辑器)，并且它很快成为我最喜欢的编辑器。

我应该切换到VS Code吗？ 又为什么呢 (Should I switch to VS Code? And why?)

If you’re looking for suggestions for whether to use it or not, let me say yes, you should switch to it from whatever other editor you are using now.

如果您正在寻找是否使用它的建议，请允许我说是 ，您应该从现在使用的任何其他编辑器切换到它。

This editor builds on top of decades of editor experience from Microsoft.

该编辑器以Microsoft数十年的编辑经验为基础。

The code of the editor is completely Open Source, and there’s no payment required to use it.

编辑器的代码完全是开源的，使用它不需要付费。

It uses Electron as its base, which enables it to be cross platform and work on Mac, Windows and Linux. It’s built using Node.js, and you can extend it using JavaScript (which makes it a win for all us JavaScript developers).

它以Electron为基础，使其可以跨平台并在Mac，Windows和Linux上运行。 它是使用Node.js构建的，您可以使用JavaScript对其进行扩展(这对我们所有JavaScript开发人员来说都是一个胜利)。

It’s fast, easily the fastest editor I’ve used after Sublime Text.

它是快速 ，轻松地成为继Sublime Text之后我使用过的最快的编辑器。

It has won the enthusiasm of the community: there are thousands of extensions, some official, and some made by the community, and it’s winning surveys.

它赢得了社区的热情：成千上万的扩展名 ，一些官方的和一些由社区制作的，并且赢得了调查 。

Microsoft releases an update every month. Frequent updates foster innovation and Microsoft is listening to its users, while keeping the platform as stable as possible (I should say I never had an issue with VS Code in 1 year of using it every day almost all day).

Microsoft每月发布一个更新。 频繁的更新促进了创新，并且Microsoft在倾听用户的意见，同时保持平台尽可能稳定(我应该说，几乎每天都在使用VS Code的一年内，我从未遇到过问题)。

入门 (Getting started)

The home page of Visual Studio Code on the internet is https://code.visualstudio.com/.

Internet上Visual Studio Code的主页为https://code.visualstudio.com/ 。

Go to that site to download the latest stable release of the editor.

转到该站点以下载编辑器的最新稳定版本。

The installation process depends on the platform, and you should be used to it.

安装过程取决于平台，因此您应该习惯该平台。

When you start the editor for the first time you will see the welcome screen:

首次启动编辑器时，您将看到欢迎屏幕：

There is a toolbar on the left with 5 icons. That gives access to:

左侧有一个带有5个图标的工具栏。 这样可以访问：

• The File Explorer
  文件浏览器
• Search
  搜索
• Source Control
  源代码控制
• The Debugger
  调试器
• The Extensions
  扩展名

探险者 (Explorer)

Let’s start the exploration with the explorer (pun intended).

让我们从资源管理器(双关语)开始探索。

Press the “Open Folder” button in the sidebar, or the Open folder... link in the Welcome page. Both will trigger the file picker view.

按侧边栏中的“打开文件夹”按钮，或按“欢迎”页面中的“ Open folder...链接。 两者都将触发文件选择器视图。

Choose one folder where you have source code, or even just text files, and open it.

选择一个包含源代码甚至是文本文件的文件夹，然后将其打开。

VS Code will show that folder content in your view:

VS Code将在您的视图中显示该文件夹内容：

On the right, the empty view shows some commands to perform some quick operations, and their keyboard shortcut.

右侧的空白视图显示了一些用于执行某些快速操作的命令及其键盘快捷键。

If you select a file on the left, that file will open on the main panel:

如果您选择左侧的文件，则该文件将在主面板上打开：

and if you start editing it, notice a dot will appear next to the file name in the tab, and in the sidebar as well:

并且，如果您开始对其进行编辑，则会注意到在标签中以及边栏中的文件名旁边会出现一个点：

Pressing CMD+P will show you a quick file picker to easily move in files on large projects:

按CMD+P将显示一个快速的文件选择器，可以轻松地在大型项目中移动文件：

You can hide the sidebar that hosts the file using the shortcut CMD+B.

您可以使用快捷方式CMD+B隐藏托管文件的侧栏。

Note: I’m using the Mac keyboard shortcuts. Most of the times, on Windows and Linux you just change CMT to CTRL and it works, but not always. Print your keyboard shortcuts reference.

注意：我使用的是Mac键盘快捷键。 在大多数情况下，在Windows和Linux上，您只需将CMT更改为CTRL即可，但并非总是如此。 打印键盘快捷键参考 。

搜索 (Search)

The second icon in the toolbar is “Search”. Clicking it shows the search interface:

工具栏中的第二个图标是“搜索”。 单击它会显示搜索界面：

You can click the icons to make the search case sensitive, to match whole words (not substrings), and to use a regular expression for the search string.

您可以单击图标以使搜索区分大小写，以匹配整个单词(而不是子字符串)，并对搜索字符串使用正则表达式。

To perform the search, press enter.

要执行搜索，请按enter 。

Clicking the ▷ symbol on the left enables the search and replace tool.

单击左侧的▷符号可启用搜索和替换工具。

Clicking the 3 dots shows a panel that lets you just include some specific kind of files, and exclude other files:

单击三个点将显示一个面板，该面板可让您仅包含某些特定类型的文件，而排除其他文件：

源代码控制 (Source Control)

The Source Control tab is enabled by clicking the third icon in the toolbar.

通过单击工具栏中的第三个图标，可以启用“源代码管理”选项卡。

VS Code comes with Git support out of the box. In this case the folder we opened does not have source control initialized.

VS Code开箱即用，具有Git支持。 在这种情况下，我们打开的文件夹没有初始化源代码控制。

Clicking the first icon on top, with the Git logo, allows us to initialize the Git repository:

单击顶部带有Git徽标的第一个图标，可以初始化Git存储库：

The U beside each file means that it’s been updated since the last commit (since we never did a commit in the first place, all files are updated).

每个文件旁边的U表示自上次提交以来已对其进行了更新(由于我们从未首先进行过提交，因此所有文件均已更新)。

Create the first commit by writing a text message and pressing Cmd-Enter, or clicking the ✔︎ icon on top.

通过编写短信并按Cmd-Enter或单击顶部的✔︎图标来创建第一个提交。

I usually set this to automatically stage the changes when I commit them.

我通常将其设置为在提交更改时自动暂存更改。

The 3 dots icon, when clicked, offers lots of options for interacting with Git:

单击时的3点图标提供了许多与Git交互的选项：

调试器 (Debugger)

The fourth icon in the toolbar opens the JavaScript debugger. This deserves an article on its own. In the meantime check out the official docs.

工具栏中的第四个图标将打开JavaScript调试器。 这值得单独发表一篇文章。 同时，查看官方文档 。

扩展名 (Extensions)

The fifth icon brings us to extensions.

第五个图标将我们引向扩展程序。

Extensions are one killer feature of VS Code.

扩展是VS Code的杀手级功能。

They can provide so much value that you’ll surely end up using tons of them.

它们可以提供那么多的价值，您肯定会最终使用大量的它们。

I have lots of extensions installed.

我安装了许多扩展程序。

One thing to remember is that every extension you install is going to impact (more or less) the performance of your editor.

要记住的一件事是，您安装的每个扩展都会(或多或少)影响编辑器的性能。

You can disable an extension you install, and enable only when you need it.

您可以禁用安装的扩展，并仅在需要时启用。

You can also disable an extension for a specific workspace (we’ll talk about work workspaces later). For example, you don’t want to enable the JavaScript extensions in a Go project.

您还可以禁用特定工作区的扩展名(我们将在以后讨论工作区)。 例如，您不想在Go项目中启用JavaScript扩展。

There is a list of recommended extensions, which include all the most popular tools.

有推荐的扩展列表，其中包括所有最受欢迎的工具。

Since I edit lots of markdown files for my blog, VS Code suggests me the markdownlint extension, which provides linting and syntax checking for Markdown files.

由于我为自己的博客编辑了许多markdown文件，因此VS Code建议我使用markdownlint扩展名，该扩展名可以为Markdown文件提供衬砌和语法检查。

As an example, let’s install it.

作为示例，让我们安装它。

First, I inspect the number of views. It’s 1.2M, so many! And the reviews are positive (4.⁵⁄₅). Clicking the extension name opens the details on the right.

首先，我检查视图数。 是120万，太多了！ 和评论是积极的^(4.5 / _5)。 单击扩展名，将在右侧打开详细信息。

Pressing the green Install button starts the installation process, which is straightforward. It does everything for you, and you just need to click the “Reload” button to activate it, which basically reboots the editor window.

按下绿色的“安装”按钮将启动安装过程，这很简单。 它为您完成了所有工作，您只需要单击“重新加载”按钮将其**，这实际上会重新启动编辑器窗口。

Done! Let’s test it by creating a markdown file with an error, like a missing alt attribute on an image. It successfully tells us so:

做完了！ 让我们通过创建带有错误的markdown文件来测试它，例如图像上缺少alt属性。 它成功地告诉我们：

Down below I introduce some popular extensions you don’t want to miss, and the ones I use the most.

下面，我介绍一些您不想错过的流行扩展，以及我最常使用的扩展。

终点站 (The Terminal)

VS Code has an integrated terminal.

VS Code具有集成的终端。

You can activate it from the menu View ➤ Integrated Terminal, or using CMD+\` and it will open with your default shell.

您可以从菜单View ➤ Integrated Terminal或使用CMD+\ `**它，它将以您的默认外壳打开。

This is very convenient because in modern web development you almost always have some npm or yarn process running in the background.

这非常方便，因为在现代Web开发中，您几乎总是在后台运行某些npm或yarn过程。

You can create more than one terminal tab, and show them one next to the other, and also stack them to the right rather than in the bottom of the window:

您可以创建多个终端标签，并在另一个标签旁边显示它们，也可以将它们堆叠到右侧而不是在窗口底部：

命令面板 (The Command Palette)

The Command Palette is a very powerful tool. You enable it by clicking View ➤ Command Palette, or using CMD+SHIFT+P

命令面板是一个非常强大的工具。 您可以通过单击“ View ➤ Command Palette ”或使用CMD+SHIFT+P启用它

A modal window will appear at the top, offering you various options, depending on which plugins you have installed, and which commands you used last.

模态窗口将出现在顶部，为您提供各种选项，具体取决于您已安装的插件以及上次使用的命令。

Common operations I perform are:

我执行的常见操作是：

• Extensions: Install Extensions

  扩展：安装扩展

• Preferences: Color Theme to change the color theme (I sometimes change from night to day)

  首选项：颜色主题以更改颜色主题(有时我有时从晚上改变为白天)

• Format Document, which formats code automatically

  格式化文档 ，它会自动格式化代码

• Run Code, which is provided by Code Runner, and executes the highlighted lines of JavaScript

  运行Code Runner提供的Run Code ，并执行突出显示JavaScript行

you can activate any of those by starting typing, and the autocomplete functionality will show you the one you want.

您可以通过开始输入来**其中任何一种，然后自动完成功能会向您显示您想要的一种。

Remember when you typed CMD+P to see the list of files, before? That’s a shortcut to a specific feature of the Command Palette. There are others:

还记得以前键入CMD+P来查看文件列表时的情况吗？ 这是命令面板特定功能的快捷方式。 还有其他：

• Ctrl-Shift-Tab shows you the active files

  Ctrl-Shift-Tab显示活动文件

• Ctrl-G opens the command palette to let you enter a line number to go to

  Ctrl-G打开命令选项板，让您输入要转到的行号

• CMD+SHIFT+O shows the list of symbols found in the current file

  CMD+SHIFT+O显示在当前文件中找到的符号列表

What symbols are depends on the file type. In JavaScript, those might be classes or functions. In Markdown, section titles.

什么符号是依赖于文件类型。 在JavaScript中，这些可能是类或函数。 在Markdown中，章节标题。

主题 (Themes)

You can switch the color theme used by clicking CMD-k + CMD-t, or by invoking the Preferences: Color Theme command.

您可以通过单击CMD-k + CMD-t或调用“ 首选项：颜色主题”命令来切换使用的颜色主题 。

This will show you the list of themes installed:

这将向您显示已安装的主题列表：

you can click one, or move with the keyboard, and VS Code will show you a preview. Click enter to apply the theme:

您可以单击一个，或使用键盘移动，而VS Code将为您显示预览。 单击输入以应用主题：

Themes are just extensions. You can install new themes by going to the extensions manager.

主题只是扩展。 您可以转到扩展程序管理器来安装新主题。

Probably the best thing for discoverability is to use the marketplace website.

可能最好的发现方法是使用市场网站 。

My favorite theme is Ayu, which provides a great style for any time of the day, night, morning/evenings and afternoon.

我最喜欢的主题是Ayu ，它在白天，晚上，早晨/晚上和下午的任何时间都提供了出色的风格。

客制化 (Customization)

Theme is just one customization you can make.

主题只是您可以进行的一种自定义。

The sidebar icons that are assigned to a file are also a big part of a nice user experience.

分配给文件的侧边栏图标也是良好的用户体验的重要组成部分。

You can change those by going to Preferences ➤ File Icon Theme. Ayu comes with its own icons theme, which perfectly matches the theme colors:

您可以通过转到Preferences ➤ File Icon Theme来更改这些Preferences ➤ File Icon Theme 。 Ayu带有自己的图标主题，与主题颜色完全匹配：

All those customizations we made so far, the theme and the icon theme, are saved to the user preferences.

到目前为止，我们进行的所有这些自定义(主题和图标主题)均保存到用户首选项中。

Go to Preferences ➤ Settings (also reachable via CMD-,) to see them:

转到Preferences ➤ Settings (也可以通过CMD-,访问)以查看它们：

The view shows the default settings on the left, for an easy reference, and the overridden settings on the right. You can see the name of the theme and the icon theme we set up, in workbench.colorTheme and workbench.iconTheme.

该视图在左侧显示默认设置(供参考)，在右侧显示被覆盖的设置。 您可以在workbench.colorTheme和workbench.iconTheme看到我们设置的主题名称和图标主题。

I zoomed in using CMD-+, and this setting was saved as well to window.zoomLevel, so the next time VS Code starts up, it remembers my choice for zooming.

我使用CMD-+放大，并且此设置也保存到window.zoomLevel ，因此下次VS Code启动时，它会记住我的缩放选择。

You can decide to apply some setting globally, in User Settings, or relative to a workspace, in Workspace settings.

您可以决定在用户设置中全局应用某些设置 ，还是在工作区设置中相对于工作区应用某些设置 。

Most of the times those settings are automatically added by extensions or by the VS Code itself, but in some cases you’ll directly edit them in this place.

大多数情况下，这些设置是通过扩展名或VS Code本身自动添加的，但是在某些情况下，您将在此位置直接对其进行编辑。

不错的配置选项 (Nice configuration options)

VS Code has a lot of options. Everything is highly configurable, and it’s sometimes hard to make sense of it all.

VS Code有很多选择。 一切都是高度可配置的，有时很难一一理解。

You can open the configuration JSON file using the command palette, and select Open Settings (JSON).

您可以使用命令面板打开配置JSON文件，然后选择Open Settings (JSON) 。

Some nice configuration options I set in my code:

我在代码中设置的一些不错的配置选项：

Option	Description
"editor.minimap.enabled": false	Remove the minimap, which is shown at the right of the editor
"explorer.confirmDelete": false	Stop asking me for confirmation when I want to remove a file (I have source control!)
"explorer.confirmDragAndDrop": false	Disable the confirmation for drag and drop
"editor.formatOnSave": true	Format the code automatically when I save it
"editor.formatOnPaste": true	Format the code automatically when I paste it in my code
"javascript.format.enable": true	Enable formatting for JavaScript code
"files.trimTrailingWhitespace": true	Trim whitespace in files
"editor.multiCursorModifier": "alt"	When clicking the Alt key and clicking with the mouse, I can select multiple lines
"editor.detectIndentation": true	Adapt to the file indentation, useful when editing other people code
"editor.quickSuggestionsDelay": 0	Show the code suggestion immediately, not after some seconds

选项	描述
"editor.minimap.enabled": false	删除小地图，该小地图显示在编辑器的右侧
"explorer.confirmDelete": false	当我想删除文件时，不再要求我确认(我有源代码控制！)
"explorer.confirmDragAndDrop": false	禁用拖放确认
"editor.formatOnSave": true	保存时自动格式化代码
"editor.formatOnPaste": true	当我将代码粘贴到代码中时会自动设置代码格式
"javascript.format.enable": true	启用JavaScript代码格式
"files.trimTrailingWhitespace": true	修剪文件中的空格
"editor.multiCursorModifier": "alt"	单击Alt键并用鼠标单击时，我可以选择多行
"editor.detectIndentation": true	适应文件缩进，在编辑其他人的代码时很有用
"editor.quickSuggestionsDelay": 0	立即显示代码建议，而不是几秒钟后显示

编码的最佳字体 (The best font for coding)

I like Fira Code. It’s free, and has some very nice programming ligatures, which transform common constructs like !== and => to nicer symbols:

我喜欢Fira Code 。 它是免费的，并且具有一些非常不错的编程连字，可以将!==和=>类的常见构造转换为更好的符​​号：

Enable it by installing the font and adding this to your configuration:

通过安装字体并将其添加到您的配置中来启用它：

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true`

工作空间 (Workspaces)

All User settings can be overridden in Workspace settings. They take precedence. They are useful for example when you use a project that has linting rules different from all the other projects you use, and you don’t want to edit your favorite settings just for it.

可以在工作区设置中覆盖所有用户设置。 他们优先。 例如，当您使用的棉绒规则不同于您使用的所有其他项目的项目时，它们非常有用，并且您不想仅为此编辑自己喜欢的设置。

You create a workspace from an existing project by clicking the File ➤ Save Workspace as... menu.

通过单击“ File ➤ Save Workspace as...菜单，可以从现有项目创建工作空间。

The currently opened folder will be enabled as the workspace main folder.

当前打开的文件夹将被启用为工作区主文件夹。

The next time you open VS code, or you switch project, instead of opening a folder, you open a workspace, and that will automatically open the folder containing your code, and it will remember all the settings you set specific to that workspace.

下次打开VS代码或切换项目时，不是打开文件夹，而是打开工作区，这将自动打开包含代码的文件夹，并且它将记住您为该工作区设置的所有设置。

In addition to having workspace-level settings, you can disable extensions for a specific workspace.

除了具有工作空间级别的设置之外，您还可以禁用特定工作空间的扩展。

You can just work with folders until you have a specific reason for wanting a workspace.

您可以只使用文件夹，直到有特定原因想要使用工作空间为止。

One good reason is the ability to have multiple, separate root folders. You can use the File ➤ Add Folder to Workspace to add a new root folder, which can be located anywhere in the filesystem, but will be shown along with the other existing folder you had.

一个很好的理由是能够具有多个单独的根文件夹。 您可以使用“ File ➤ Add Folder to Workspace来添加新的根文件夹，该根文件夹可以位于文件系统中的任何位置，但将与您已有的其他现有文件夹一起显示。

编辑中 (Editing)

智能感知 (IntelliSense)

When you edit in one of the supported languages (JavaScript, JSON, HTML, CSS, Less, Sass, C# and TypeScript) VS Code has IntelliSense, a technology that hints at autocompletion of functions and parameters, as you type them.

当您使用一种受支持的语言(JavaScript，JSON，HTML，CSS，Less，Sass，C＃和TypeScript )进行编辑时，VS Code具有IntelliSense，该技术可在您键入功能和参数时自动提示它们自动完成。

代码格式化 (Code Formatting)

Two handy commands (Format Document and Format Selection) are available on the Commands Palette to autoformat the code. VS Code by defaults supports automatic formatting for HTML, JavaScript, TypeScript and JSON.

命令面板上有两个方便的命令(“ Format Document和“ Format Selection )可用于自动格式化代码。 默认情况下，VS Code支持自动格式化HTML，JavaScript，TypeScript和JSON。

错误和警告 (Errors and warnings)

When you open a file you will see on the right a bar with some colors. Those colors indicate some issues in your code. For example here’s what I see right now:

打开文件时，您会在右侧看到带有一些颜色的条形图。 这些颜色指示代码中的某些问题。 例如，这是我现在看到的内容：

Those are al warnings or errors. You can try to find them in the code, where you see pieces underlined in red, or you can also press CMD-Shift-M (or choose View ➤ Problems)

这些都是警告或错误。 您可以尝试在代码中找到它们，在其中看到带红色下划线的部分，或者也可以按CMD-Shift-M (或选择“ View ➤ Problems )。

键盘快捷键 (Keyboard shortcuts)

I showed you a lot of keyboard shortcuts up to now.

到目前为止，我向您展示了许多键盘快捷键。

It’s starting to get complicated to remember them all, but they are a nice productivity aid. I suggest to print the official shortcuts cheat sheet, for Mac, Linux and Windows.

记住所有这些变得越来越复杂，但是它们是一个不错的生产力帮助。 我建议打印适用于Mac ， Linux和Windows的官方快捷方式备忘单。

按键图 (Keymaps)

If you’re used to keyboard shortcuts from other editors, maybe because you worked with one editor for a long time, you can use a keymap.

如果您习惯于使用其他编辑器的键盘快捷键，则可能是因为您长时间使用一个编辑器，因此可以使用键盘映射。

The VS Code team provides keymaps for the most popular editors out of the box: vim, Sublime Text, Atom, IntelliJ, Eclipse and more. They are available as plugins. By opening the Preferences ➤ Keymaps Extensions menu.

VS Code团队为开箱即用的最受欢迎的编辑器提供了键盘映射：vim，Sublime Text，Atom，IntelliJ，Eclipse等。 它们可作为插件使用。 通过打开“ Preferences ➤ Keymaps Extensions菜单。

代码段 (Code snippets)

Snippets are very cool.

片段非常酷。

For every language you might be developing in, there are extensions that provide ready-made snippets for you to use.

对于您可能要开发的每种语言，都有一些扩展提供了供您使用的现成代码片段。

For JavaScript/React, one popular one is VS Code ES7 React/Redux/React-Native/JS snippets

对于JavaScript / React，一种流行的方法是VS Code ES7 React / Redux / React-Native / JS代码段

You just type rfe, press TAB and this appears in your editor:

您只需输入rfe ，按TAB，这将出现在编辑器中：

import React from 'react'

const $1 = props => {
  return <div>$0</div>
}

export default $1

there are lots of these shortcuts, and they save a lot of time. Not just from typing, but also from looking up the correct syntax.

这些快捷方式很多，它们可以节省大量时间。 不仅来自键入，而且还来自查找正确的语法。

You can also define your own snippets. Click Preferences ➤ User Snippets and follow the instructions to create your own snippets file.

您还可以定义自己的摘录。 单击Preferences ➤ User Snippets然后按照说明创建自己的代码段文件。

扩展展示 (Extensions showcase)

• GitLens: visualize who made the last change to a line of your code, and when this happened

  GitLens ：可视化谁最后更改了一行代码，以及何时发生

• Git History visualize and search the Git history

  Git历史记录可视化并搜索Git历史记录

• CSS Peek lets you see and edit CSS definitions by inspecting the class of an HTML element. Very handy.

  CSS Peek允许您通过检查HTML元素的类来查看和编辑CSS定义。 非常便利。

• Code Runner lets you run bits of code that you select in the editor, and much more. Supports lots of languages.

  使用Code Runner ，您可以运行在编辑器中选择的代码段，等等。 支持多种语言。

• Debugger for Chrome allows you to debug a JavaScript code running in the browser using the VS code debugger.

  Chrome调试器允许您使用VS代码调试器调试在浏览器中运行JavaScript代码。

• Bracket Pair Colorizer handy for visualizing brackets endings in your code.

  括号对着色器非常方便，用于可视化代码中的括号结尾。

• Indent-Rainbow colors the indentation levels of your code.

  缩进彩虹为代码的缩进级别着色 。

• Prettier check my Prettier guide

  更漂亮检查我的漂亮指南

• ESLint check my ESLint guide

  ESLint查看我的ESLint指南

• IntelliSense for CSS improved autocompletion for CSS based on your workspace definitions

  基于工作区定义的IntelliSense for CSS改进了CSS的自动完成功能

• npm enables npm utility functions from the command palette

  npm从命令面板启用npm实用程序功能

• Auto Close Tag automatically close HTML/JSX/* tags

  自动关闭标签会自动关闭HTML / JSX / *标签

• Auto Rename Tag automatically renames the closing tag when you change the opening one, and the opposite as well

  当您更改开始标签时，“ 自动重命名标签”会自动重命名结束标签，反之亦然

VS Code CLI命令 (The VS Code CLI command)

Open the command palette and search for the install 'code' command in PATH command.

打开命令选项板，然后install 'code' command in PATH命令中搜索install 'code' command in PATH命令。

Press enter and the code command will be available globally in your command line.

按Enter键，那么code命令将在您的命令行中全局可用。

This is very useful to start the editor and open a new window with the content of the current folder, with code ..

这对于启动编辑器并使用code .包含当前文件夹的内容打开一个新窗口非常有用code . 。

code -n will create a new window.

code -n将创建一个新窗口。

A useful thing that’s not always known is that VS Code can quickly show the diff between two files, with code --diff file1.js file2.js.

并非总是有用的一件事是，VS Code可以使用code --diff file1.js file2.js快速显示两个文件之间的差异。

解决高使用率CPU问题 (Solving high usage CPU issues)

I ran into an issue of high CPU usage, and spinning fans, with a project with lots of files under node_modules. I added this configuration and things looked normal again:

我遇到一个CPU使用率高，风扇旋转的问题，该项目的node_modules下有很多文件。 我添加了此配置，一切看起来又正常了：

"files.exclude": {
    "/.git": true,
    "/.DS_Store": true,
    "/node_modules": true,
    "/node_modules/": true
  },
  "search.exclude": {
    "/node_modules": true
  },
  "files.watcherExclude": {
    "/node_modules/": true
  },

翻译自: https://flaviocopes.com/vscode/