VSCode怎么自定义设置主题和代码颜色

发布时间 - 2021-12-10 00:00:00    点击率:

怎么自定义设置vscode编辑器的主题和代码颜色?下面本篇文章就来给大家介绍一下修改主题和代码颜色的方法,希望对大家有所帮助!

在VS Code 的左下角,点击设置。

打开设置后,在搜索栏搜索关键字:主题。

搜索结果显示有许多个在setting.json中编辑,任意点开一个,即可编辑代码的颜色。【推荐学习:《vscode入门教程》】

在文件setting.json的代码后面,插入相应的代码,然后保存。

代码如下:

    // 自定义的颜色
    "editor.tokenColorCustomizations": {
        "comments": "#55aa7f", // 注释
        "keywords": "#ff55ff", // 关键字
        "variables": "#a792e2", // 变量名 
        "strings": "#00ff7f", // 字符串
        "functions": "#ffff00", // 内置函数名
        "numbers": "#00eeff", // 数字
        "types": "#55bbff", //类定义颜色
    },

你会发现编辑器里的代码颜色随之改变了。

发现引号的颜色,还是不太喜欢,于是又找了许久资料,继续折腾。

//文本匹配规则后面的代码,会覆盖前面的颜色设置代码。
// 自定义的颜色
    "editor.tokenColorCustomizations": {
        "comments": "#55aa7f", // 注释
        "keywords": "#ff55ff", // 关键字
        "variables": "#5eccf8", // 变量名 函数的参数名 
        "strings": "#00ff7f", // 字符串
        "functions": "#ffbb00", // 自定义及内置的函数名称 如:print
        "numbers": "#00eeff", // 数字
        "types": "#55bbff", //类定义颜色
        //文本匹配规则
        "textMateRules": [
            //entity.name.function",                    //直接调用的函数
            //entity.name.type",                        //typedef定义的变量
            //keyword.control",                         //if switch break return
            //keyword.operator.assignment",             // =等号/赋值号 |= &=
            //"keyword.operator.logical",               //逻辑符号 && || !
            //"constant.character.escape",              //"\r\n"\
            //constant.other.placeholder",              //"%s %c"
            //punctuation.definition.comment",          // // /*注释开头
            //constant.numeric",                        //数字:50 10  0x20的20部分
            //keyword.operator.word                     //and or not
            //"scope":"meta",                           //括号 函数声明的括号 调用的括号...
            //punctuation.separator",                   //冒号 逗号
            //punctuation.terminator",                  //分号
            //storage.modifier",                        //static const
            //string.quoted.single",                    //单引号字符串
            //string.quoted.double",                    //双引号字符串
            //string.quoted.triple",                    //三引号字符串
            //"storage.type",                           //void int char 
            //"punctuation.definition.string.begin",    //左双引号
            //"punctuation.definition.string.end",      //右双引号
            //##########################################################################
            //系统内置的函数名称的颜色 如:print len 
            {
                "scope": "support.function",
                "settings": {
                    "foreground": "#ffbb00",
                }
            },
            //类的名称颜色 如class abc() 中的abc
            {
                "scope": "entity.name.type", //函数和类的名称颜色
                "settings": {
                    "foreground": "#14fff3",
                }
            },
            //类和函数的定义单词颜色 def class
            {
                "scope": "storage.type", //void int char 
                "settings": {
                    "foreground": "#ff00c8",
                }
            },
            //不知道是什么
            {
                "scope": "storage.modifier", //static const
                "settings": {
                    "foreground": "#ffe600de",
                }
            },
            //运算符号,如 +-*/=
            {
                "scope": "keyword.operator", //=等号/赋值号 |= &=
                "settings": {
                    "foreground": "#ff55ff",
                }
            },
            // 系统的控制关键词:如 if pass return f
            {
                "scope": "keyword.control", //if switch break return
                "settings": {
                    "foreground": "#ff00c8",
                    "fontStyle": ""
                }
            },
            //逻辑符号:如 and  or 
            {
                "scope": "keyword.operator.logical", //逻辑符号 && || !
                "settings": {
                    "foreground": "#ff00c8",
                    "fontStyle": ""
                }
            },
            //换行符、转义符等如 :\r \n
            {
                "scope": "constant.character.escape", //"\r\n"
                "settings": {
                    "foreground": "#ee5050",
                    "fontStyle": ""
                }
            },
            //不知道是什么
            {
                "scope": "variable.other", //结构体对象和成员等
                "settings": { //VSCode使用C的颜色限制,这一点比较坑
                    "foreground": "#4f1eff", //比如Public.Delay(),颜色是一起变得
                    "fontStyle": "" //不能单独设置Public和Delay的显示颜色
                } //可能因为VS Code主要用于前端,对C的支持不够完善
            },
            //函数的参数名称
            {
                "scope": "variable.parameter", //函数参数-定义阶段
                "settings": {
                    "foreground": "#5eccf8",
                    "fontStyle": ""
                }
            },
            {
                "scope": "entity.name.section", //函数参数-调用阶段
                "settings": {
                    "foreground": "#ff0000",
                    "fontStyle": ""
                }
            },
            // 左单双引号
            {
                "scope": "punctuation.definition.string.begin",
                "settings": {
                    "foreground": "#00ff7f",
                    "fontStyle": "bold"
                }
            },
            //右单双引号
            {
                "scope": "punctuation.definition.string.end",
                "settings": {
                    "foreground": "#00ff7f",
                    "fontStyle": "bold" //加粗
                }
            },
            {
                "scope": [
                    "constant.other.symbol",
                ],
                "settings": {
                    "foreground": "#ff0000"
                }
            }
        ]
    },

现在变成了这样子:

成功修改了引号的颜色。但是True、None等系统保留字还是不知道怎么修改。

先这样吧,基本可用了!

对我而言,颜值第一,赏心悦目的重要性,永远靠前!

更多关于VSCode的相关知识,请访问:vscode教程!!


# vscode  # json  # 关键词  # 自定义  # 双引号  # 变量名  # 对我  # 不太  # 有许多  # 用了  # 给大家  # 搜索结果 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: ,怎么在广州志愿者网站注册?  新三国志曹操传主线渭水交兵攻略  Laravel如何实现全文搜索_Laravel Scout集成Algolia或Meilisearch教程  在线教育网站制作平台,山西立德教育官网?  JavaScript如何实现音频处理_Web Audio API如何工作?  如何用好域名打造高点击率的自主建站?  高防服务器租用首荐平台,企业级优惠套餐快速部署  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  浅述节点的创建及常见功能的实现  Laravel API路由如何设计_Laravel构建RESTful API的路由最佳实践  googleplay官方入口在哪里_Google Play官方商店快速入口指南  Laravel策略(Policy)如何控制权限_Laravel Gates与Policies实现用户授权  Laravel Seeder怎么填充数据_Laravel数据库填充器的使用方法与技巧  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  深圳网站制作培训,深圳哪些招聘网站比较好?  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  Laravel DB事务怎么使用_Laravel数据库事务回滚操作  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  iOS发送验证码倒计时应用  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  Laravel如何集成Inertia.js与Vue/React?(安装配置)  详解Huffman编码算法之Java实现  Java垃圾回收器的方法和原理总结  深圳网站制作的公司有哪些,dido官方网站?  Laravel事件监听器怎么写_Laravel Event和Listener使用教程  Laravel如何使用Eloquent进行子查询  JavaScript中如何操作剪贴板_ClipboardAPI怎么用  jquery插件bootstrapValidator表单验证详解  Android 常见的图片加载框架详细介绍  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  成都网站制作公司哪家好,四川省职工服务网是做什么用?  Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】  如何用狗爹虚拟主机快速搭建网站?  Laravel如何实现RSS订阅源功能_Laravel动态生成网站XML格式订阅内容【教程】  Laravel如何使用Telescope进行调试?(安装和使用教程)  如何在云虚拟主机上快速搭建个人网站?  Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】  Laravel如何集成微信支付SDK_Laravel使用yansongda-pay实现扫码支付【实战】  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  Laravel怎么实现模型属性转换Casting_Laravel自动将JSON字段转为数组【技巧】  laravel怎么使用数据库工厂(Factory)生成带有关联模型的数据_laravel Factory生成关联数据方法  Laravel怎么实现微信登录_Laravel Socialite第三方登录集成  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  Laravel数据库迁移怎么用_Laravel Migration管理数据库结构的正确姿势  CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】  夸克浏览器网页跳转延迟怎么办 夸克浏览器跳转优化  Gemini手机端怎么发图片_Gemini手机端发图方法【步骤】  如何在服务器上三步完成建站并提升流量?