vscode自定义各个区域的颜色

一,打开settings.json文件

如果找不到这个文件,具体可百度如何打开。
在这里插入图片描述

二,添加如下配置,可实现类似idea的颜色配置

   "workbench.colorCustomizations": {
    "editorGutter.background": "#313335",    //编辑区背景色
    "editor.background": "#2B2B2B",
    "editor.selectionHighlightBackground": "#212483",
    "terminal.background": "#323232",
    "panel.background" : "#3C3F41",
    "statusBar.background" : "#3C3F41",
    "sideBar.background" : "#3C3F41",
    "activityBar.background": "#313335",
    "editorGroupHeader.border" : "#3C3F41",
    "editorGroupHeader.tabsBackground" : "#3C3F41",
    "tab.activeBackground" : "#3C3F41",
    "tab.activeBorder" : "#458EA8",
    "editor.lineHighlightBackground": "#323232",  //定位行的背景色

    "editor.bracketPairColorization.enabled": true,	//括号匹配颜色
    "editorBracketHighlight.foreground1": "#A5B6B1",
    "editorBracketHighlight.foreground2": "#A5B6B1",
    "editorBracketHighlight.foreground3": "#A5B6B1",
    "editorBracketHighlight.foreground4": "#A5B6B1",
    "editorBracketHighlight.foreground5": "#A5B6B1",
    "editorBracketHighlight.foreground6": "#A5B6B1"
  },
   
  "editor.tokenColorCustomizations": {
    "comments": "#6D7A7F", // 注释
    "keywords": "#A2683C", // 关键字
    "variables": "#A5B6B1", // 变量名
    "strings": "#698653", // 字符串
    "functions": "#A5B6B1", // 函数名
    "numbers": "#6897BB", // 数字
    "types": "#A5B6B1",
    "textMateRules": [
 
      {
          "scope": "keyword.operator",//算数符
          "settings": {
              "foreground": "#A5B6B1"
          }
      },
  
      {
          "scope": "entity.name.type.class",//类名
          "settings": {
              "foreground": "#A5B6B1"
          }
      },

      {
          "scope": "entity.name.type.interface",//接口
          "settings": {
              "foreground": "#A5B6B1"
          }
      },
      {
          "scope": "entity.name.namespace",//导入部分
          "settings": {
              "foreground": "#A5B6B1"
          }
      },
      {
          "scope": "entity.name.tag",//html标签
          "settings": {
              "foreground": "#A2683C"
          }
      }
  ]

  },

如下位置添加:
vscode自定义各个区域的颜色_第1张图片
其中的键值对,可以自己添加,每个键对应哪些位置??
可参考官网: https://code.visualstudio.com/api/references/theme-color
也可以参考下面这篇博客 :https://blog.csdn.net/NEKOic/article/details/118855221
效果如下:整体和idea的层次感相似。
vscode自定义各个区域的颜色_第2张图片

你可能感兴趣的:(杂项,vscode,ide,编辑器)