如何自定义Visual Studio代码

Microsoft的新开放源代码编辑器Visual Studio Code为开发人员提供了许多很棒的功能 ，这些功能大大简化了源代码编辑过程 。 此外，Visual Studio Code还确保用户在使用它时不会感到无聊，因为它允许用户自定义其外观的多个部分 ，例如颜色，字体，间距和文本格式，就像许多功能一样，例如作为棉绒和有效规则 。

在本文中，首先我们将了解如何更改Visual Studio Code工作区的外观 ，然后将向您展示如何借助两个JSON格式的配置文件来自定义默认设置。

如何在VS代码上设置颜色主题

Visual Studio Code允许您为编辑器设置自定义颜色主题 。

要使用预制主题，请单击顶部菜单栏中的File > Preferences > Color Theme菜单。 当您按“ Enter”时，将弹出“命令面板”，并显示一个可以选择主题的下拉列表。

如果按F1键打开“命令面板”，然后在输入字段中键入“ Preferences: Color Theme命令，则可以达到相同的效果。

当您将鼠标悬停在下拉列表中的选项上时，工作空间的外观会实时更改，因此您可以快速查看哪个主题最适合您的需求。

我选择“高对比度”色彩主题，因为我的眼睛不是最好的。 这就是我的观点。

如何从VS Code Marketplace安装主题

如果您不喜欢VS Code默认提供的任何颜色主题，则可以从VS Code Marketplace下载许多其他主题。

在这里，您可以查看Marketplace当前具有的主题。 如果要从市场上安装主题，请在VS代码编辑器中按F1键以打开“命令面板”，然后在输入字段中键入ext install命令，最后从列表中选择“ Extensions: Install Extension选项，弹出。

当您单击此选项时，将弹出一个新的Command Palette实例。 在新的输入字段中键入"ext install theme"命令，您将获得 VS Code Marketplace可用的所有主题的列表 。

我选择名为“ Material Theme Kit”的主题，然后单击以进行安装。 要在“颜色主题”列表中将新主题放置在其他默认主题所在的位置，则需要重新启动VS Code 。 重新启动后，新主题将出现在主题列表中，您可以从“命令面板”中对其进行设置。

有了新的Material Theme，我的编辑器现在看起来像这样：

您可以返回到上一个主题（就像我一样，因为我仍然喜欢那个主题），或者您可以与其他主题一起玩一些，看哪个最适合您。

如果需要，还可以创建自定义主题 ，并使用vsce扩展管理器工具将其发布在VS Code Marketplace上。

更改用户和工作区设置

VS Code不仅允许您设置自定义主题，而且还可以配置许多其他设置 ，例如格式设置规则，使用不同功能，崩溃报告，HTTP设置，文件关联，整理规则等。

您可以通过编辑两个均为JSON格式的配置文件来实现。 不用担心，您不需要成为专业人士，因为VS Code提供了一种非常直接直观的方法来快速添加您的自定义设置。

首先，让我们看看两个配置文件之间的区别。 VS Code具有两个设置范围（ global和local ），因此有两个单独的文件：

1. 全局settings.json ，其中配置规则对每个工作空间均有效
2. 与工作区相关的.vscode/settings.json ，仅与单个工作区相关

• 在Windows上： %APPDATA%\Code\User\settings.json
• 在Linux上： $HOME/.config/Code/User/settings.json
• 在Mac上： $HOME/Library/Application Support/Code/User/settings.json

与工作空间相关的 settings.json文件存储在当前项目的文件夹中。 默认情况下，此文件不存在，但是一旦添加自定义工作区设置，VS Code就会.vscode/settings.json创建一个.vscode/settings.json文件，并将自定义工作区特定的配置放入其中。

如果希望VS Code在所有项目中使用自定义配置规则，请将其放入全局settings.json文件中。

如果您希望设置仅在当前项目中有效，请将其放入与工作区相关的settings.json文件中。

全局设置在VS Code中称为“用户设置”。 通过单击“ File > Preferences > User Settings菜单，或开始在“命令面板”中键入表达式“用户设置”来打开它们（使用F1打开它）。

VS Code会打开两个彼此相邻的窗格：左边的窗格包含所有可能配置的选项，右边的窗格显示全局settings.json文件。 您需要将自定义配置规则放入此文件。

如您所见，您无需执行其他任何操作，只需将要更改的设置从左侧复制到右侧，然后添加修改后的值即可。

让我们看一个简短的示例（但您可以根据自己的需要进行任何其他修改）。 我将更改字体系列，将tab的长度从默认的四个空格减少到两个，将工作文件的最大数量从九个减少到五个，并将与重复样式有关CSS掉毛规则之一从"ignore"更改为"warning" 。

复制粘贴后，我的全局settings.json文件如下所示：

// Place your settings in this file to overwrite the default settings
{
  "editor.fontFamily": "Courier New",
  "editor.tabSize": 2,
  "explorer.workingFiles.maxVisible": 5,
  "css.lint.duplicateProperties": "warning"
}

保存修改后的settings.json文件后，编辑器的外观立即更改（在下面的屏幕截图中，仅字体家族的更改可见）：

您可以类似地更改工作区设置。 现在，您需要单击顶部菜单栏中的File > Preferences > Workspace Settings ，以访问与工作区相关的.vscode/settings.json文件。

工作区设置具有与用户设置完全相同的配置选项，并且您可以使用相同的复制粘贴技术。 只有两个区别，范围（本地而不是全局），以及将自定义配置保存到的settings.json文件。

翻译自: https://www.hongkiat.com/blog/customizing-visual-studio-code/