vscode原生不支持html标签名大小写转换,其transform to uppercase/lowercase命令仅做字符级映射,无法识别标签结构;需借助change case插件的“lowercase tag names”命令,仅转换标签名、保留属性及内容不变。

VSCode原生不支持HTML标签名大小写转换
VSCode 内置的 Transform to Uppercase 和 Transform to Lowercase 命令只对选中文本做字符级大小写映射,不会识别 HTML 标签结构。比如选中 <div><span> 执行转小写,结果是 <code><div><span>(原本就小写),而 <code><div><span> 会变成 <code><div><span>——但它不管标签是否合法、是否嵌套、是否含属性,纯当普通字符串处理。
<p>也就是说:你不能靠原生命令把 <code><input type="TEXT"> 变成 <input type="text">,因为属性值和引号内内容也会被误转(TYPE → type 没问题,但 "TEXT" → "text" 就违反了 HTML 规范)。
真正能安全转换HTML标签大小写的插件只有少数几个
目前稳定可用、专注 HTML 标签规范的插件极少,推荐以下两个(2026 年实测兼容 VSCode 1.118):
-
Auto Close Tag:本身不提供大小写转换,但配合
editor.action.transformToLowercase使用时,能避免因标签未闭合导致的选区错位; - HTML Boilerplate:无此功能;
-
Change Case(by wmaurer):支持
lowercase tag names和uppercase tag names两条独立命令,**只改开始/结束标签名中的字母,保留属性名、属性值、注释、文本内容不变**。例如:<div id="A" class="B">Hello</div>→<div id="A" class="B">Hello</div>。
安装后,在命令面板(Ctrl+Shift+P)输入 Change Case: Lowercase Tag Names 即可触发——它会自动识别当前光标所在或选中的 HTML 标签范围,不是全文本暴力替换。
为什么别用正则查找替换强行改HTML标签大小写
有人试图用 Ctrl+H + 正则匹配 然后替换成 <code>,但这在 VSCode 中无效:<code>\L 不被支持,且正则无法区分标签名和属性名(比如 <input type="text"> 会被匹配两次,input 和 TYPE 都中招)。
更危险的是:正则无法识别自闭合标签(<img>)、条件注释(











