主题设置

  • 点击菜单栏的「Code」——「首选项」——「设置」,然后在左边找到「工作台」——「外观」,在「Color Theme」选项下可以设置主题,下面以「Default Dark+」主题为例,讲解如何在这个主题的基础上自定义一些地方的设置
  • /Applications/Visual Studio Code.app/Contents/Resources/app/extensions 路径下找到 theme-defaults文件夹,再打开里面的 themes 文件夹,然后打开 dark_defaults.json 文件,文件内容如下(部分内容我已根据自己的喜欢更改,并且添加了一些内容;鼠标放在每一行上,会有中文提示这一行设置的是什么;要更改其它主题的设置也是类似的方法)
{
	"$schema": "vscode://schemas/color-theme",
	"name": "Dark Default Colors",
	// 里面很多设置是我改动过后的
	"colors": {
		"editor.background": "#000000", 
		"editor.foreground": "#FFFFFF",
		"activityBar.background": "#000000", // 活动栏背景色(自己加的)
		"activityBar.foreground": "#FFFFFF", // 活动栏前景色(自己加的)
		"editor.inactiveSelectionBackground": "#3A3D41",
		"editorIndentGuide.background": "#404040",
		"editorIndentGuide.activeBackground": "#707070",
		"editor.selectionHighlightBackground": "#ADD6FF26",
		"list.dropBackground": "#383B3D",
		"activityBarBadge.background": "#007ACC",
		"sideBarTitle.foreground": "#FFFFFF",
		"sideBar.background": "#000000", // 侧边栏背景色(自己改动过)
		"sideBar.foreground": "#FFFFFF", // 侧边栏前景色(自己改动过)
		"input.placeholderForeground": "#A6A6A6",
		"settings.textInputBackground": "#000000",
		"settings.numberInputBackground": "#292929",
		"menu.background": "#000000",
		"menu.foreground": "#C7C7C7",
		"statusBarItem.remoteForeground": "#FFF",
		"statusBarItem.remoteBackground": "#16825D"
	}
}
  • 要想改变状态栏的颜色,我们需要在 settings.json 文件里进行设置
  1. 点击菜单栏的「Code」——「首选项」——「设置」,然后在左边找到「工作台」——「外观」,然后打开 settings.json 文件
  2. vscode设置nginx Vscode设置主题_vscode设置nginx

  3. 然后在最后添加如下内容(具体的值可以根据自己的喜好自定义;注意还要在上一条语句中加个逗号)
"workbench.colorCustomizations": {
    "statusBar.background" : "#000000",
    "statusBar.foreground" : "#FFFFFF",
    "statusBar.noFolderBackground" : "#0A0A0D",
    "statusBar.debuggingBackground": "#511f1f"
}
  1. 保存后,重启软件,设置即可生效
  • 要想改变某个主题下的光标所在行的背景色,我们需要在对应的主题的配置文件的 colors 下添加 "editor.lineHighlightBackground": "#FFFAE3",
  • 要想改变编辑器活动行号的颜色,我们需要在对应的主题的配置文件的 colors 下添加 "editorLineNumber.activeForeground": "#FF0000",
  • vscode设置nginx Vscode设置主题_vscode_02

Tips:不知道某个设置该怎么写时,可以去其它主题的配置文件中寻找有没有我们想要的

  • 要更改每个文件显示的图标,可以在扩展商店中搜索 tag:icon-theme,然后安装自己喜欢的文件图标扩展包
  • vscode设置nginx Vscode设置主题_侧边栏_03

常用快捷键

  1. 打开「输出/终端」:command + J
  2. vscode设置nginx Vscode设置主题_vscode设置nginx_04

  3. 关闭或打开「侧边栏」:command + B
  4. vscode设置nginx Vscode设置主题_vscode_05

  5. 显示或隐藏「活动栏」:「查看」——「外观」——「隐藏活动栏」
  6. vscode设置nginx Vscode设置主题_配置文件_06

  7. 显示或隐藏底部的「状态栏」:「查看」——「外观」——「隐藏状态栏」
  8. vscode设置nginx Vscode设置主题_vscode常用快捷键_07

  9. 控制侧边栏显示的条目:鼠标放在侧边栏的某个条目上,点击右键即可看到关闭选项
  10. vscode设置nginx Vscode设置主题_vscode_08

  11. 关闭打开的文件夹:「文件」——「 关闭文件夹 [⌘K F] 」,也可使用快捷键,先按下 [⌘K,然后松开,再按下 F
  12. vscode设置nginx Vscode设置主题_vscode设置nginx_09


  13. vscode设置nginx Vscode设置主题_vscode常用快捷键_10

  14. 切换侧边栏显示的内容(侧边栏可以显示很多内容,如资源管理器等):点击菜单栏的「查看」

vscode设置nginx Vscode设置主题_vscode_11

  1. 向 上/下 移动一行:⌥ + ⬆️/ ⬇️(Alt+Up 或 Alt+Down)
  2. 向 上/下 复制一行: ⇧ + ⌥ + ⬆️/ ⬇️(Shift+Alt+Up 或 Shift+Alt+Down)