首頁 > 開發工具 > VSCode > VSCode怎麼自訂設定主題和程式碼顏色

VSCode怎麼自訂設定主題和程式碼顏色

青灯夜游
發布: 2022-01-06 19:01:21
轉載
26607 人瀏覽過

怎麼自訂設定VSCode編輯器的主題和程式碼顏色?以下這篇文章就來跟大家介紹一下修改主題和程式碼顏色的方法,希望對大家有幫助!

VSCode怎麼自訂設定主題和程式碼顏色

在VS Code 的左下角,點選設定。

VSCode怎麼自訂設定主題和程式碼顏色

開啟設定後,在搜尋欄搜尋關鍵字:主題。

搜尋結果顯示有許多個在setting.json中編輯,任意點開一個,即可編輯程式碼的顏色。 【推薦學習:《vscode入門教學》】

VSCode怎麼自訂設定主題和程式碼顏色

#在檔案setting.json的程式碼後面,插入對應的程式碼,然後儲存。

VSCode怎麼自訂設定主題和程式碼顏色

程式碼如下:

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

你會發現編輯器裡的程式碼顏色隨之改變了。

VSCode怎麼自訂設定主題和程式碼顏色

發現引號的顏色,還是不太喜歡,於是又找了許久資料,繼續折騰。

//文字符合規則後面的程式碼,會覆蓋前面的顏色設定程式碼。

// 自定义的颜色
    "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"
                }
            }
        ]
    },
登入後複製

現在變成了這樣子:

VSCode怎麼自訂設定主題和程式碼顏色

#成功修改了引號的顏色。但是True、None等系統保留字還是不知道怎麼修改。

先這樣吧,基本上可用了!

對我而言,顏值第一,賞心悅目的重要性,永遠靠前!

更多關於VSCode的相關知識,請造訪:vscode教學! !

以上是VSCode怎麼自訂設定主題和程式碼顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板