【vscode】setting.json设置代码，手动修改vscode主题

爱吃馄饨的云吞

已于 2024-03-20 11:59:41 修改

阅读量1k

点赞数 6

文章标签： vscode ide 编辑器

于 2024-02-18 16:59:09 首次发布

本文链接：https://blog.csdn.net/weixin_56105633/article/details/136155156

版权

本文档介绍了如何在VisualStudioCode(VSCode)中操作setting.json文件，包括打开设置面板、详细设置`setting.json`的示例以及对字体、主题颜色和编辑器外观的自定义配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vscode官方文档
↑参考文档

记录——修改vscode主题

如何打开setting.json的面板

在这里插入图片描述

setting.json的详细设置

在setting.json修改

   "workbench.colorTheme": "Default Light+",
    "wordcount_cjk.statusBarTextTemplate": "共${total - whitespace}字",
    "editor.fontVariations": false,
    // "editor.fontWeight": "bold",
    "editor.fontFamily": "仿宋",
    "editor.fontSize": 18,
    "editor.background": "#b0dab6",
    "window.zoomLevel": 1,

    // 自己网上扒拉的修改的↓
    // 字体设置代码块
    "editor.tokenColorCustomizations": {
         //更改当前所选主题的字体颜色色
        "[Default Light+]": { //更改主题名称
            "comments": "#668c2f", // 注释
            // "keywords": "#0a0", // 关键字，if, else, try等
            // "variables": "#f00", // 变量名
            // "strings": "#e2d75dbd", // 字符串
            // "functions": "#5b99fcc9", // 函数名
            // "numbers": "#3b7017c8" // 数字
        }
    },
    //修改整个编辑器的主题颜色
    "workbench.colorCustomizations": { // 颜色设置
        "[Default Light+]": { //更改主题名称
            "foreground": "#7d7f7d",//字体颜色
            "editor.background": "#e2ead4", //背景颜色
            "editor.selectionBackground": "#bfc5b5",//选中字体
            "editor.selectionForeground":"#ff0000",
            "editor.selectionHighlightBorder": "#d0d0e6",
            "editor.lineHighlightBorder": "#00000000",//完全透明
            "editor.lineHighlightBackground": "#00000000",
            "editorLineNumber.foreground":"#72a586",
            "editor.wordHighlightBackground":"#00000000",//例如读取变量时

            "sideBar.background": "#eef4e5", //侧边栏背景色
            "terminal.background": "#cde8bf",

            "titleBar.activeBackground": "#e2ead4",

            // "tab.activeBackground": "#7c957a",//活动组中的活动选项卡背景颜色。
            // "tab.unfocusedActiveBackground": "#898acf",
            "tab.border": "#bfc2c0",
            "tab.hoverBackground": "#9cbb93",

            // 滚动条
            "scrollbarSlider.background": "#61785c", // 设置滑条颜色
            "scrollbarSlider.hoverBackground": "#345b34", // 设置鼠标悬停时滑条颜色
             "scrollbarSlider.activeBackground": "#577266" ,// 设置滑条被点击时颜色

            // 底部状态栏
             "statusBar.background": "#1A1A1A",
             "statusBar.noFolderBackground": "#0A0A0D",
             "statusBar.debuggingBackground": "#511f1f"
        }
    },

预览效果

在这里插入图片描述

我的完整的setting.json配置，我自己使用的，放在这，怕哪天我弄丢了

{
    "liveServer.settings.CustomBrowser": "microsoft-edge",
    "liveServer.settings.donotShowInfoMsg": true,
    "files.autoSave": "afterDelay",
    "emmet.syntaxProfiles": {

    },
    "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?，。‘’“”：；·《》？！…—￥{}【】（）、",
    "editor.wordWrap": "on",
    "json.schemas": [

    ],
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "cSpell.userWords": [],
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "less.compile": {
        "compress": false,//是否压缩
        "sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
        "out": true, // 是否输出css文件，false为不输出
        "outExt": ".css", // 输出文件的后缀,小程序可以写‘wxss‘
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[plaintext]": {
        "editor.wrappingIndent": "none",
        "editor.autoIndent": "none",
        "editor.wordWrap": "bounded",
        
    },
    "workbench.colorTheme": "Default Light+",
    "wordcount_cjk.statusBarTextTemplate": "共${total - whitespace}字",
    "editor.fontVariations": false,
    // "editor.fontWeight": "bold",
    "editor.fontFamily": "仿宋",
    "editor.fontSize": 18,
    "editor.background": "#b0dab6",
    "window.zoomLevel": 1,

    // 自己网上扒拉的修改的↓
    // 字体设置代码块
    "editor.tokenColorCustomizations": {
         //更改当前所选主题的字体颜色色
        "[Default Light+]": { //更改主题名称
            "comments": "#668c2f", // 注释
            // "keywords": "#0a0", // 关键字，if, else, try等
            // "variables": "#f00", // 变量名
            // "strings": "#e2d75dbd", // 字符串
            // "functions": "#5b99fcc9", // 函数名
            // "numbers": "#3b7017c8" // 数字
        }
    },
    //修改整个编辑器的主题颜色
    "workbench.colorCustomizations": { // 颜色设置
        "[Default Light+]": { //更改主题名称
            "foreground": "#7d7f7d",//字体颜色
            "editor.background": "#e2ead4", //背景颜色
            "editor.selectionBackground": "#bfc5b5",//选中字体
            "editor.selectionForeground":"#ff0000",
            "editor.selectionHighlightBorder": "#d0d0e6",
            "editor.lineHighlightBorder": "#00000000",//完全透明
            "editor.lineHighlightBackground": "#00000000",
            "editorLineNumber.foreground":"#72a586",
            "editor.wordHighlightBackground":"#00000000",//

            "sideBar.background": "#eef4e5", //侧边栏背景色
            "terminal.background": "#cde8bf",

            "titleBar.activeBackground": "#e2ead4",

            // "tab.activeBackground": "#7c957a",//活动组中的活动选项卡背景颜色。
            // "tab.unfocusedActiveBackground": "#898acf",
            "tab.border": "#bfc2c0",
            "tab.hoverBackground": "#9cbb93",

            // 滚动条
            "scrollbarSlider.background": "#61785c", // 设置滑条颜色
            "scrollbarSlider.hoverBackground": "#345b34", // 设置鼠标悬停时滑条颜色
             "scrollbarSlider.activeBackground": "#577266" ,// 设置滑条被点击时颜色

            // 底部状态栏
             "statusBar.background": "#1A1A1A",
             "statusBar.noFolderBackground": "#0A0A0D",
             "statusBar.debuggingBackground": "#511f1f"
        }
    }

}