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 ),因此有两个单独的文件:
- 全局
settings.json
,其中配置规则对每个工作空间均有效 - 与工作区相关的
.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/