【3】VSCode 主题设置推荐,自定义配色方案,修改注释高亮颜色

相关文章:


VSCode 主题设置推荐,自定义配色方案,修改注释高亮颜色

设置主题:

个人比较忠爱vscode的界面,感觉比pycharm要更美观点,虽然两个都装了,但还是会习惯性打开vscode进行调试。下面是我使用的主题。

 

或者在设置--外观里面进行细致设置

vscode官网:Themes Extensions - Visual Studio Marketplace,大家可以选择自己喜欢的主题

主题推荐

  • One Dark Pro:

One Dark Pro - Visual Studio Marketplace

最新版本3.10.12 2021.4.10更新,下载量还是很多的,也很不错几面清新舒适

ScreenShot

  • Palenight Theme

Palenight Theme - Visual Studio Marketplace

2.0.1最新更新版本2020.9.21,界面比较有个性。

  • Monokai Pro

Monokai Pro - Visual Studio Marketplace

VersionLast Updated
1.1.192021/4/6
  • Dracula Official

Dracula Official - Visual Studio Marketplace

VersionLast Updated
2.22.32020/11/24

暗紫色的色调是这个主题与其他主题与众不同的地方。我很喜欢!!

  • One Monokai Theme

One Monokai Theme - Visual Studio Marketplace

多彩的主题! 很多颜色,无处不在

VersionLast Updated
0.5.02020/10/16
  • Material Theme

Material Theme - Visual Studio Marketplace

VersionLast Updated
33.2.22021/3/15

干净简约。

  • Panda Theme

Panda Theme - Visual Studio Marketplace

VersionLast Updated
1.3.02018/6/30

自定义配色方案

首先进入安装vscode目录找到想要修改调整的主题,以我的文件路径为例:H:\VScode\Microsoft VS Code\resources\app\extensions,主题配置文件都位于resources/app/extensions目录中,以theme-开头的目录即为颜色主题配置:

每个颜色主题配置目录包含以下文件:其中package.json我们可以用来配色方案。

打开

{"name":"theme-monokai","displayName":"%displayName%",
"description":"%description%","version":"1.0.0",
"publisher":"vscode",
"license":"MIT","engines":{"vscode":"*"},
"contributes":{"themes":[{"id":"Monokai","label":"%themeLabel%",
"uiTheme":"vs-dark","path":"./themes/monokai-color-theme.json"}]},
"repository":{"type":"git","url":"https://github.com/microsoft/vscode.git"}}
参数名作用
name主题ID,必需在VSCode中全局唯一,即所有主题的package.json中该值均不能重复
contributes -> themes -> label主题名,“文件-首选项-颜色主题”的列表中显示该值
contributes -> themes -> uiThemeVSCode整体的UI主题,vs为浅色主题
contributes -> themes -> path定义配色方案的文件名,如为相对路径则相对于此文件

再打开themes文件夹下monokai-color-theme.json进行配置。

参数名作用
colorsVSCode各个UI组件的颜色
tokenColors语法高亮颜色

colors节点的内容直接通过键值对参数描述,

以下列举几个参数的作用:

图示参数名作用
2activityBar.background活动栏背景色
1activityBar.foreground活动栏前景色(例如用于图标)
12editor.background编辑器背景颜色
13editor.foreground编辑器默认前景色
editor.findMatchBackground当前搜索匹配项的颜色
editor.findMatchHighlightBackground其他搜索匹配项的颜色
15editor.lineHighlightBackground光标所在行高亮文本的背景颜色
editor.selectionBackground编辑器所选内容的颜色
editor.selectionHighlightBackground与所选内容具有相同内容的区域颜色
editor.rangeHighlightBackground突出显示范围的背景颜色,例如 "Quick Open" 和“查找”功能
16editorBracketMatch.background匹配括号的背景色
14editorCursor.foreground编辑器光标颜色
11editorGutter.background编辑器导航线的背景色,导航线包括边缘符号和行号
10editorLineNumber.foreground编辑器行号颜色
5sideBar.background侧边栏背景色
4sideBar.foreground侧边栏前景色
3sideBarSectionHeader.background侧边栏节标题的背景颜色
17statusBar.background标准状态栏背景色
17statusBar.noFolderBackground没有打开文件夹时状态栏的背景色
17statusBar.debuggingBackground调试程序时状态栏的背景色
9tab.activeBackground活动选项卡的背景色
8tab.activeForeground活动组中活动选项卡的前景色
7tab.inactiveBackground非活动选项卡的背景色
6tab.inactiveForeground活动组中非活动选项卡的前景色

tokenColors

tokenColors使用一个对象数组描述各语法高亮颜色。每个对象有如下结构:

{
    "name": "Comment",
    "scope": [
        "comment",
        "punctuation.definition.comment"
    ],
    "settings": {
        "background": "#ffffff",
        "fontStyle": "italic",
        "foreground": "#000000"
    }
}
参数名作用
name规则描述,一段容易理解的描述性文字
scope作用域,指定使用那些VSCode内部对象,其含义参看Scope Naming
setting -> background背景色,可选
setting -> fontStyle字体,可选,为bold、italic、underline
setting -> foreground前景色,可选

以下列举文末的配置文件中几个name所指定的参数的作用:

参数名作用
Character字符
Class类名
Comment注释
Function函数名
Keyword关键字
Number数值
Operator运算符
Parameter函数参数
Punctuation标点符号
String字符串
Type内置类型
Variable变量名

参考链接:VSCode自定义配色方案_weixin_30755393的博客-CSDN博客 

具体文件内容我就不贴了,改改颜色和高亮很简单的。

颜色:网址提供:

颜色中英文对照表 颜色名字 色彩名称-www.5tu.cn

可以根据自己的喜好进行调整

修改注释高亮颜色

下面我们将进行选择时显示高亮和注释颜色修改,首先打开settings.json文件

选择高亮:

在setting.json中添加如下字段即可,颜色可以自定义修改【参考上面我提供的颜色网址

    "workbench.colorCustomizations": {
        "editor.selectionBackground": "#e46bc9",
        "editor.selectionHighlightBackground": "#a32c3c"
        },

修改注释

修改注释颜色,同样在setting.json中添加:

        "editor.tokenColorCustomizations": {
            "comments": "#3CB371"  //春天绿
        },

效果图如下:选择时会高亮,注释我更喜欢淡紫色

posted @ 2022-10-27 21:34  汀、人工智能  阅读(3044)  评论(0编辑  收藏  举报