VS Code 大小写转换:内置命令、快捷键和扩展

VS Code 内置了七个转换大小写的命令:Transform to Uppercase、Lowercase、Title Case、Snake Case、Camel Case、Kebab Case 和 Pascal Case。选中一段文字,按 Ctrl+Shift+P(Mac 上是 Cmd+Shift+P)打开命令面板,输入 “transform”,再选一个命令就行。这些命令默认都没有键盘快捷键,所以如果你经常用,可以在 keybindings.json 里自己绑定。需要的内容下面都有。
这些命令有几个特别之处,最好在对整个文件运行之前先了解。所以我们先讲每个命令实际做了什么,再讲快捷键,然后讲填补空缺的两个技巧:正则替换和代码片段(snippet)转换。扩展放在最后,因为你可能根本用不上。
VS Code 内置的大小写命令
这份列表这些年一直在增加。如果命令面板里找不到某个命令,请在 Help 菜单的 About 里查看你的版本(Mac 上是 Code 菜单的 About)。
| 命令面板中的名称 | 命令 ID | 引入版本 |
|---|---|---|
| Transform to Uppercase | editor.action.transformToUppercase | 很早就有 |
| Transform to Lowercase | editor.action.transformToLowercase | 很早就有 |
| Transform to Title Case | editor.action.transformToTitlecase | 1.34 |
| Transform to Snake Case | editor.action.transformToSnakecase | 1.53 |
| Transform to Kebab Case | editor.action.transformToKebabcase | 1.69 |
| Transform to Camel Case | editor.action.transformToCamelcase | 1.75 |
| Transform to Pascal Case | editor.action.transformToPascalcase | 1.88 |
请仔细看这些 ID:是 transformToSnakecase,其中的 c 是小写,而不是 transformToSnakeCase。写键位绑定时要原样复制,否则快捷键会毫无反应,也不会报错。
这些命令有两个特点,用起来比看上去更顺手。没有选中任何内容时,命令会转换光标所在的单词,所以你可以直接点进 userId 运行 Snake Case,不用先选中。有多个光标或多处选区时,每一处会分别转换。
每个命令实际做了什么
这几个命令拆分单词的方式各不相同,这一点很容易忽略。下面是它们在当前版本中的输出(我们对照 VS Code 的源码核实过):
| 输入 | Snake | Kebab | Camel | Pascal | Title |
|---|---|---|---|---|---|
hello world | hello world | hello world | helloWorld | HelloWorld | Hello World |
userID | user_id | user-id | userID | UserID | Userid |
USER_ID | user_id | user-id | USERID | UserId | User_Id |
XMLHttpRequest | xml_http_request | xml-http-request | XMLHttpRequest | XMLHttpRequest | Xmlhttprequest |
这张表背后的规律如下:
- Snake Case 和 Kebab Case 只在大小写变化的位置拆分。它们能很好地处理缩写,但空格依然是空格,所以
hello world只是被转成了小写。Kebab Case 还会把下划线变成连字符,Snake Case 则不动连字符。 - Camel Case 和 Pascal Case 按空格、下划线和连字符拆分,并把每一段的首字母大写,但 Camel Case 不会把单词的其余部分转成小写。这就是
USER_ID会变成USERID的原因。Pascal Case 则会规范全大写的单词,得到UserId。(不确定你的代码该用哪一种?请看我们的 camelCase 与 PascalCase 对比。) - Title Case 会把每个单词的首字母都大写,连 of 这样的小词也不例外,其余字母则全部转成小写:
the lord of the rings会变成The Lord Of The Rings。它是为快速修补准备的,不适合用来处理英文标题。撇号的处理倒是合理:don't会变成Don't。
所以,要把 Shipping Address Line 2 这样的短语变成 snake_case,先运行 Camel Case,再运行 Snake Case,就得到 shipping_address_line2。或者把它粘贴到我们的大小写转换器里,它一步就能按空格、标点和大小写变化拆分,还提供 VS Code 没有的 CONSTANT_CASE。
在 keybindings.json 中添加键盘快捷键
只设一两个快捷键的话,用键盘快捷方式编辑器(Keyboard Shortcuts editor)就够了:依次按 Ctrl+K、Ctrl+S(Mac 上是 Cmd+K Cmd+S),搜索 “transform”,双击某个命令,再按下你想用的按键。要设置全套的话,直接改文件更快。在命令面板里运行 Preferences: Open Keyboard Shortcuts (JSON),然后把下面这些条目加到方括号里:
{ "key": "ctrl+k shift+u", "command": "editor.action.transformToUppercase", "when": "editorTextFocus" },
{ "key": "ctrl+k shift+l", "command": "editor.action.transformToLowercase", "when": "editorTextFocus" },
{ "key": "ctrl+k shift+t", "command": "editor.action.transformToTitlecase", "when": "editorTextFocus" },
{ "key": "ctrl+k shift+s", "command": "editor.action.transformToSnakecase", "when": "editorTextFocus" },
{ "key": "ctrl+k shift+c", "command": "editor.action.transformToCamelcase", "when": "editorTextFocus" },
{ "key": "ctrl+k shift+p", "command": "editor.action.transformToPascalcase", "when": "editorTextFocus" },
{ "key": "ctrl+k shift+k", "command": "editor.action.transformToKebabcase", "when": "editorTextFocus" }这些是连按式组合键(chord):先按 Ctrl+K,松开,再按 Shift+U。我们选 Ctrl+K 作前缀,是因为 VS Code 本来就用它来触发编辑器命令,而且在当前版本中,这七个组合都没有被默认键位占用。在 Mac 上,要把 ctrl+k 改写成 cmd+k。不要保留 ctrl+k:它在 macOS 上绑定的是 Delete All Right,以它开头的组合键会受到干扰。如果某个快捷键哪天失灵了,多半是某个扩展占用了同样的按键;在键盘快捷方式编辑器里搜索这些按键,就能查出是哪一个。
用正则替换改变大小写
要改整个文件或整个项目,就用带正则表达式的查找和替换。按 Ctrl+H(Mac 上是 Cmd+Option+F)打开替换,按 Alt+R(Mac 上是 Cmd+Option+R)开启正则模式,然后在分组前面加上 \u、\U、\l 或 \L。查找 _([a-z]),替换为 \U$1,就能把 user_id 变成 userId。在文件中替换(Replace in Files)里同样可用(Ctrl+Shift+H,Mac 上是 Cmd+Shift+H)。
和 sed、Perl 有一处不同,容易让人栽跟头:在 VS Code 里,每个转义只作用于紧随其后的那个分组,所以 \U$1_$2 只会把 $1 转成大写,$2 保持原样,而且没有 \E。我们的正则表达式大小写转换速查表里有经过测试的写法,还有与其他工具的对比。
代码片段转换:能处理空格的 snake_case
代码片段(snippet)也能转换文本。从 VS Code 1.108 起,它们的格式选项除了较早就有的 /upcase、/downcase、/capitalize、/camelcase 和 /pascalcase,还新增了 /snakecase 和 /kebabcase。它的 snake_case 规则和那个命令不同:会把空格和连字符都变成下划线。用 editor.action.insertSnippet 把它绑定到某个按键,就能替换选中的内容:
{
"key": "ctrl+k shift+n",
"command": "editor.action.insertSnippet",
"when": "editorTextFocus && editorHasSelection",
"args": { "snippet": "${TM_SELECTED_TEXT/(.*)/${1:/snakecase}/}" }
}选中 Shipping Address Line 2,按下快捷键,就会得到 shipping_address_line_2。代价出在缩写上:这个版本会把 XMLHttpRequest 转成 xmlhttp_request,而内置命令能正确处理。另外,它只会转换多行选区的第一行,因为 . 不匹配换行符。换成 /kebabcase,就是 kebab 版本。
其余需求交给扩展
内置命令不支持 CONSTANT_CASE、dot.case、path/case,也不能做大小写反转。有两款流行的扩展可以:
- change-case(发布者 wmaurer)封装了 JavaScript 库 change-case。它新增了 camel、constant、dot、kebab、lower、lowerFirst、no、param、pascal、path、sentence、snake、swap、title、upper 和 upperFirst 这些命令,还有一个 Change Case Commands 选择器,选中单个单词时,它会预览每种转换的结果。
- Text Power Tools(作者 Dániel Tar)是一个更全面的工具箱,包含 240 多个文本命令。大小写转换只是其中一部分,涵盖 camelCase、PascalCase、snake_case、CONSTANT_CASE、dash-case、dot.case 和 Title Case,此外还有行过滤、排序和数字序列。
我们的看法是:如果只需要这七种内置风格,就不用装扩展,直接绑定快捷键。如果每天都要用到 CONSTANT_CASE,就装 change-case,因为一条命令总比先 Snake Case 再 Uppercase 省事。
最后是一份简短的设置清单:确认你的版本是 1.88 或更高,这样七个命令才齐全;粘贴那七条键位绑定(Mac 上用 cmd+k);如果经常转换短语,再加上代码片段的绑定;写英文标题时,改用专门的标题大写(Title Case)工具。


