vscode 颜色设置-仿微信小程序主题色

424 阅读1分钟

好看的页面颜色 能让开发事半功倍!

设置在哪儿

打开vscode 找到左上角的code -> 首选项 -> 设置 顶部搜索setting -> 点击工作区 -> 找到settings.json中编辑 点击进来,能看到一个大json,如果当前文件里还没有内容 就新加一个空对象{}。

开始配置 (颜色配置仿微信小程序版)

字体颜色配置

{
    // 字体颜色配置
    "editor.tokenColorCustomizations": {
        "keywords": "#F7E45A",   // 关键字
        "variables": "#D0D0D0",  // 变量名
        "functions": "#FBA54F",  // 函数名s
        "strings": "#F07C6F",    // 字符串
        "numbers": "#DF7569",    // 数字
        "comments": "#7CCD7D" //注释
    }
}

tips1:

当前有个问题 我这边js代码倒是没事 但是 html里有些vue关键字被置为了绿色(注释颜色)

选中背景颜色配置

{
    // 字体颜色配置
    "workbench.colorCustomizations": {
        "editor.selectionBackground": "#11466A",
        "editor.selectionHighlightBackground": "#11466A",
    },
}