VSCode怎么自定義設置主題和代碼顏色

本篇文章為大家展示了VSCode怎么自定義設置主題和代碼顏色，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

在VS Code 的左下角，點擊設置。

打開設置后，在搜索欄搜索關鍵字：主題。

搜索結果顯示有許多個在setting.json中編輯，任意點開一個，即可編輯代碼的顏色。

在文件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"
                }
            }
        ]
    },

上述內容就是VSCode怎么自定義設置主題和代碼顏色，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。