如何自定义VSCode中id属性颜色及用Emmet生成带属性HTML元素？

一、让HTML的id属性显示特定颜色 #

不用额外找主题，直接在VSCode里自定义语法高亮规则即可。在你的settings.json中添加editor.tokenColorCustomizations配置，针对HTML的id属性设置专属颜色：

修改后的完整settings.json如下：

"editor.fontFamily": "'JetBrains Mono', Consolas, monospace",
"editor.fontLigatures": true,
"editor.letterSpacing": 0.4,
"editor.smoothScrolling": true,
"workbench.iconTheme": "material-icon-theme",

"workbench.colorCustomizations": {
    "editor.background": "#232323",
    "sideBar.background": "#272727",
    "sideBar.foreground": "#C9C9C9",
    "editor.foreground": "#C9C9C9",
    "statusBar.background": "#272727",
    "activityBar.background": "#232323",
    "titleBar.activeBackground": "#232323"
},
// 新增id属性颜色定制
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "meta.attribute.id.html",
            "settings": {
                "foreground": "#99FFFF"
            }
        }
    ]
},
"window.zoomLevel": 1,
"emmet.triggerExpansionOnTab": true,
"emmet.showSuggestionsAsSnippets": true,
"editor.snippetSuggestions": "top"

设置完成后，HTML中的id属性就会显示你想要的#99FFFF颜色。

二、Emmet常用语法示例（含你需要的input生成方法） #

目标input的生成代码 #

直接输入以下Emmet缩写，按Tab键即可生成带指定属性的input元素：

input[type=text name=user_id id=userInput placeholder="请输入用户名"]

展开后的效果：

<input type="text" name="user_id" id="userInput" placeholder="请输入用户名">

常用Emmet速查示例 #

• 带class和id的容器：div.container#main → <div class="container" id="main"></div>
• 嵌套结构：div>ul>li*3 → 生成包含3个li标签的ul，嵌套在div内
• 带文本内容的元素：p{这是一段示例文本} → <p>这是一段示例文本</p>
• 批量生成重复元素：button.btn*2 → 生成2个带btn类的button标签
• 自定义多属性元素：a[href="/index" title="首页"] → <a href="/index" title="首页"></a>

内容的提问来源于stack exchange，提问作者Eduard