VSCode JS主题风格与样式环境配置 settings.json 文件配置 完成 webstorm风格化配置

webstorm 很好用，但破解版难找，有些功能可能还存在问题（本人用的破解版在全局搜索上不对），而学生认证暂时的，因此不如直接把VScode 配置成webstorm样式，风格化很接近了。有注释参考。

VSCode JS环境配置 settings.json 文件配置 以及完成 webstorm风格化配置配置如下:

{
    "window.zoomLevel": 1,
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "open-in-browser.default": "{\"open-in-browser.default\":\"Chrome\"}",
    "[css]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "workbench.editor.splitInGroupLayout": "vertical",
    "window.commandCenter": false,
    "git.autofetch": true,
    "git.enableSmartCommit": true,
    "editor.fontFamily": "JetBrains Mono NL, 'Courier New', monospace",
    "editor.fontSize": 13,

    "editor.tokenColorCustomizations": {
        "comments": "#7d7e7d", // 注释
        "keywords": "#C87731", // 关键字
        "variables": "#9775A7", // 变量名
        "strings": "#62875b", // 字符串
        "types": "#C87731", //代表着类型的颜色
        "functions": "#FFC35A", // 函数名
        "numbers": "#6897BB", // 数字
        "textMateRules": [
            {
                "scope": "keyword.control", //if ,else, try 等控制符
                "settings": {
                    "foreground": "#C87731"
                }
            },
            {
                "scope": "keyword.operator", //算数符
                "settings": {
                    "foreground": "#f0cb8b"
                }
            },
            {
                "scope": "storage.modifier", //修饰语
                "settings": {
                    "foreground": "#f0cb8b"
                }
            },
            {
                "scope": "entity.name.type.class", //类名
                "settings": {
                    "foreground": "#9775A7"
                }
            },
            {
                "scope": "storage.type.primitive.java", //int和其他啥啥，忘记了
                "settings": {
                    "foreground": "#C87731"
                }
            },
            {
                "scope": "entity.name.type.interface", //接口
                "settings": {
                    "foreground": "#52c057"
                }
            },
            {
                "scope": "entity.name.namespace", //导入部分
                "settings": {
                    "foreground": "#8ca249"
                }
            },
            {
                "scope": "entity.name.tag", //html标签
                "settings": {
                    "foreground": "#f0cb8b"
                }
            },
            {
                "scope": "entity.other.attribute-name", //html内容
                "settings": {
                    "foreground": "#9fb659"
                }
            },
            {
                "scope": "keyword.operator.new", //
                "settings": {
                    "foreground": "#21a25f"
                }
            },
            {
                "scope": "storage.type", //
                "settings": {
                    "foreground": "#C87731"
                }
            },
            {
                "scope": "meta.function", //length 分号， 点号 颜色
                "settings": {
                    "foreground": "#9fb659"
                }
            },
            {
                "scope": "meta.function-call", //  函数 点号 颜色
                "settings": {
                    "foreground": "#9775A7"
                }
            },
            {
                "scope": "meta.tag", //  函数 点号 颜色
                "settings": {
                    "foreground": "#75a78a"
                }
            },
            {
                "scope": "punctuation.separator",//逗号 冒号
                "settings": {
                    "foreground": "#A1ACC6"
                }
            },
         
           {
                "scope": "variable.name",//
                "settings": {
                    "foreground": "#9775A7"
                }
            },
            {
                "scope": "variable.other",//
                "settings": {
                    "foreground": "#f35c37"
                }
            },
        ]
    },
    //部分主题有效
    "editor.semanticTokenColorCustomizations": {
        "enabled": true, // enable for all themes
        "rules": {
            "*.static": {
                "foreground": "#9775A7",
                "fontStyle": "bold"
            },
            "property": { //属性
                "foreground": "#9775A7",
                "fontStyle": "bold"
            },
            "macro": { //宏
                "foreground": "#9775A7",
                "fontStyle": "bold"
            },
            "function": { //函数
                "foreground": "#FFC35A",
                "fontStyle": "bold"
            },
            "variable.global": { //全局变量
                "foreground": "#9775A7",
                "fontStyle": "italic"
            },
            "variable.local": { //局部变量
                "foreground": "#9775A7",
                "fontStyle": "bold"
            },
        }
    },
    
    "workbench.colorCustomizations": {
        "editor.selectionBackground": "#72816a80",//选中背景色
        // 括号颜色
        "editorBracketHighlight.foreground1": "#b7c4e4", //background背景色， border框颜色
        "editorBracketHighlight.foreground2": "#A1ACC6",
        "editorBracketHighlight.foreground3": "#778097",
        "editorBracketHighlight.foreground4": "#A1ACC6",
        "editorBracketHighlight.foreground5": "#515f7f",
        "editorBracketHighlight.foreground6": "#A1ACC6",
        "editorBracketMatch.border": "#FFC35A", //括号匹配色
        "editorBracketHighlight.unexpectedBracket.foreground": "#e848b5", //错误括号
    },

    "workbench.colorTheme": "JetBrains Darcula Theme",
    "workbench.iconTheme": "webstorm-icons",
    "workbench.startupEditor": "none",
    "editor.indentSize": "tabSize",
    "[python]": {
        "editor.formatOnType": true
    },
    "editor.fontWeight": "normal",
}

结果主题预览

好了，希望对你有所帮助 ！