VS Code で大文字・小文字を変換する方法:ショートカットと拡張機能

VS Code には、大文字・小文字を変換する標準コマンドが 7 つあります。Transform to Uppercase、Lowercase、Title Case、Snake Case、Camel Case、Kebab Case、Pascal Case です。テキストを選択し、Ctrl+Shift+P(Mac では Cmd+Shift+P)でコマンドパレットを開いて「transform」と入力し、使いたいコマンドを選びます。どのコマンドにも初期設定のキーボードショートカットはないので、よく使うなら keybindings.json に自分で割り当てましょう。その手順も以下で説明します。
これらのコマンドには、ファイル全体に実行する前に知っておきたい癖がいくつかあります。そこで、まず各コマンドが実際に何をするのかを説明し、次にショートカット、そして足りない部分を補う 2 つの方法として正規表現による置換とスニペットの変換を紹介します。拡張機能は最後です。入れなくても済む場合があるからです。
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 です。キー割り当てを書くときは正確にコピーしましょう。1 文字でも違うと、ショートカットはエラーも出さずに何も起こしません。
これらのコマンドには、一見してわかる以上に便利な動作が 2 つあります。何も選択していないときは、カーソル位置にある単語が変換されるので、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 は、短い単語も含めてすべての単語の頭文字を大文字にし、残りは小文字にします。
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 にキーボードショートカットを追加する
ショートカットが 1、2 個なら、Keyboard Shortcuts エディターで足ります。Ctrl+K のあとに Ctrl+S(Mac では Cmd+K Cmd+S)を押し、「transform」で検索して、コマンドをダブルクリックし、割り当てたいキーを押します。7 つすべてを割り当てるなら、ファイルを直接編集するほうが早いです。コマンドパレットから 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" }これらは 2 ストロークのショートカットです。Ctrl+K を押して離し、続けて Shift+U を押します。先頭を Ctrl+K にしたのは、VS Code がエディターのコマンドにすでにこのキーを使っているためで、現行バージョンでは、この 7 つのどれも既定のキー割り当てとは重なりません。Mac では、ctrl+k の代わりに cmd+k と書いてください。ctrl+k のままにしてはいけません。macOS では Delete All Right に割り当てられているため、これで始まるショートカットは邪魔になります。ショートカットが効かなくなったときは、拡張機能が同じキーを使っている可能性が高いです。Keyboard Shortcuts エディターでそのキーを検索すれば、どれが使っているかがわかります。
大文字・小文字の変更を伴う正規表現の置換
ファイル全体やプロジェクト全体にまたがる変更には、正規表現を使った検索と置換を使います。Ctrl+H(Mac では Cmd+Option+F)で置換を開き、Alt+R(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 との違いが 1 つあり、ここでつまずく人が多いです。VS Code では、各エスケープが作用するのは直後のグループだけです。そのため \U$1_$2 は $1 だけを大文字にして $2 には手を加えず、\E もありません。動作確認済みのレシピと他のツールとの比較は、正規表現で大文字・小文字を変換するチートシートにまとめています。
スニペットの変換:スペースも扱える snake_case
スニペットでもテキストを変換できます。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 になりますが、標準コマンドなら正しく変換できます。また、. は改行に一致しないため、複数行を選択した場合は最初の行しか変換されません。kebab-case 版にしたいときは /kebabcase に差し替えてください。
そのほかの変換は拡張機能で
標準コマンドは、CONSTANT_CASE、dot.case、path/case、大文字と小文字の入れ替えには対応していません。人気の拡張機能 2 つが対応しています。
- change-case(発行元は wmaurer)は、JavaScript ライブラリの change-case を利用した拡張機能です。camel、constant、dot、kebab、lower、lowerFirst、no、param、pascal、path、sentence、snake、swap、title、upper、upperFirst のコマンドが加わるほか、1 つの単語を選択しているときに各結果をプレビューできる Change Case Commands ピッカーもあります。
- Text Power Tools(作者は Dániel Tar)は、240 以上のテキストコマンドを備えた幅広いツールボックスです。ケース変換はその一部で、camelCase、PascalCase、snake_case、CONSTANT_CASE、dash-case、dot.case、Title Case に対応し、ほかに行のフィルタリング、並べ替え、連番の生成などもできます。
私たちの考えはこうです。標準の 7 つのスタイルだけで足りるなら、拡張機能は入れずにキーを割り当てれば十分です。CONSTANT_CASE を毎日使うなら change-case を入れましょう。Snake Case のあとに Uppercase を実行するより、1 つのコマンドで済むほうが楽だからです。
セットアップのチェックリストです。7 つのコマンドがすべて使えるよう、バージョンが 1.88 以降であることを確認し、7 つのキー割り当てを貼り付け(Mac では cmd+k に変更)、フレーズをよく変換するならスニペットの割り当ても追加します。英語の見出しを書くときは、専用のタイトルケースツールを使いましょう。


