VS Code自定义代码颜色

       众所周知,VS Code是一款自定义空间很大的开发工具,需要的功能都在插件里,可谓非常方便,但是主题这个东西每个人的喜好都不同,即便是在拓展插件里找了许多主题拓展,也很难找到完全符合自己喜好的主题,那么有没有方法可以自己定义VS Code的主题呢,答案是当然有!继续看,打造属于你自己的主题。

开始之前需要了解的地方


       VS Code除默认设置之外,其他几乎所有需要自定义的设置,都可以通过编辑setting.json文件来完成,自定义主题也是这样。打开setting.json文件的方法为:点击【界面左下角设置按钮】→点击【设置】然后在右上角关闭按钮附近找到如下图标,点击就可以打开setting.json文件,剩下的操作都在里面完成。

在这里插入图片描述


         另外,我们自定义主题一般是基于默认主题进行一些修改,就是默认主题哪里不符合你的喜好,就修改哪里,完全打造一个新的主题需要设置的地方太多了,也不太现实,那么接下来就开始设置。

设置步骤


一、添加字体设置代码块


打开你的setting.json文件,不要管里面有什么,在最外层的大括号里面输入

"editor.tokenColorCustomizations":{}

输入过程会有代码提示,直接选择提示会自动帮你填好。

不要忘记在上一个代码块结尾加一个英文逗号,不然会报错。鼠标指向此代码,会给出提示,可以看到这个代码块是用来修改主题编辑器语法颜色的。

 

 

 


二、找到当前使用的主题

       前面提到,修改颜色其实是在原有主题上进行针对性修改,接下来的操作则是针对你当前使用的主题进行操作,默认的黑色主题是【深色+ Default Dark+】。如果你不知道自己用的哪个主题,就在【设置】里搜索【主题】,在【Workbench: Color Theme】一栏查看当前主题。

 

三、针对该主题进行修改
     

       回到setting.json文件,在字体设置代码块(就是刚才写的代码后面的大括号里)内输入英文引号,以我的深色主题[Visual Studio Dark]为例,在给出的代码提示里选择[Visual Studio Dark]。

       在[Visual Studio Dark]后面的大括号里继续输入英文引号,把给出的提示都选择一遍,同样要注意每一个语句后面要加逗号,如图所示。


        把鼠标移动到每个代码上,会有提示告诉你这一行是设置哪一部分的颜色。鼠标指向后面的颜色代码,会弹出一个颜色选择器,根据需要选择自己喜欢的颜色即可。

     对于不好合成的颜色,可以直接查询颜色代码。链接:HTML 颜色 (w3school.com.cn)

 每行的对应的区域


“comments”:注释颜色
“functions”:函数/方法定义与引用颜色
“keywords”:关键字颜色,如new, if, else, try等
“numbers”:数字的颜色
“strings”:字符串的颜色
“types”:类型定义与引用的颜色
“variables”:变量的颜色
“textMateRules”:其他具体的颜色设置

对于textMateRules代码块的编辑

这里先放一下我的设置

"textMateRules": [
                {
                    "scope": "keyword.control",//if ,else, try 等控制符
                    "settings": {
                        "foreground": "#C586C0"
                    }
                },
                {
                    "scope": "keyword.operator",//算数符
                    "settings": {
                        "foreground": "#f07d3b"
                    }
                },
                {
                    "scope": "storage.modifier",//修饰语
                    "settings": {
                        "foreground": "#f09090"
                    }
                },
                {
                    "scope": "entity.name.type.class",//类名
                    "settings": {
                        "foreground": "#c0526a"
                    }
                },
                {
                    "scope": "storage.type.primitive.java",//int和其他啥啥,忘记了
                    "settings": {
                        "foreground": "#c0526a"
                    }
                },
                {
                    "scope": "entity.name.type.interface",//接口
                    "settings": {
                        "foreground": "#c0526a"
                    }
                },
                {
                    "scope": "entity.name.namespace",//导入部分
                    "settings": {
                        "foreground": "#74817c"
                    }
                },
                {
                    "scope": "entity.name.tag",//html标签
                    "settings": {
                        "foreground": "#d35c5c"
                    }
                }
            ]

       这里的每一块代表一个具体的代码颜色设置,具体的意思是颜色设置的应用范围比较精确。
代码中的"scope"表示下面"settings"的应用范围,上面代码中用到的我已经标了注释,需要修改的话直接搬过去就好。

       如果里面没有你要找的部分,你可以打开你的项目代码页面,按【F1】,搜索【developer:inspect editor tokens and scopes】打开标记作用域查看器,之后点击代码中你要修改颜色的地方,查看【foreground】处的作用域,复制下来粘贴到【settings.json】"scope"后的引号里,就可以把颜色设置应用到对应位置。

 标记的这一行就是作用域

 

编辑器其他的主题颜色设置

   
        如果你只是想改代码的显示颜色,上面的教程看完已经足够了,下面的教程是如何修改整个编辑器的主题颜色,方法比较类似。此设置的代码块标题为

"workbench.colorCustomizations": {}

       里面也需要先写当前主题名称,这个里面可以设置的东西就很多了,你可以输入" "之后先择给出的代码提示,然后鼠标指向它看提示来确定具体是哪里的设置,我这里只改了编辑器默认前景色,其他的就自行体验试试就好了。这里贴一下官方文档的设置教程,如果我的博客没有解决你的问题,你可以去看一下,里面写的很详细。

链接Theme Color | Visual Studio Code Extension API

本文原创来源http://t.csdn.cn/Q7IJm

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值