VSCode JS theme style and style environment configuration settings.json file configuration completes webstorm stylized configuration

webstorm is easy to use, but the cracked version is hard to find, and some functions may still have problems (the cracked version I used is not correct in the global search), and the student certification is temporary, so it is better to directly configure VScode into webstorm style, the style is very close . There are annotated references.

VSCode JS environment configuration settings.json file configuration and complete webstorm style configuration configuration are as follows:

{
    "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",
}

Result topic preview

Ok, hope this helps!